ホーム>プログラミング関連>JAVAソースコード
ダウンロード

JavaScript エラー ハンドブック

この README には、JavaScript エラーへの対処、サーバーへのエラー報告、これをすべて困難にする多くのバグへの対処方法について、私が長年にわたって学んだ情報が含まれています。この分野ではブラウザは改善されていますが、すべてのアプリケーションが発生したエラーを正常かつ確実に処理できるようにするためには、まだ改善の余地が残っています。

このガイドに記載されている内容のテスト ケースは、https://mknichel.github.io/javascript-errors/ にあります。

目次

  • 導入

  • JavaScript エラーの構造

    • JavaScript エラーの生成

    • エラーメッセージ

    • スタックトレースのフォーマット

  • JavaScript エラーの捕捉

    • window.onerror

    • トライ/キャッチ

    • 保護されたエントリポイント

    • 約束

    • ウェブワーカー

    • Chrome 拡張機能

導入

エラーを捕捉、報告し、修正することは、アプリケーションの健全性と安定性を確保するために重要な部分です。 JavaScript コードはクライアントやさまざまなブラウザ環境でも実行されるため、アプリケーションからの JS エラーを常に把握することも困難になる場合があります。各ブラウザの実装に違いが生じる JS エラーを報告する方法に関する正式な Web 仕様はありません。さらに、ブラウザの JavaScript エラーの実装にも多くのバグがあり、これがさらに困難になっています。このページでは、JS エラーのこれらの側面をナビゲートして、将来の開発者がエラーをより適切に処理できるようにし、ブラウザーが標準化されたソリューションに収束することを期待しています。

JavaScript エラーの構造

JavaScript エラーは、エラー メッセージとスタック トレースという 2 つの主要な部分で構成されます。エラー メッセージは何が問題だったかを説明する文字列であり、スタック トレースはコード内のどこでエラーが発生したかを説明します。 JS エラーは、ブラウザ自体によって生成されることも、アプリケーション コードによってスローされることもあります。

JavaScript エラーの生成

JS エラーは、コードの一部が適切に実行されない場合にブラウザによってスローされることも、コードによって直接スローされることもあります。

例えば：

 var a = 3;a();

この例では、実際には数値である変数を関数として呼び出すことはできません。ブラウザーは、 TypeError: a is not a functionのようなエラーをスローします。

開発者は、特定の前提条件が満たされない場合にコードの一部でエラーをスローしたい場合もあります。例えば

if (!checkPrecondition()) {
  throw new Error("前提条件を満たしていません!");}

この場合、エラーはError: Doesn't meet precondition!になります。 。このエラーには、適切な行を指すスタック トレースも含まれます。ブラウザーとアプリケーション コードによってスローされたエラーは同じように処理できます。

開発者が JavaScript でエラーをスローする方法は複数あります。

  • throw new Error('Problem description.')

  • throw Error('Problem description.') <-- 最初のものと同等

  • throw 'Problem description.' <-- 悪い

  • throw null <-- さらに悪いことに

ブラウザーはそのエラーにスタック トレースを添付しないため、コード内でエラーが発生した場所のコンテキストが失われるため、文字列または null をスローすることは実際には推奨されません。実際の Error オブジェクトをスローするのが最善です。このオブジェクトには、エラー メッセージと、エラーが発生したコードの正しい行を示すスタック トレースが含まれます。

エラーメッセージ

各ブラウザには、関数以外を呼び出そうとする上記の例など、組み込み例外に使用する独自のメッセージ セットがあります。ブラウザは同じメッセージを使用しようとしますが、仕様がないため、これは保証されません。たとえば、Chrome と Firefox は両方とも、上記の例では{0} is not a functionが、IE11 はFunction expectedを報告します (特に、どの変数が呼び出されようとしたかは報告されません)。

ただし、ブラウザーも頻繁に異なる傾向があります。 switchステートメントに複数のデフォルト ステートメントがある場合、Chrome は"More than one default clause in switch statement"をスローしますが、Firefox は"more than one switch default"を報告します。新しい機能が Web に追加されると、これらのエラー メッセージを更新する必要があります。これらの違いは、後で難読化されたコードから報告されたエラーを処理しようとするときに影響する可能性があります。

ブラウザがエラー メッセージに使用するテンプレートは、次の場所にあります。

  • Firefox - http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg

  • Chrome - https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js

  • Internet Explorer - https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h

