JavaScript例外処理の詳細解説_JavaScriptスキル

フロントエンド エンジニアは皆、JavaScript に基本的な例外処理機能があることを知っています。 new Error() をスローすることができ、API の呼び出し時にエラーが発生した場合、ブラウザーも例外をスローします。しかし、ほとんどのフロントエンド エンジニアは、このような異常な情報を収集することを考えたこともないと推定されています

とにかく、更新後に JavaScript エラーが再発しない限り、ユーザーは更新することで問題を解決でき、ブラウザはクラッシュしません。この仮定は、シングル ページ アプリが普及する前から当てはまっていました。現在のシングル ページ アプリのステータスは、一定期間実行すると非常に複雑になります。ユーザーは、ここに到達するまでにいくつかの入力操作を実行した可能性があります。更新される必要があるかどうか。前回の操作を完全にやり直すべきではないでしょうか？したがって、これらの例外情報を取得して分析する必要があります。その後、ユーザー エクスペリエンスへの影響を避けるためにコードを変更できます。

例外をキャッチする方法

私たちは独自の throw new Error() を書きました。もちろん、 throw がどこに書かれているかを正確に知っているので、必要に応じてそれをキャッチすることができます。ただし、ブラウザ API を呼び出すときに発生する例外は、必ずしもキャッチするのが簡単ではありません。一部の API は例外をスローするように標準で記述されており、実装の違いや欠陥により個々のブラウザによってのみスローされる API もあります。前者の場合は、try-catch を通じてキャッチすることもできます。後者の場合は、グローバル例外をリッスンしてキャッチする必要があります。

トライキャッチ

一部のブラウザ API が例外をスローすることがわかっている場合は、プログラム全体がエラーによって不正な状態にならないように、呼び出しを try-catch に入れる必要があります。たとえば、window.localStorage は、データの書き込みが容量制限を超えると例外をスローします。これは、Safari のプライベート ブラウジング モードにも当てはまります。

コードをコピーします コードは次のとおりです:

{
を試してください localStorage.setItem('date', Date.now());
} キャッチ (エラー) {
reportError(エラー);
}

try-catch のもう 1 つの一般的な使用例はコールバックです。コールバック関数のコードは私たちの制御の範囲外であるため、コードの品質や、例外をスローする他の A​​PI が呼び出されるかどうかについてはわかりません。コールバックを呼び出した後の他のコードがコールバック エラーによって実行できなくなるのを防ぐために、呼び出しを try-catch に戻す必要があります。

コードをコピーします コードは次のとおりです:

listeners.forEach(function(listener) {
{
を試してください リスナー();
} キャッチ (エラー) {
reportError(エラー);
}
});

window.onerror

try-catch でカバーされていない領域では、例外が発生した場合、window.onerror を通じてのみキャッチできます。

コードをコピーします コードは次のとおりです:

window.onerror =
function(errorMessage, scriptURI, lineNumber) {
reportError({
メッセージ: errorMessage、
スクリプト: scriptURI、
行: 行番号
});
}

window.addEventListener または window.attachEvent を使用して window.onerror をリッスンする賢明な行為に注意してください。多くのブラウザは window.onerror のみを実装するか、window.onerror の実装のみが標準です。ドラフト標準でも window.onerror が定義されていることを考慮すると、window.onerror をそのまま使用できます。

属性が失われました

キャプチャされた例外を収集し、クエリと分析のためにサーバー側のストレージにバッチで送信する reportError 関数があるとします。収集したい情報は何でしょうか。さらに役立つ情報には、エラー タイプ (name)、エラー メッセージ (message)、スクリプト ファイル アドレス (script)、行番号 (line)、列番号 (column)、およびスタック トレース (stack) が含まれます。 try-catch を通じて例外がキャッチされた場合、この情報は Error オブジェクト (主流のブラウザでサポートされている) にあるため、reportError もこの情報を収集できます。しかし、window.onerror を介してキャプチャされた場合、このイベント関数には 3 つのパラメーターしかないことは誰もが知っているため、これら 3 つのパラメーターの予期しない情報が失われます。

シリアル化されたメッセージ

Error オブジェクトが私たち自身によって作成された場合、error.message は私たちによって制御されます。基本的に、error.message に何を入力しても、window.onerror の最初のパラメータ (メッセージ) になります。 (ブラウザーは実際には、「Uncaught Error: 」プレフィックスを追加するなど、わずかな変更を加えます。) したがって、必要なプロパティ (JSON.Stringify など) をシリアル化し、それらを error.message に保存してから読み取ることができます。 in window.onerror それを取り出して逆シリアル化するだけです。もちろん、これは自分で作成した Error オブジェクトに限定されます。

