window.onerrorを使用してJavaScriptエラーをキャプチャおよびレポートします

コアポイント

• window.onerrorは、猛かけられていないJavaScriptエラーがスローされたときにトリガーされるブラウザイベントであり、クライアントエラーを記録してサーバーに報告する簡単な方法を提供します。すべての最新のブラウザはこのイベントをサポートしていますが、実装の詳細はさまざまです。
• に渡されたエラーオブジェクトは、プログラムエラー時に各フレームのソース位置を提供するエラースタックトレースが含まれているため、デバッグに非常に価値があります。ただし、スタック属性は非標準であり、その実装はブラウザーによって異なります。 window.onerror
• は広くサポートされていますが、すべてのブラウザがエラーオブジェクトを渡すわけではありません。つまり、スタックトレースプロパティを取得できません。この制限は、トライ/キャッチブロックにコードをラップして、エラーとそのスタックプロパティをキャッチすることで解決できます。 window.onerror
エラーをキャッチした後、最後のステップはエラーメッセージをサーバーに転送することです。これには、HTTPを介してエラーデータを受信するレポートWebサービスを設定し、ファイルにログに記録するか、データベースに保存する必要があります。サービスが別のドメインにある場合、クロスドメインリソース共有（CORS）をサポートする必要があります。

この記事は、セントリーとのコラボレーションで作成されています。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

は、無作法なJavaScriptエラーがスローされるたびにトリガーされる特別なブラウザイベントです。これは、クライアントエラーを記録してサーバーに報告する最も簡単な方法の1つです。これは、SentryのクライアントJavaScript統合（Raven-JS）が機能する主なメカニズムの1つでもあります。 window.onerror

関数を割り当てて

window.onerror onerrorエラーがスローされると、次のパラメーターが関数に渡されます。

window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}

- 「congaught referenceError：fooは定義されていない」などのエラーに関連付けられたメッセージ

• - 「/dist/app.js」などのエラーに関連付けられたスクリプトまたはドキュメントのURL msg
- 行番号（利用可能な場合）
• url
- 列番号（利用可能な場合）
• lineNo
- このエラーに関連付けられたエラーオブジェクト（利用可能な場合）
• columnNo
最初の4つのパラメーターは、エラーが発生するスクリプト、行、列を示します。最後のパラメーターであるエラーオブジェクトは、おそらく最も価値があります。理由を理解しましょう。
• error
エラーオブジェクトとerror.stack

一見すると、エラーオブジェクトは特別ではありません。メッセージ、ファイル名、およびLinEnumberの3つの正規化されたプロパティが含まれています。これらの冗長な値は、

を介して提供されています。 貴重な部分は、

非標準属性：です。このスタックプロパティは、エラーが発生したときに各プログラムフレームのソース位置を示します。エラースタックトレースは、デバッグの重要な部分になる可能性があります。非標準ですが、このプロパティはすべての最新のブラウザで利用できます。 Error.prototype.stack

以下は、Chrome 46のエラーオブジェクトのスタック属性の例です。

読みにくいですよね？ Stackプロパティは、実際には単なる定型文字列です。

window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}

以下は、フォーマット後のものです。

フォーマット後、エラーのデバッグを支援する上でスタックプロパティがどのように重要であるかを簡単に確認できます。

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

問題は1つだけです。Stack属性は非標準であり、異なるブラウザでの実装も異なります。たとえば、以下はインターネットエクスプローラー11の同じスタックトレースです：

各フレームの形式は異なるだけでなく、詳細が少ないだけです。たとえば、Chromeは、新しいキーワードが使用されていることを認識しており、評価呼び出しをより深く理解しています。これは、IE 11とChromeの比較にすぎません。他のブラウザには、異なる形式と詳細も同様です。

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

幸いなことに、スタック属性を正規化できるツールがあり、ブラウザ全体で一貫しています。たとえば、Raven-JSはTraceKitを使用してエラー文字列を正規化します。 stacktrace.jsやその他のプロジェクトがあります。

ブラウザー互換性<

はしばらくの間ブラウザで存在していました - IE6やFirefox 2などの古いブラウザで見つけることができます。 問題は、各ブラウザが異なる方法で、特にOnerrorリスナーに送信されるパラメーターの数とこれらのパラメーターの構造の観点から、異なる方法で

を実装することです。

window.onerror以下は、ほとんどのブラウザでOnErrorに渡されたパラメーターの表です。