ブラウザーは、一部の例外に対して異なるエラー メッセージを生成します。

スタックトレースのフォーマット

スタック トレースは、コード内のどこでエラーが発生したかを説明します。これは一連のフレームで構成されており、各フレームはコード内の特定の行を記述します。最上位のフレームはエラーがスローされた場所であり、後続のフレームは関数呼び出しスタック、つまりエラーがスローされたポイントに到達するまでにコードがどのように実行されたかです。 JavaScript は通常連結および縮小されるため、特定の行に多数のステートメントがある場合に正確なステートメントを見つけられるように列番号を付けることも重要です。

Chrome の基本的なスタック トレースは次のようになります。 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

各スタック フレームは、関数名 (該当する場合、およびコードがグローバル スコープで実行されなかった場合)、関数の元のスクリプト、およびコードの行番号と列番号で構成されます。

残念ながら、スタック トレース形式には標準がないため、ブラウザによって異なります。

Microsoft Edge と IE 11 のスタック トレースは、グローバル コードが明示的にリストされている点を除けば Chrome と似ています。 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:3)
  at Global code (http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3)

Firefox のスタック トレースは次のようになります。 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9
  @http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Safari の形式は Firefox の形式に似ていますが、少し異なります。 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:18
  global code@http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:13

基本的な情報は同じですが、形式が異なります。

また、Safari の例では、形式が Chrome と異なるだけでなく、列番号も Chrome と Firefox の両方と異なることに注意してください。列番号は、コード(function namedFunction() { throwError(); })();のように、さまざまなエラー状況でさらにずれる可能性もあります。 , Chrome はthrowError()関数呼び出しの列を報告しますが、IE11 は文字列の先頭として列番号を報告します。これらの違いは、後でサーバーが報告されたエラーのスタック トレースを解析し、難読化されたスタック トレースを難読化する必要があるときに再び影響を及ぼします。

エラーのスタック プロパティの詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack を参照してください。 Error.stack プロパティにアクセスすると、Chrome ではスタックの一部としてエラー メッセージが含まれますが、Safari 10 以降では含まれません。

スタック トレースの形式はブラウザによって使用される形式と列番号が異なります。

さらに詳しく見てみると、スタック トレース形式には多くの微妙な違いがあります。これについては、以下のセクションで説明します。

無名関数の名前付け

デフォルトでは、匿名関数には名前がなく、スタック トレースの関数名に空の文字列または「匿名関数」として表示されます (ブラウザによって異なります)。デバッグを改善するには、すべての関数に名前を追加して、スタック フレームに確実に表示されるようにする必要があります。これを行う最も簡単な方法は、たとえその名前が他の場所で使用されていない場合でも、匿名関数に名前を付けて指定することです。例えば：

 setTimeout(匿名関数の関数名() { ... }, 0);

これにより、スタック トレースが次のようになります。 

at http://mknichel.github.io/javascript-errors/javascript-errors.js:125:17

に

at nameOfTheAnonymousFunction (http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31)

Safari では、これは次のようになります。 

https://mknichel.github.io/javascript-errors/javascript-errors.js:175:27

に

nameOfTheAnonymousFunction@https://mknichel.github.io/javascript-errors/javascript-errors.js:171:41

このメソッドにより、関数内のコードのフレームにnameOfTheAnonymousFunctionが確実に表示されるため、デバッグがはるかに簡単になります。詳細については、http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/#toc-debugging-tips を参照してください。

変数への関数の代入

関数自体に名前がない場合、ブラウザーは関数が割り当てられている変数またはプロパティの名前も使用します。たとえば、

 var fnVariableName = function() { ... };

