JavaScript 例外を処理するためのアイデア

おそらく、ネットワーク、ブラウザの問題、キャッシュなどにより、オンラインでのjsの実行が開発環境と異なり、例外がスローされる可能性があります。 js 例外は基本的にフロントエンド開発エンジニアにとって日常的なものです。記録方法と使い方ですが、そこに注目している人はほとんどいません。私は最近、基本的に収集と使用という 2 つのステップを含むアイデアについて考えています。

1. コレクション

各ブラウザにインターフェイスがあるので、エラーを収集するのに非常に便利です: window.onerror:

window.onerror = function(errorMessage, scriptURL, lineNumber) {
alert (errorMessage, scriptURL, lineNumber)
} はスタック トレースも提供します。たとえば、e.stack は try/catch でも提供されます (ブラウザごとに異なります。eriwen/javascript-stacktrace 互換性ライブラリを使用できます)。次のコード スニペットを試してください:

try {
fn()
} catch(e) {
alert(e.stack)
} そこで、これらのエラーを収集するには、 window.addEventListener('error' , を使用する方が便利です) ということです。 callback、isBubble) callback の最初のパラメータはイベントではなく、Error オブジェクトです。この場合、便宜上、window.onerror を使用するのが良い選択ですが、ドット演算子を通じて監視されるイベントはオーバーロードされる可能性があり、このリスニング スクリプトは理論的にはすべての js の先頭に配置されるため、次のようなリスクを考慮する必要があります。 。

2. 使う

以前Alipayを使っていた時は、オンラインのjsエラーレポートがメールになってフロントエンド開発チームに送られ、みんなでクレームを言って自分たちで解決していました。実際、これは良い選択であり、すぐに対応して修復するという最も基本的な問題も解決します。しかし、同じ間違いを避けるにはどうすればよいかという問題もあります。私の最初のアイデアは次のとおりです:

統一された解決を容易にするために、同じページ上のエラーを記録する単位として URL を使用します
記録されるエラーには、ページ URL、ユーザー エージェント、スクリプト URL、エラー メッセージ、行番号が含まれます
各エラーが発生した後、解決済みで、ソリューションを 1 か所に記述でき、それを見た人がコメントしたりポイントを追加したりでき、最終的にはナレッジ ベースとしてアーカイブされ、これらのナレッジ ベースのコンテンツを使用するための便利な API があります
開発中も同じwindow.onerror ページが呼び出されると、プラグインはエラー メッセージを分析してタイプを識別し、さらに URL を判断して、以前の開発者が犯した間違いを開発者に思い出させるために使用されます
開発者は、ページ上の特定のタグをサブスクライブできます。ナレッジベースを利用してメールを自動的に受信します (もちろん、ファイルのコメントやマッピングなどに基づいてより適切なマッチングを行うこともできます)
なぜこれを行うのですか?主に以下の問題を解決するため:

開発者、特に新人が学習できるナレッジベースを形成する
ツールにより効率の向上が保証され、繰り返しのエラーや繰り返しの解決策が回避される
サブスクリプションにより、より的を絞った通知が保証される
3. 注意すべき点

1．収集する場合は、POST を使用して送信します

エラー メッセージが長くなる場合があり、ブラウザの URL 長に制限がある場合は、保存されているエラーがそれほど多くない場合は、GET を使用して送信することを検討できますが、一般的には、POST ですべてのデータを送信できます。背景。

2.データを送信するタイミング

onerrorがトリガーされたときに送信することをお勧めします。最初にこのアイデアを思いついたとき、onbeforeonload 中に送信しようとしましたが、POST リクエストが開かれる前にブラウザによって中断されました。

3. データベースに保存するインデックスはどれが良いですか?

一般的に言えば、ほとんどのウェブサイトには URL の方が適しているかもしれません。ただし、Baixing.com や Taobao などの UGC が多い Web サイトでは、URL を記録するために変更が必要になる場合があります。結局のところ、異なる投稿や異なる URL はすべて同じコードのセットを持っています。

Errorを指標として使うのはどうでしょうか？実際、どのような種類であっても、自分のニーズに応じて選択してください。

4. すべてのエラーを記録するかどうか

これもニーズに応じてより適切です。 Baidu.com にはあらゆる種類の厄介なエラー レポートがあり、Baidu/Google への広告外部リンクから送信されている可能性があります。

4. 結論

現時点では、収集ツール (sofish/stacktrace.js) と保存方法 (URL をインデックスとする) が最初に実装されています。継続するかどうかは、時間とさらなる検討が必要です。より多くのアイデアを引き寄せるために。

5. 付録
$url = new Url();
$page = $url->post('page');
if(!$page) return;
class ErrorTrace extends MongoData {
// MongoData では利用できません。違いは
public function findOne($obj) {
return $this->connection->findOne($obj);
}
};
$store = new ErrorTrace();
$fields = array(
'url' => $url->post('url'),
'message' => $url->post('message'),
'line' => ; $url ->post('line'),
'ua' => $url->post('ua'),
);
$index = array('page' => $page) ;
$ hash = md5(json_encode($fields));
//エラーを繰り返し記録しないでください。すべてのエラーは同じ URL の下に記録されます
if($field = $store->findOne($index)) {
if(isset ($field[$hash])) return;
return $store->setAttr(new Query('page', $page), $hash, $fields);
}
$store-> page = $page ;
$store->$hash = $fields;
$store->save();
?> この要点は GitHub から提供されました。