5 番目のパラメータ

ブラウザのメーカーも、window.onerror を使用するときに人々が直面する制限を知っているため、window.onerror に新しいパラメータを追加し始めました。行番号のみで列番号がまったく対称的ではないように見えることを考慮して、IE はまず列番号を追加し、それを 4 番目のパラメーターに入れます。しかし、誰もが完全なスタックを取得できるかどうかのほうを心配しているため、Firefox はスタックを 5 番目のパラメータに入れる方がよいと述べています。しかし、Chrome は、Error オブジェクト全体を 5 番目のパラメータに入れる方がよいと述べています。カスタム プロパティを含め、必要なプロパティを読み取ることができます。その結果、Chrome はより高速に動作し、Chrome 30 に新しい window.onerror シグネチャが実装され、それに応じて標準ドラフトが作成されることになりました。

コードをコピーします コードは次のとおりです:

window.onerror = function(
エラーメッセージ、
scriptURI、
行番号、
列番号、
エラー
) {
if (エラー) {
reportError(エラー);
} else {
reportError({
メッセージ: errorMessage、
スクリプト: scriptURI、
行: 行番号、
列: 列番号
});
}
}

属性の正規化

前に説明したエラー オブジェクトの属性の名前は Chrome の命名方法に基づいています。ただし、ブラウザによってエラー オブジェクトの属性の名前は異なります。たとえば、スクリプト ファイルのアドレスは Chrome ではスクリプトと呼ばれますが、Firefox ではファイル名と呼ばれます。 。したがって、Error オブジェクトを正規化する、つまり、さまざまな属性名を統一された属性名にマップするための特別な関数も必要です。具体的な方法については、こちらの記事をご覧ください。ブラウザの実装は更新されますが、このようなマッピング テーブルを手動で維持することはそれほど難しくありません。

スタック トレース形式に似ています。この属性は、例外情報のスタックをプレーン テキスト形式で保存します。各ブラウザで使用されるテキスト形式が異なるため、プレーン テキストから各フレームの機能を抽出するための正規表現を手動で管理する必要もあります。識別子）、ファイル（スクリプト）、行番号（line）、列番号（column）。

セキュリティ制限

「スクリプト エラー。」というメッセージが表示されるエラーが発生したことがある場合は、これが実際には、異なる作成元のスクリプト ファイルに対するブラウザの制限であることがおわかりいただけるでしょう。このセキュリティ制限の理由は次のとおりです。ユーザーがログインした後にオンライン銀行から返される HTML が匿名ユーザーに表示される HTML と異なると仮定すると、サードパーティの Web サイトはオンライン銀行の URI をスクリプトに組み込むことができます。 src 属性。もちろん、HTML は JS として解析できないため、ブラウザは例外をスローし、サードパーティ Web サイトは例外の場所を解析することでユーザーがログインしているかどうかを判断できます。このため、ブラウザーは、「スクリプト エラー」のような未変更のメッセージが 1 つだけ残り、他のすべての属性が消えるまで、さまざまなソースからのスクリプト ファイルによってスローされたすべての例外をフィルター処理します。

一定規模の Web サイトでは、スクリプト ファイルが異なるソースを持つ CDN に配置されるのが通常です。独自の小規模な Web サイトを構築する場合でも、jQuery や Backbone などの一般的なフレームワークがパブリック CDN 上のバージョンを直接参照して、ユーザーのダウンロードを高速化できるようになりました。したがって、このセキュリティ制限は何らかの問題を引き起こし、Chrome と Firefox から収集した例外情報が役に立たない「スクリプト エラー」になってしまいます。

CORS

この制限を回避するには、スクリプト ファイルとページ自体のオリジンが同じであることを確認してください。しかし、CDN によって高速化されていないサーバーにスクリプト ファイルを置くと、ユーザーのダウンロード速度は遅くなりませんか? 1 つの解決策は、スクリプト ファイルを CDN に配置し続け、XMLHttpRequest を使用して CORS 経由でコンテンツをダウンロードし、それをページに挿入するための <script> タグを作成することです。ページに埋め込まれているコードは、もちろん同じソースからのものです。 </p> <p>これは簡単そうに見えますが、実装するには詳細がたくさんあります。簡単な例を使用すると: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="85881" class="copybut" id="copybut85881" onclick="doCopy('code85881')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code85881"> <br> <スクリプト src="<a href="http://cdn.com/step1.js"></script">http://cdn.com/step1.js"></script</a>><br> <スクリプト><br> (関数 step2() {})();<br> </script>
<スクリプト src="http://cdn.com/step3.js">>