インターネットエクスプローラー8、9、10のonerrorの限られたサポートは驚くことではないかもしれません。しかし、SafariがSafari 10（2016年にリリース）までエラーオブジェクトのサポートを追加しなかったことに驚くかもしれません。さらに、ストックAndroidブラウザ（現在はChrome Mobileに置き換えられている）を使用しているレガシーモバイルデバイスはまだ存在し、エラーオブジェクトは渡されません。

エラーオブジェクトがない場合、スタックトレースプロパティはありません。これは、これらのブラウザがonerrorによってキャプチャされたエラーから貴重なスタック情報を取得できないことを意味します。

try/catchを使用して、window.onerror

にポリフィルを提供します

しかし、回避策があります - アプリケーションのコードをトライ/キャッチブロックでラップして、自分でエラーをキャッチできます。このエラーオブジェクトには、すべての最新のブラウザで夢見るスタック属性が含まれます。

一連のパラメーターを使用してオブジェクト上の関数を呼び出す次のヘルパーメソッドを検討してください。 invoke

以下は再び呼び出されます

window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}

、今回はトライ/キャッチに包まれてスローされたエラーをキャッチします：

invoke もちろん、これをどこでも手動で行うのは非常に面倒です。一般的なラッパーユーティリティ関数を作成することで、それを簡素化できます：

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

JavaScriptはシングルスレッドであるため、どこでもラッパーを使用する必要はありません。新しいスタックごとに開始してください。

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

これは、関数宣言をラップする必要があることを意味します：

アプリケーションの開始時（たとえば、jqueryを使用する場合、

）

イベントハンドラー（例えば、
• または$(document).ready）
で
• タイマーベースのコールバック（例：addEventListenerまたは$.fn.click）
• setTimeout例：requestAnimationFrame

これがたくさんの仕事のように見えても、心配しないでください！ほとんどのバグレポートライブラリには、

や

などの組み込み関数を強化するメカニズムがあるため、毎回ラッパーユーティリティを自分で呼び出す必要はありません。はい、Raven-JSも同じことをします。

<code>Error: foobar
   at bar (Unknown script code:2:5)
   at foo (Unknown script code:6:5)
   at Anonymous function (Unknown script code:11:5)
   at Anonymous function (Unknown script code:10:2)
   at Anonymous function (Unknown script code:1:73)</code>

addEventListenerサーバーにエラーを転送しますsetTimeout

OK、あなたは仕事をしました - あなたはを挿入しました、そして、あなたはまた、できるだけ多くのエラー情報をキャプチャするために、トライ/キャッチブロックに関数をラップしました。

最後のステップが1つだけ残っています。エラーメッセージをサーバーに転送します。この作業を行うには、HTTPを介してエラーデータを受信するために、何らかのレポートWebサービスを設定し、ファイルにログに記録するか、データベースに保存する必要があります。

window.onerrorこのWebサービスがWebアプリケーションと同じドメインにある場合は、xmlhttprequestを使用してください。次の例では、jQueryのajax関数を使用してデータをサーバーに転送します。

異なるソースでエラーを送信する必要がある場合、レポートエンドポイントはクロスドメインリソース共有（CORS）をサポートする必要があることに注意してください。

概要

function invoke(obj, method, args) {
    return obj[method].apply(this, args);
}

invoke(Math, 'max', [1, 2]); // 返回 2

これを行った場合、自分の基本的なエラー報告ライブラリをスクロールしてアプリケーションと統合するために必要なすべてのツールがあります。

どのように

• が機能し、そのサポートされているブラウザwindow.onerror
トライ/キャッチを使用する方法
• 誤ったデータをサーバーに転送しますwindow.onerror
• もちろん、これらすべてを気にしたくない場合は、クライアントレポートのすべての重い持ち上げを行うことができる商用およびオープンソースのツールがたくさんあります。 （SHH：Sentryを使用してJavaScriptをデバッグしてみたいと思うかもしれません。）それだけです！幸せなエラー監視。

Window.onerrorを使用してJavaScriptエラーをキャプチャして報告するために、

FAQ（FAQ）

JavaScriptで機能はどのように機能しますか？

JavaScriptの イベントは、JavaScriptコードの実行時にエラーが発生したときにトリガーされるグローバルイベントハンドラーです。これは、強力なデバッグとエラー処理ツールであり、猛攻撃の例外やランタイムエラーをキャッチして報告できるためです。エラーが発生すると、エラーメッセージ、エラー番号、列番号、エラーオブジェクトの5つのパラメーター、エラーメッセージ、URLの5つのパラメーターで呼び出されます。

