🥂 👻 🍣 JavaScriptエラー処理 🚰 ⏲️ 🛏️

こんにちは、Habr！

JavaScriptでのエラー処理のトピックは、すべての初心者だけでなく、熟練した開発者にも発生します。このトピックはすでにかなりハックニーになっていることに注意します。そのため、私、同僚、ITの達人が実際に効果的で、戦闘でテストしたすべてのことを簡単に要約します。

それで、あなたが本質が何であるか、そしてあなたにとって何か新しいものがあるかどうかを理解するために、以下はメモの構造です：

JavaScriptエラー？
強化された具体的なエラー処理方法
私たちの生活を楽にする
依存関係エラー

JavaScriptエラー？

JSのエラーオブジェクト自体は完全に標準化されていないため、JavaScriptのエラーの語源に飛び込むことなく、抽象的に特徴付けてみましょう。

JSの間違いは、例外を「投げる」ことです。例外はプログラムで処理する必要があります。そうしないと、インタープリターはこの例外がスローされた場所に戻ります。デフォルトでは、例外はErrorオブジェクトをスローします。

フロントエンドとバックエンドのどちらを作成するかは関係ありません。処理する方法は1つだけです。つまり、不幸な例外をキャッチして処理します。特にプロダクションでは、すべてを処理する必要があります。

すぐにいくつかの非標準的な状況を（誰もが）啓発しましょう：

プログラム外からのエラー、
ターミナルエラー。

ターミナルエラーは、OSまたはデーモンによって返されるエラーコードです。

プログラムの外部からのエラーは、端末の特殊なケースである可能性がありますが、それでも処理する必要があります。

, .. , , .

– ?

, :

( , ..)
( ..)
( , , undefined) –
, .

, , . , – JavaScript, Typescript.

, , Error:

name – ;
message – ;
stack – , .

, , , .

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

, . , TDD E2E, , , :

, ;
(, , , ..);
(, , ..);
-;
;
/ .

. , , , , . , - .

– , . .

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

, : , 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 . , , , , . , , , , .

上記では、非常に標準的なエラー処理方法を検討し、一般的なパッケージのコードを使用した手法の例も示しました。さらに、エラーの収集と処理を自動化するためのツールがあります。詳細については、リンクをお読みください。

複数の方法を組み合わせて、信頼できるプロジェクトを信頼します。開発中は必ずログに記録してください。ブレークポイントは特定の場合の問題を理解するのに役立つだけで、解決策ではありません。

著者： Rishat Gabaidullov、Reksoftのフロントエンドプラクティスグループの責任者。

JavaScriptエラー処理

JavaScriptエラー？

More articles: