Penanganan kesalahan JavaScript

Halo, Habr!

Topik penanganan error di JavaScript muncul tidak hanya untuk setiap pemula, tetapi juga untuk developer berpengalaman. Saya perhatikan bahwa topiknya sudah agak usang, jadi saya akan membiarkan diri saya merangkum secara ringkas segala sesuatu yang benar-benar efektif dan diuji dalam pertempuran oleh saya, kolega, dan pakar TI.

Nah, agar Anda paham apa itu esensi dan apakah ada yang baru bagi Anda, berikut adalah struktur catatannya:

• Kesalahan JavaScript?

• Metode penanganan kesalahan beton bertulang

• Membuat hidup kita lebih mudah

• Kesalahan ketergantungan

Kesalahan JavaScript?

Tanpa menyelami etimologi kesalahan dalam JavaScript, mari kita mengkarakterisasikannya secara abstrak, karena objek kesalahan itu sendiri di JS tidak sepenuhnya distandarisasi.

Kesalahan di JS adalah "melempar" pengecualian. Pengecualian harus ditangani oleh program, jika tidak penerjemah akan mengembalikan kita ke tempat di mana pengecualian ini dilemparkan. Secara default, pengecualian memunculkan objek Error.

Tidak masalah jika Anda menulis Frontend atau Backend, hanya ada satu pendekatan untuk menangani - tangkap pengecualian yang tidak menguntungkan dan tangani. Semuanya perlu diolah terutama dalam produksi.

Mari segera mencerahkan beberapa situasi non-standar (sebagai siapa pun):

• kesalahan dari luar program,

• kesalahan terminal.

Kesalahan terminal adalah kode kesalahan yang dikembalikan oleh OS atau daemon.

Kesalahan dari luar program mungkin merupakan kasus khusus dari sebuah terminal, tetapi bagaimanapun itu harus ditangani.

, .. , , .

– ?

, :

• ( , ..)

• ( ..)

• ( , , 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 . , , , , . , , , , .

Di atas, kami telah mempertimbangkan metode penanganan error yang cukup standar, dan juga mendemonstrasikan contoh teknik dengan kode untuk paket populer. Selain itu, ada alat untuk mengotomatiskan pengumpulan dan pemrosesan kesalahan. Untuk informasi lebih lanjut, baca tautannya.

Gabungkan beberapa metode dan percayalah pada proyek terkemuka. Pastikan untuk mencatat selama pengembangan, breakpoint hanya membantu untuk memahami masalah dalam kasus tertentu, tetapi bukan obatnya.

Penulis: Rishat Gabaidullov, Kepala Kelompok Latihan Frontend di Reksoft.