معالجة أخطاء JavaScript

مرحبا هبر!

لا ينشأ موضوع معالجة الأخطاء في JavaScript فقط لكل مبتدئ ، ولكن أيضًا لمطور متمرس. ألاحظ أن الموضوع مبتذل تمامًا بالفعل ، لذا سأسمح لنفسي بتلخيص كل شيء فعال حقًا وتم اختباره في المعركة من قبلي وزملائي ومعلمي تكنولوجيا المعلومات في ملخص قصير.

لذلك ، لكي تفهم ما هو الجوهر وما إذا كان هناك شيء جديد بالنسبة لك ، فيما يلي هيكل الملاحظة:

• خطأ جافا سكريبت؟

• طرق معالجة أخطاء الخرسانة المسلحة

• نجعل حياتنا أسهل

• أخطاء التبعية

خطأ جافا سكريبت؟

دون الخوض في أصل خطأ في JavaScript ، دعنا نصنفه بشكل تجريدي ، لأن كائن الخطأ نفسه في JS ليس موحدًا تمامًا.

الخطأ في JS هو "طرح" استثناء. يجب معالجة الاستثناء بواسطة البرنامج ، وإلا سيعيدنا المترجم الفوري إلى المكان الذي تم فيه طرح هذا الاستثناء. بشكل افتراضي ، يقوم الاستثناء بإلقاء كائن خطأ.

لا يهم إذا كنت تكتب Frontend أو Backend ، فهناك طريقة واحدة فقط للتعامل معها - التقاط الاستثناء المؤسف والتعامل معه. كل شيء يحتاج إلى المعالجة ، خاصة في الإنتاج.

دعنا نوضح على الفور بعض المواقف غير القياسية (مثل أي شخص):

• خطأ من خارج البرنامج ،

• خطأ طرفي.

خطأ المحطة الطرفية هو رمز الخطأ الذي تم إرجاعه بواسطة نظام التشغيل أو البرنامج الخفي.

قد يكون الخطأ من خارج البرنامج حالة خاصة للطرف ، ولكن مع ذلك يجب معالجته.

, .. , , .

– ?

, :

• ( , ..)

• ( ..)

• ( , , undefined) –

• , .

, , . , – JavaScript, Typescript.

, , Error:

• name – ;

• message – ;

• stack – , .

, , , .

. , – 80% . 20% , – , , – .

, . , TDD E2E, , , :

• , ;

• (, , , ..);

• (, , ..);

• -;

• ;

• / .

. , , , , . , - .

– , . .

SOLID DRY, (middleware) , . Middleware , . .

Node.js

Vanilla JS

React

Angular

Vue

, : , JavaScript? .

try…catch, .

:

// ...

const middlewareRequest = async (req) => {
  try {
    const { data } = await axios.get(req);
    
    return data;
  } catch (err) {
    throw new Error(err);
  }
}

// ...

, try…catch, « », DRY , .

: middleware – .

:

// ...

const wrapEventWithExcpetionHandler = (middleware) => (e) => {
  const { error } = e; // ,     
  
  if (error) {
    throw new Error(error);
  }
  
  try {
    return middleware(e);
  } catch (err) {
    throw new Error(err);
  }
}

window.addEventListener('mousemove', wrapEventWithExceptionHandler(middlewareGlobalMouseMove));

// ...

, , , , .

, «» .

, : , , . , , , .

?

– . – , «» . , .

DevTools , , . , , :

// ...

/*  console.log      */

/*
   ,      ,
          
*/

console.log('Check:\r\n  username - %s\r\n  age - %i\r\n  data - %o', 'Mike', 23, {status: 'registered'});
/*
Check:
  username - Mike
  age - 23
  data - {status: "registered"}
*/

/*    */
console.table([{username: 'Mike', age: 23}, {username: 'Sarah', age: 46}]);

/*         */
console.dir(document.body.childNodes[1]);

// ...

, , (, , ..), , .

1.    : , . log4js. , , .

2.    DevTools! . , – , . Source. , . .

3.    .

4.    , , (. ).

5.    – , , , . , DevTools .

, , , .

JS, .

, Sentry Rollbar, , .

, , . , ( ).

Graphana, , .. JavaScript, , .

, .

, .. . ? :

• . console (log, warn, error, info), (. log4js). , , .

• production/development/test source-map -, , .

• , , Pull Request. Fork , , .

• , babel. babel AST, JavaScript . , , , , . , , , , .

أعلاه ، لقد ناقشنا طرق معالجة الأخطاء القياسية تمامًا ، وعرضنا أيضًا أمثلة على التقنيات ذات التعليمات البرمجية للحزم الشائعة. بالإضافة إلى ذلك ، هناك أدوات لأتمتة جمع ومعالجة الأخطاء. لمزيد من المعلومات ، اقرأ الروابط.

اجمع بين عدة طرق وثق بالمشاريع ذات السمعة الطيبة. تأكد من تسجيل الدخول أثناء التطوير ، لن تساعد نقاط التوقف إلا في فهم المشكلة في حالة معينة ، ولكنها ليست علاجًا.

المؤلف: ريشات جبيدولوف ، رئيس مجموعة ممارسات الواجهة الأمامية في Reksoft.