بغض النظر عن مدى روعتنا في البرمجة ، في بعض الأحيان تحتوي أكوادنا على أخطاء. قد تحدث بسبب أخطائنا ، إدخال المستخدم معلومة غير متوقعة ، واستجابة خاطئة للخادم ، ولآلاف الأسباب الأخرى.
عادة “يتعطل” البرنامج في حالة حدوث خطأ (يتوقف فورًا) ، مع ظهور الخطأ في وحدة التحكم.
But there’s a syntax construct try...catch
that allows us to “catch” errors so the script can, instead of dying, do something more reasonable.
The “try…catch” syntax
The try...catch
construct has two main blocks: try
, and then catch
:
try {
// code...
} catch (err) {
// error handling
}
يعمل كالتالي:
- First, the code in
try {...}
is executed. - If there were no errors, then
catch (err)
is ignored: the execution reaches the end oftry
and goes on, skippingcatch
. - If an error occurs, then the
try
execution is stopped, and control flows to the beginning ofcatch (err)
. Theerr
variable (we can use any name for it) will contain an error object with details about what happened.
So, an error inside the try {...}
block does not kill the script – we have a chance to handle it in catch
.
دعونا نلقي نظرة على بعض الأمثلة.
-
مثال بدون أخطاء: يظهر
alert
(1)
وalert
(2)
:try { alert('بداية عمل try'); // (1) <-- // ...لا توجد أخطاء هنا alert('نهاية عمل try'); // (2) <-- } catch (err) { alert('بما أنه لا توجد أخطاء , تم تجاهل Catch'); // (3) }
-
مثال مع وجود خطأ: يظهر
alert
(1)
وalert
(3)
:try { alert('بداية عمل try'); // (1) <-- lalala; // خطأ ، لم يتم تعريف المتغير! alert('نهاية عمل try (لن يشتغل)'); // (2) } catch (err) { alert(`حدث خطأ !`); // (3) <-- }
try...catch
only works for runtime errorsلن يعمل إذا كان الكود خاطئًا من الناحية النحوية ، على سبيل المثال يحتوي على أقواس و معقفات ناقصة:
try {
{{{{{{{{{{{{
} catch (err) {
alert("The engine can't understand this code, it's invalid");
}
يقرأ محرك JavaScript الكود أولاً ، ثم يشغلها. تسمى الأخطاء التي تحدث في مرحلة القراءة بأخطاء “وقت التحليل” ولا يمكن إصلاحها (من داخل هذا الكود). ذلك لأن المحرك لا يستطيع فهم الكود.
So, try...catch
can only handle errors that occur in valid code. Such errors are called “runtime errors” or, sometimes, “exceptions”.
try...catch
works synchronouslyIf an exception happens in “scheduled” code, like in setTimeout
, then try...catch
won’t catch it:
try {
setTimeout(function() {
noSuchVariable; // سيتوقف البرنامج هنا
}, 1000);
} catch (err) {
alert( "won't work" );
}
That’s because the function itself is executed later, when the engine has already left the try...catch
construct.
To catch an exception inside a scheduled function, try...catch
must be inside that function:
setTimeout(function() {
try {
noSuchVariable; // try...catch handles the error!
} catch {
alert( "error is caught here!" );
}
}, 1000);
الكائن الخطأ
عند حدوث خطأ ، يقوم JavaScript بإنشاء كائن يحتوي على تفاصيل خاصة به. ثم يتم تمرير الكائن كوسيطة في catch
:
try {
// ...
} catch (err) {
// <-- the "error object", could use another word instead of err
// ...
}
بالنسبة لجميع الأخطاء المضمنة ، يحتوي هذا الكائن على خاصيتين رئيسيتين:
name
- اسم الخطأ. على سبيل المثال ، لمتغير غير محدد ، هذا
"ReferenceError"
. message
- رسالة نصية حول تفاصيل الخطأ.
هناك خصائص أخرى غير قياسية متاحة في معظم البيئات. واحدة من الأكثر استخدامًا ودعمًا هي:
stack
- مكدس الاستدعاء الحالي: سلسلة تحتوي على معلومات حول تسلسل الإستدعاءات المتداخلة التي أدت إلى الخطأ. تستخدم لأغراض التصحيح.
على سبيل المثال:
try {
lalala; // error, variable is not defined!
} catch (err) {
alert(err.name); // ReferenceError
alert(err.message); // lalala is not defined
alert(err.stack); // ReferenceError: lalala is not defined at (...call stack)
// Can also show an error as a whole
// The error is converted to string as "name: message"
alert(err); // ReferenceError: lalala is not defined
}
“catch” دون متغير
إذا لم نكن بحاجة إلى تفاصيل الخطأ, catch
يمكن أن تحثفه:
try {
// ...
} catch {
// <-- بدون (err)
// ...
}
Using “try…catch”
Let’s explore a real-life use case of try...catch
.
كما نعلم بالفعل, JavaScript تدعم JSON.parse(str) لقراءة قيمة JSON-encoded.
عادة يتم استخدامه لفك تشفير البيانات المستلمة عبر الشبكة ، من الخادم أو مصدر آخر.
نتلقى ذلك وندعو JSON.parse
مثل التالي:
let json = '{"name":"John", "age": 30}'; // البيانات من الخادم
let user = JSON.parse(json); // تحويل النص إلى كائن JS
// الآن هو كائن له خصائص من النص user
alert( user.name ); // John
alert( user.age ); // 30
يمكنك العثور على معلومات أكثر تفصيلاً حول JSON في فصل الكائن json وكيفية استخدامه.
إذا json
تالف, JSON.parse
يولد خطأ, و “يتوقف” البرنامج.
هل يجب أن نكون راضين عن ذلك؟ بالطبع لا!
بهذه الطريقة ، إذا كان هناك خطأ ما في البيانات ، فلن يعرف الزائر مطلقًا ذلك (ما لم يفتح وحدة تحكم مطور البرامج). والناس لا يحبون حقا عندما يتوقف شيء ما دون أي رسالة خطأ.
Let’s use try...catch
to handle the error:
let json = "{ bad json }";
try {
let user = JSON.parse(json); // <-- عندما يحدث خطأ...
alert( user.name ); // لا يعمل
} catch (err) {
// ...the execution jumps here
alert( "Our apologies, the data has errors, we'll try to request it one more time." );
alert( err.name );
alert( err.message );
}
هنا نستخدم catch
فقط لإظهار الرسالة, كن يمكننا القيام بالمزيد: إرسال طلب شبكة جديد ، اقتراح بديل للزائر ، إرسال معلومات حول الخطأ إلى منشأة تسجيل ، …. كل شيء أفضل من توقف البرنامج.
صناعة الأخطاء الخاصة
ماذا إذا json
صحيح من الناحية اللغوية ، ولكن ليس له خاصية name
?
مثل هذا:
let json = '{ "age": 30 }'; // بيانات غير مكتملة
try {
let user = JSON.parse(json); // <-- لا أخطاء
alert( user.name ); // لا يوجد اسم !
} catch (err) {
alert( "doesn't execute" );
}
خنا يعمل JSON.parse
بطريقة عادية, لكن غياب name
في الواقع هو خطأ بالنسبة لنا.
التوحيد معالجة الأخطاء ، سنستخدم العامل throw
.
العامل “Throw”
العامل throw
يولد خطأ.
نقوم بكتابته كالتالي:
throw <error object>
من الناحية التقنية, يمكننا استخدام أي شيء ككائن خطأ. قد يكون حتى بدائيًا مثل رقم أو سلسلة ، ولكن من الأفضل أن يكون كائنًا ، ويفضل أن يكون مع خصائص name
و message
(للتوافق مع الأخطاء المضمنة).
يحتوي JavaScript على العديد من المنشئات المدمجة للأخطاء القياسية: Error
, SyntaxError
, ReferenceError
, TypeError
و اخرين. يمكننا استخدامها لإنشاء كائنات خطأ أيضًا.
نقوم بكتابتهم كالتالي:
let error = new Error(message);
// or
let error = new SyntaxError(message);
let error = new ReferenceError(message);
// ...
للأخطاء المضمنة (ليس لأي كائنات ، للأخطاء فقط) ، خاصية name
هي بالضبط اسم المنشئ. وتأخذ خاصية message
من العوامل .
على سبيل المثال:
let error = new Error('حدث شيء ما o_O');
alert(error.name); // خطأ
alert(error.message); // حدث شيء ما o_O
دعونا نرى أي نوع من الأخطاء يولد JSON.parse
:
try {
JSON.parse("{ bad json o_O }");
} catch (err) {
alert(err.name); // SyntaxError
alert(err.message); // Unexpected token b in JSON at position 2
}
كما نرى ، هذا هو SyntaxError
.
وفي حالتنا غياب name
خطأ ، حيث يجب أن يكون لدى المستخدمين name
.
لذا دعونا نضف throw:
let json = '{ "age": 30 }'; // بيانات غير مكتملة
try {
let user = JSON.parse(json); // <-- لا اخطاء
if (!user.name) {
throw new SyntaxError("بيانات غير مكتملة: no name"); // (*)
}
alert( user.name );
} catch (err) {
alert( "JSON Error: " + err.message ); // JSON Error: Incomplete data: no name
}
في السطر (*)
, throw
يولد SyntaxError
مع المعطى message
, بنفس الطريقة التي تولدها JavaScript بنفسها.
عمل try
يتوقف على الفور و يتنقل إلى catch
.
الان catch
أصبح مكانًا واحدًا لكل معالجة الأخطاء: كلاهما لـ JSON.parse
وحالات أخرى.
إعادة رمي الإستثناءات
In the example above we use try...catch
to handle incorrect data. But is it possible that another unexpected error occurs within the try {...}
block? Like a programming error (variable is not defined) or something else, not just this “incorrect data” thing.
فمثلا:
let json = '{ "age": 30 }'; // بيانات غير مكتملة
try {
user = JSON.parse(json); // <-- user قبل "let" نسيت أن تضع
// ...
} catch (err) {
alert('JSON Error: ' + err); // JSON Error: ReferenceError: user is not defined
// (no JSON Error actually)
}
بالطبع ، كل شيء ممكن! المبرمجون يرتكبون الأخطاء. حتى في المرافق المفتوحة المصدر التي يستخدمها الملايين لعقود – فجأة يمكن اكتشاف خطأ يؤدي إلى اختراق رهيب.
In our case, try...catch
is placed to catch “incorrect data” errors. But by its nature, catch
gets all errors from try
. Here it gets an unexpected error, but still shows the same "JSON Error"
message. That’s wrong and also makes the code more difficult to debug.
يجب أن يقوم Catch بمعالجة الأخطاء التي يعرفها و “إعادة رمي” كل الآخرين فقط.
يمكن شرح تقنية “إعادة الرمي” بمزيد من التفصيل على النحو التالي:
-
Catch يحصل على جميع الأخطاء.
-
في
catch(err) {...}
نقوم بتحليل كائن الخطأerr
. -
إذا لم نكن نعرف كيف نتعامل معها ، فنفعل
throw err
. -
Catch gets all errors.
-
In the
catch (err) {...}
block we analyze the error objecterr
. -
If we don’t know how to handle it, we do
throw err
.
Usually, we can check the error type using the instanceof
operator:
try {
user = { /*...*/ };
} catch (err) {
if (err instanceof ReferenceError) {
alert('ReferenceError'); // "ReferenceError" للوصول إلى متغير غير محدد
}
}
يمكننا أيضًا الحصول على اسم فئة الخطأ من خاصية err.name
. جميع الأخطاء الأصلية لديها هذه الخاصية. خيار آخر هو قراءة err.constructor.name.
في الكود أدناه ، نستخدم إعادة رمي بحيث catch
يعالج فقط SyntaxError
:
let json = '{ "age": 30 }'; // بيانات غير مكتملة
try {
let user = JSON.parse(json);
if (!user.name) {
throw new SyntaxError("بيانات غير مكتملة: لا وجود لي name");
}
blabla(); // خطأ غير متوقع
alert( user.name );
} catch (err) {
if (err instanceof SyntaxError) {
alert( "JSON Error: " + err.message );
} else {
throw err; // rethrow (*)
}
}
The error throwing on line (*)
from inside catch
block “falls out” of try...catch
and can be either caught by an outer try...catch
construct (if it exists), or it kills the script.
إذا catch
تعالج في الواقع الأخطاء التي تعرف كيف تتعامل معها و" تتخطى "جميع الآخرين.
The example below demonstrates how such errors can be caught by one more level of try...catch
:
function readData() {
let json = '{ "age": 30 }';
try {
// ...
blabla(); // خطأ!
} catch (err) {
// ...
if (!(err instanceof SyntaxError)) {
throw err; // rethrow (don't know how to deal with it)
}
}
}
try {
readData();
} catch (err) {
alert( "External catch got: " + err ); // caught it!
}
Here readData
only knows how to handle SyntaxError
, while the outer try...catch
knows how to handle everything.
try…catch…finally
انتظر ، هذا ليس كل شيء.
The try...catch
construct may have one more code clause: finally
.
إذا كان موجودًا ، فإنه يعمل في جميع الحالات:
- بعد
try
, إذا لم تكن هناك أخطاء ، - بعد
catch
, إذا كانت هناك أخطاء.
تبدو الصيغة الموسعة كما يلي:
try {
... try to execute the code ...
} catch (err) {
... handle errors ...
} finally {
... يعمل في جميع الحالات ...
}
حاول تشغيل هذا الكود:
try {
alert('try');
if (confirm('Make an error?')) BAD_CODE();
} catch (err) {
alert('catch');
} finally {
alert('أخيرا');
}
يحتوي الكود على طريقتين للتنفيذ:
- إذا أجبت بـ “نعم” على “أخطأت؟”, ثم
try -> catch -> finally
. - إذا قلت “لا”, ثم
try -> finally
.
غالبًا ما يتم استخدام عبارة finally
عندما نبدأ في فعل شيء ونريد الانتهاء منه في أي حالة من النتائج.
على سبيل المثال ، نريد قياس الوقت الذي تستغرقه دالة أرقام فيبوناتشي fib(n)
. بطبيعة الحال ، يمكننا البدء في القياس قبل تشغيلها والانتهاء منها بعد ذلك. ولكن ماذا لو كان هناك خطأ أثناء استدعاء الدالة؟ على وجه الخصوص ، يؤدي تنفيذ fib(n)
في الكود أدناه إلى إرجاع خطأ للأرقام السالبة أو غير الصحيحة.
عبارة finally
هي مكان عظيم لإنهاء القياسات مهما كانت.
هنا finally
يضمن أن الوقت سيتم قياسه بشكل صحيح في كلتا الحالتين – في حالة تنفيذ fib
بنجاح وفي حالة حدوث خطأ فيه:
let num = +prompt("أدخل رقم صحيح موجب؟", 35)
let diff, result;
function fib(n) {
if (n < 0 || Math.trunc(n) != n) {
throw new Error("يجب ألا تكون سالبة ، وكذلك عددًا صحيحًا.");
}
return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}
let start = Date.now();
try {
result = fib(num);
} catch (err) {
result = 0;
} finally {
diff = Date.now() - start;
}
alert(result || "حدث خطأ");
alert( `${diff}ms مدة الإشتغال` );
يمكنك التحقق عن طريق تشغيل الكود بإدخال 35
في prompt
– يتم تنفيذه بشكل طبيعي, finally
بعد try
. ثم أدخل -1
– سيكون هناك خطأ فوري ، وسيستغرق التنفيذ 0ms
. تم إجراء القياسات بشكل صحيح.
بمعنى آخر ، قد تنتهي الدالة بـ return
أو throw
, وهذا لا يهم. تشتغل finally
في كلتا الحالتين.
try...catch...finally
وبخلاف ذلك ، إذا أعلنا عن let
في try
, فسوف تكون مرئية فقط داخلها.
finally
and return
The finally
clause works for any exit from try...catch
. That includes an explicit return
.
في المثال أدناه ، هناك return
في try
. في هذه الحالة ، تعمل finally
قبل العودة إلى الكود الخارجي مباشرةً.
function func() {
try {
return 1;
} catch (err) {
/* ... */
} finally {
alert( 'finally' );
}
}
alert( func() ); // يعمل التنبيه أولاً من finally ، ثم هذا
````smart header="`try...finally`"
The `try...finally` construct, without `catch` clause, is also useful. We apply it when we don't want to handle errors here (let them fall through), but want to be sure that processes that we started are finalized.
```js
function func() {
// ابدأ في فعل شيء يحتاج إلى إكمال (مثل القياسات)
try {
// ...
} finally {
// أكمل هذا الشيء حتى لو توقف كل شيء
}
}
```
في الكود أعلاه ، هناك خطأ داخل `try` دائمًا ما يقع ، لأنه لا يوجد `catch`. ولكن `finally` يعمل قبل أن يترك التنفيذ الدالة.
catch شاملة
المعلومات الواردة في هذا القسم ليست جزءًا من أساسيات JavaScript.
Let’s imagine we’ve got a fatal error outside of try...catch
, and the script died. Like a programming error or some other terrible thing.
هل هناك طريقة للرد على مثل هذه الحوادث؟ قد نرغب في تسجيل الخطأ وإظهار شيء للمستخدم (عادةً لا يرون رسائل خطأ) ، إلخ.
لا يوجد شيء في المواصفات ، ولكن البيئات توفرها عادةً ، لأنها مفيدة حقًا. على سبيل المثال, Node.js له process.on("uncaughtException")
for that. And in the من أجل هذا. وفي المتصفح يمكننا تعيين دالة للعامل الخاص window.onerror,التي سيتم تشغيلها في حالة وجود خطأ غير معلوم.
بناء الجملة:
window.onerror = function (message, url, line, col, error) {
// ...
};
message
- رسالة خطأ.
url
- عنوان URL للنص البرمجي حيث حدث خطأ.
line
,col
- أرقام الأسطر والأعمدة حيث حدث الخطأ.
error
- كائن خطأ.
على سبيل المثال:
<script>
window.onerror = function(message, url, line, col, error) {
alert(`${message}\n At ${line}:${col} of ${url}`);
};
function readData() {
badFunc(); // عفوًا ، حدث خطأ ما!
}
readData();
</script>
دور المعالج الشامل window.onerror
ادة لا يكون استرداد تنفيذ البرنامج النصي – ربما يكون ذلك مستحيلًا في حالة وجود أخطاء في البرمجة ، ولكن لإرسال رسالة الخطأ إلى المطورين.
هناك أيضًا خدمات الويب التي توفر تسجيل الأخطاء لمثل هذه الحالات ، مثل https://errorception.com أو http://www.muscula.com.
يعملون على هذا النحو:
- نسجل في الخدمة ونحصل على جزء JS (أو عنوان URL ) منها لإدراجها في الصفحات.
- يحدد هذا النص البرمجي لـ JS دالة
window.onerror
. - عند حدوث خطأ ، يرسل طلب شبكة حوله إلى الخدمة.
- يمكننا تسجيل الدخول إلى واجهة ويب الخدمة ونرى الأخطاء.
الخلاصة
The try...catch
construct allows to handle runtime errors. It literally allows to “try” running the code and “catch” errors that may occur in it.
الصيغة هي:
try {
// run this code
} catch (err) {
// if an error happened, then jump here
// err is the error object
} finally {
// تفعل في أي حال بعد try/catch
}
There may be no catch
section or no finally
, so shorter constructs try...catch
and try...finally
are also valid.
كائنات الخطأ لها الخصائص التالية:
message
– رسالة خطأ يمكن قراءتها و فهمها.name
– اسم الخطأ (اسم مُنشئ الخطأ).stack
(غير قياسي ، ولكنه مدعوم جيدًا) – المجموعة في لحظة إنشاء الخطأ.
If an error object is not needed, we can omit it by using catch {
instead of catch (err) {
.
يمكننا أيضًا إنشاء الأخطاء الخاصة بنا باستخدام عامل throw
. من الناحية التقنية ، يمكن أن يكون محتوى throw
متكون من أي شيء, ولكنها عادة ما تكون كائن خطأ يرث من فئة Error
. المزيد عن توسيع الأخطاء في الفصل التالي.
إعادة الرمي هو نمط مهم جدًا في معالجة الأخطاء: عادة ما تتوقع catch
وتعرف كيفية التعامل مع نوع الخطأ المعين, لذلك يجب أن تقوم بإعادة رمي الأخطاء التي لا تعرفها.
Even if we don’t have try...catch
, most environments allow us to setup a “global” error handler to catch errors that “fall out”. In-browser, that’s window.onerror
.
التعليقات
<code>
، وللكثير من السطور استخدم<pre>
، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)