JavaScriptの

とTry-Catchの違いは何ですか？ window.onerror

およびTry-CatchはどちらもJavaScriptでのエラー処理に使用されますが、動作が異なります。 Try-Catchステートメントを使用すると、トライブロックにエラーをスローする可能性のあるコードをラップして、キャッチブロックのエラーに応答する可能性のあるコードをラップすることにより、エラーを直接処理できます。一方、window.onerrorは、猛攻撃のランタイムエラーが発生したときにトリガーされるグローバルイベントハンドラーです。これは、トライキャッチブロックからスリップするエラーをキャッチする、より一般的なエラー処理メカニズムです。 window.onerror

を使用してJavaScriptエラーをキャッチするにはどうすればよいですか？ window.onerror

を使用するには、エラーが発生したときに呼び出される関数を定義する必要があります。この関数は、エラーメッセージ、エラーが発生した場合のURL、行番号、列番号、エラーオブジェクトの5つのパラメーターを使用する必要があります。この関数内では、必要に応じてエラーを処理できます。たとえば、エラーをコンソールにログに記録したり、レポートをサーバーに送信したり、ユーザーにメッセージを表示したりできます。 window.onerror window.onerror

あらゆる種類のJavaScriptエラーをキャッチできますか？

window.onerror

は強力なエラー処理ツールですが、いくつかの制限があります。ほとんどの無攻撃のランタイムエラーをキャッチできますが、トライキャッチブロックにスローされて捕獲された例外をキャッチすることはできません。さらに、ネットワークエラーやCORSエラーなどの特定のタイプのエラーは、

イベントをトリガーできない場合があります。 window.onerror

window.onerrorでエラーオブジェクトを使用する方法は？

エラーオブジェクトは、window.onerror関数に渡された5番目のパラメーターです。エラーメッセージ、エラー名、スタックトレースなど、エラーに関する情報が含まれています。このオブジェクトを使用して、エラーに関するより詳細な情報を取得できます。これは、デバッグやエラーの報告に非常に役立ちます。

JavaScriptのスタックトレースは何ですか？

Stack Traceは、エラーが発生したときにプログラム実行パスに関する情報を提供するレポートです。エラーを引き起こしている関数呼び出しのシーケンスが表示されます。これは、デバッグに非常に役立ちます。 JavaScriptでは、エラーオブジェクトからスタックトレースを取得できます。

JavaScriptでスタックトレースを取得する方法は？

JavaScriptでは、エラーオブジェクトからスタックトレースを取得できます。エラーが発生すると、エラーオブジェクトが作成され、window.onerror関数に渡されます。このオブジェクトには、スタックトレースを含むスタックと呼ばれるプロパティがあります。このプロパティにアクセスして、スタックトレースを取得できます。

window.onerrorを使用してエラーをサーバーに報告できますか？

はい、window.onerrorを使用してサーバーにエラーを報告できます。 window.onerror関数の内部では、エラーメッセージを使用してリクエストをサーバーに送信できます。これは、ユーザーからリアルタイムでエラーデータを収集および分析できるため、監視とデバッグに非常に役立ちます。

window.onerrorを使用してCORSエラーを処理するにはどうすればよいですか？

CORSエラーまたはクロスドメインリソース共有エラーは、Webアプリケーションが異なるドメインからリソースにアクセスしようとすると発生します。これらのエラーはセキュリティに関連しており、セキュリティ上の理由により、window.onerrorイベントハンドラーの詳細は提供されていません。ただし、CORSエラーを引き起こす可能性のある特定のネットワークリクエストにエラーハンドラーを追加することにより、これらのエラーを処理できます。

window.onerrorを使用するためのベストプラクティスは何ですか？

window.onerrorを使用する場合、ユーザーエクスペリエンスを中断しない方法でエラーを処理してください。ユーザーに技術的なエラーメッセージが表示されないようにする必要があります。代わりに、友好的なエラーメッセージの表示または静かにエラーを記録することを検討してください。また、エラー処理コードのパフォーマンスへの影響に注意してください。たとえば、サーバーにエラーレポートを送信している場合は、メインスレッドをブロックしないように、これを非同期的に必ず実行してください。

以上がwindow.onerrorを使用してJavaScriptエラーをキャプチャおよびレポートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。