ブラウザは、スタック トレース内の関数の名前としてfnVariableName使用します。 

    at throwError (http://mknichel.github.io/javascript-errors/javascript-errors.js:27:9)
    at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

それよりもさらに微妙なのは、この変数が別の関数内で定義されている場合、Firefox を除くすべてのブラウザは、スタック トレース内の関数名として変数の名前だけを使用します。Firefox は、次の名前を連結した別の形式を使用します。外部関数と内部変数の名前。例：

関数 throwErrorFromInnerFunctionAssignedToVariable() {
  var fnVariableName = function() { throw new Error("foo"); };
  fn変数名();}

Firefox では次のように生成されます。 

throwErrorFromInnerFunctionAssignedToVariable/fnVariableName@http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37

他のブラウザでは、これは次のようになります。 

at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

Firefox は、別の関数内で定義された関数に対して異なるスタック フレーム テキストを使用します。

displayName プロパティ

関数の表示名は、IE11 を除くすべての主要なブラウザーで、 displayNameプロパティによって設定することもできます。これらのブラウザでは、displayName は devtools デバッガに表示されますが、Safari を除くすべてのブラウザでは、エラー スタック トレースでは使用されません(Safari は、エラーに関連付けられたスタック トレースでも displayName を使用する点で他のブラウザとは異なります)。

 var someFunction = function() {};someFunction.displayName = " # 関数の詳しい説明。";

displayName プロパティの公式仕様はありませんが、すべての主要なブラウザでサポートされています。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName および http://www.alertdebugging.com/2009/04/29/building-a-better を参照してください。 displayName の詳細については、-javascript-profiler-with-webkit/ を参照してください。

IE11 は、displayName プロパティをサポートしていません。

Safari は、エラー スタック トレースのシンボル名として displayName プロパティを使用します。

プログラムによるスタック トレースのキャプチャ

スタック トレースなしでエラーが報告された場合 (これが発生する場合の詳細については、以下を参照してください)、プログラムでスタック トレースをキャプチャすることが可能です。

Chrome では、 Error.captureStackTrace API を使用すると、これを非常に簡単に行うことができます。この API の使用方法の詳細については、https://github.com/v8/v8/wiki/Stack%20Trace%20API を参照してください。

例えば：

関数ignoreThisFunctionInStackTrace() {
  var err = 新しいエラー();
  Error.captureStackTrace(err、スタックトレースのこの関数を無視);
  err.stack を返します;}

他のブラウザでは、新しいエラーを作成し、そのオブジェクトのスタック プロパティにアクセスすることによってスタック トレースを収集することもできます。

 var err = new Error('');return err.stack;

ただし、IE10 は、実際にエラーがスローされたときにのみスタック トレースを設定します。

試す {
  throw new Error('');} catch (e) {
  e.stack を返します;}

これらのアプローチがいずれも機能しない場合は、 arguments.callee.callerオブジェクトを反復処理することで、行番号や列のない大まかなスタック トレースを作成できます。ただし、これは ES5 Strict モードでは機能せず、推奨されるアプローチではありません。

非同期スタック トレース

コードでsetTimeout使用する場合や Promises を使用する場合など、非同期ポイントが JavaScript コードに挿入されるのは非常に一般的です。これらの非同期エントリ ポイントにより、新しい実行コンテキストが形成され、スタック トレースが再び最初から開始されるため、スタック トレースに問題が発生する可能性があります。

Chrome DevTools は非同期スタック トレースをサポートしています。つまり、エラーのスタック トレースには、非同期ポイントが導入される前に発生したフレームも表示されるようになります。 setTimeout を使用すると、最終的にエラーを生成した setTimeout 関数を呼び出したユーザーが捕捉されます。詳細については、http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/ を参照してください。

非同期スタック トレースは次のようになります。 

  throwError	@	throw-error.js:2
  setTimeout (async)		
  throwErrorAsync	@	throw-error.js:10
  (anonymous function)	@	throw-error-basic.html:14

非同期スタック トレースは、現時点では Chrome DevTools でのみサポートされており、DevTools が開いているときにスローされる例外に対してのみサポートされています。コード内の Error オブジェクトからアクセスされるスタック トレースには、その一部として非同期スタック トレースが含まれません。

場合によっては、非同期スタック トレースをポリフィルすることは可能ですが、スタック トレースのキャプチャは安価ではないため、アプリケーションのパフォーマンスに重大な影響を与える可能性があります。

Chrome DevTools のみが非同期スタック トレースをネイティブにサポートしています。

インラインスクリプトと評価の命名

HTML ページに評価またはインライン化されたコードのスタック トレースでは、ページの URL と実行されたコードの行/列番号が使用されます。

例えば： 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

これらのスクリプトが実際に最適化の理由でインライン化されたスクリプトからのものである場合、URL、行、列番号は間違っています。この問題を回避するために、Chrome と Firefox は//# sourceURL=注釈をサポートしています (Safari、Edge、および IE はサポートしません)。このアノテーションで指定された URL はすべてのスタック トレースの URL として使用され、行番号と列番号は HTML ドキュメントではなく