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> タグを作成することです。ページに埋め込まれているコードは、もちろん同じソースからのものです。 </script>

これは簡単そうに見えますが、実装するには詳細がたくさんあります。簡単な例を使用すると:

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

">http://cdn.com/step1.js">>

(関数 step2() {})();

">http://cdn.com/step3.js">>

step1、step2、step3 の間に依存関係がある場合、厳密にこの順序で実行する必要があることは誰もが知っています。そうしないとエラーが発生する可能性があります。ブラウザは step1 と step3 のファイルを並行してリクエストできますが、実行中の順序は保証されます。 XMLHttpRequest を通じて step1 と step3 のファイルの内容を自分で取得する場合は、それらの順序が正しいことを確認する必要があります。さらに、ステップ 2 を忘れないでください。ステップ 2 は、ステップ 1 が非ブロック方式でダウンロードされるときに実行できるため、ステップ 2 に手動で介入して、ステップ 1 が完了するまで待機させてから実行する必要があります。

Web サイト上のさまざまなページに <script> タグを生成するためのツール セットがすでにある場合は、このツール セットを調整して <script> タグを変更する必要があります。 </script>

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

スケジュールリモートスクリプト('http://cdn.com/step1.js');


scheduleInlineScript(関数コード() {
(関数 step2() {})();
});


スケジュールリモートスクリプト('http://cdn.com/step3.js');




2 つの関数、scheduleRemoteScript と、scheduleInlineScript を実装し、外部スクリプト ファイルを参照する最初の <script> タグが定義されるようにする必要があります。その後、残りの <script> タグが上記の形式に書き換えられます。元々すぐに実行された step2 関数が、より大きなコード関数に配置されていることに注意してください。コード関数は実行されません。これは単なるコンテナであるため、ステップ 2 の元のコードはエスケープせずに保持できますが、すぐには実行されません。 <p>次に、アドレスに基づいてscheduleRemoteScriptによってダウンロードされたファイルコンテンツと、scheduleInlineScriptによって直接取得されたコードが正しい順序で次々に実行できることを保証する完全なメカニズムを実装する必要があります。詳細なコードはここでは説明しませんので、興味があればご自身で実装してください。 <p><strong>行番号の反転チェック <p>CORS を通じてコン​​テンツを取得し、ページにコードを挿入すると、セキュリティ制限を突破できますが、行番号の競合という新たな問題が発生します。もともと、error.script は一意のスクリプト ファイルを見つけるために使用でき、error.line は一意の行番号を見つけるために使用できました。さて、これらはすべてページに埋め込まれたコードであるため、error.script では複数の <script> タグを区別することはできません。そのため、各 <script> タグ内の行番号は 1 から始まります。エラーが発生したソース コードの場所を特定するために使用されます。 <p>行番号の競合を避けるために、各 <script> タグ内の実際のコードで使用される行番号の範囲が互いに重ならないように、一部の行番号を無駄にすることができます。たとえば、各 <script> タグの実際のコードが 1000 行以下であると仮定すると、最初の <script> タグのコードを 1 ～ 1000 行とし、2 番目のコードを<script> タグは 1001 ～ 2000 行目 (その前に 1000 行の空白行を挿入) を占め、3 番目の <script> タグ内のコードは 2001 ～ 3000 行目 (その前に 2000 行の空白行を挿入) を占めます。次に、data-* 属性を使用してこの情報を記録し、簡単に取得できるようにします。 <p><div class="codetitle"><span><a style="CURSOR: pointer" data="94831" class="copybut" id="copybut94831" onclick="doCopy('code94831')"><U>コードをコピーします コードは次のとおりです:</script>

data-src="http://cdn.com/step1.js"
データライン開始 = "1"
>
// ステップ 1 のコード


data-src="http://cdn.com/step3.js"
data-line-start="2001"
>
// 'n' * 2000
// ステップ 3 のコード

この処理の後、エラーの error.line が 3005 である場合、実際の error.script は 'http://cdn.com/step3.js' であり、実際の error.line は 5 である必要があることを意味します。この行番号の逆チェックは、前述した reportError 関数で完了できます。

もちろん、各スクリプト ファイルの行数が 1000 行のみであることは保証できず、一部のスクリプト ファイルは 1000 行より大幅に少ない場合があるため、各 <script> タグに 1000 行という固定範囲を割り当てる必要はありません。 。各 <script> タグで使用される間隔が重複しない限り、実際のスクリプト行数に基づいて間隔を割り当てることができます。 </script>

クロスオリジン属性

さまざまなソースからのコンテンツに対してブラウザーによって課されるセキュリティ制限は、もちろん <script> タグに限定されません。 XMLHttpRequest は CORS を通じてこの制限を突破できるのに、なぜタグを通じてリソースを直接参照できないのでしょうか?もちろんこれは可能です。 </script>

さまざまなソースからのスクリプト ファイルを参照する <script> タグの制限は、さまざまなソースからの画像ファイルを参照する <img alt="JavaScript例外処理の詳細解説_JavaScriptスキル" > タグにも適用されます。 <img alt="JavaScript例外処理の詳細解説_JavaScriptスキル" > タグが別のソースからのものである場合、それが <canvas> 描画で使用されると、<canvas> は書き込み専用になり、Web サイトが JavaScript を通じて不正な画像データを盗むことができなくなります。その後、<img alt="JavaScript例外処理の詳細解説_JavaScriptスキル" > タグは、crossorigin 属性を導入することでこの問題を解決しました。 crossorigin="anonymous" を使用した場合は匿名 CORS と同等であり、「crossorigin="use-credentials"」を使用した場合は認証付きの CORS と同等です。 </script>

タグでこれができるのに、なぜ <script> タグで同じことができないのでしょうか?そこでブラウザの製造元は、上記のセキュリティ制限を解決するために、同じcrossorigin属性を<script>タグに追加しました。 Chrome と Firefox は現在、この属性を問題なくサポートしています。その結果、サーバーが匿名 CORS のみをサポートしている場合、Safari は認証が失敗したものとして扱います。 CDN サーバーはパフォーマンス上の理由から静的コンテンツのみを返すように設計されているため、リクエストに基づいて CORS 認証に必要な HTTP ヘッダーを動的に返すことはできません。Safari はこの機能を使用して上記の問題を解決できません。 </script>

概要

JavaScript の例外処理は他の言語と何ら変わらない非常に単純なように見えますが、実際にはすべての例外をキャッチして属性を分析するのはそれほど簡単ではありません。 JavaScript 例外をキャプチャする Google Analytics のようなサービスを提供するサードパーティ サービスがいくつかありますが、詳細と原則を理解したい場合は、やはり自分で行う必要があります。