JavaScriptコード異常監視実現過程の詳細

この文章は主にJavaScriptコードの異常監視の実現過程を紹介しています。ここでは例示コードを通じて紹介された非常に詳細で、皆さんの学習や仕事に対して一定の参考学習価値があります。必要な友達は参考にしてください。
JavaScript異常には、文法エラーと実行時エラーがあります。2つのエラーの捕獲と処理の方法が異なり、具体的なスキームの選択に影響を与える。一般的に、JSの異常を扱う方式は2つあります。try...catch捕獲とwindow.onerror捕獲です。二つの案についてそれぞれの優劣を分析します。
文法の間違いは開発・構築の段階でテストツールを使って避けるべきですが、どうしても前足でラインに配置されてしまうことがあります。
try…catch捕獲
このような方案は開発者にコードを作成する時、異常発生が予想されるコードセグメントにtry...catchを使って、異常が発生した時に異常情報をインターフェースに送るように要求します。

try{
//          
}catch(e){
//          
}

try...catchの利点は、各コードブロックに細分化され、統計のためにエラー情報をカスタマイズすることができることである。
具体的には上記の2つのjs異常、try...catchは文法エラーを捕まえられません。文法エラーが発生した場合、ブラウザは依然としてエラーUcaugt SyntaxErrを投げますが、キャプチャされず、catchのコードブロック内に入りません。
また、tryコードブロックにコールバック関数があると捕獲されません。

try{
var btn = $('#btn');
  btn.on('click',function(){
    //throw error
  });
}catch(e){}

上記のコードの中でbtnの傍受関数から投げられた異常は外層のcatchに捕獲できません。追加のレイヤーをセットする必要があります。

try{
var btn = $('#btn');
  btn.on('click',function(){
    try{
      //throw error
    }catch(e){}
  });
}catch(e){}

以上のように、try...catch案の配置は非常に複雑であり、もし人工的な配置が大量の作業量を要求する以外に、開発者の能力と経験と関係があります。コンパイルツールの配置（例えばfis）に依存すると、コードブロックごとにtry...catchがセットされています。これは非常に醜く、予測できない問題を引き起こしやすいです。
window.onerror捕獲
この方式は開発者がコードに大量のtry…catchを書く必要がなく、windowにオンerrorモニターを追加することによって、jsに異常が発生した時にエラー情報を捕獲できます。文法異常と運行異常はいずれも捕獲されます。しかし、window.onerrorというモニターはすべてのjsファイルの前に置かなければなりません。
window.onerrorイベントの詳細はここですを参照してください。

/**
 * @param {String} errorMessage      
 * @param {String} scriptURL        URL
 * @param {Long}  lineNumber          
 * @param {Long}  columnNumber         
 * @param {Object} errorObj        Object
 */
window.onerror = function(errorMessage, scriptURL, lineNumber,columnNumber,errorObj) { 
  // code..
}

Oneerrorの実装方法は各ブラウザによって若干の違いがありますが、最初の3つのパラメータは同じです。いくつかの低バージョンのブラウザには後の2つのパラメータがありません。
最後のパラメータerrorObjは各ブラウザで実現されるレベルが一致しないので、ここを参照してください。
下図は、Oneerrorに捕獲された異常な具体的な情報です。

以上のように、window.onerror方案の利点は、開発者の仕事量を減らし、配置が便利であり、文法的なミスと運行ミスを捕まえられる。欠点は、エラー情報はカスタマイズできません。また、errorObjの各ブラウザの実装には少し違いがあり、統計が必要な情報に限界があります。
ドメインをまたぐJSファイルの異常な捕獲
ウェブの性能を向上させるために、現在はほとんどのウェブ製品アーキテクチャにCDNという一環があり、リソースを異なるドメイン名に配置し、ブラウザの同時要求メカニズムを十分に利用している。では、ドメインをまたぐJSファイルで異常が発生した場合、オンerrorモニターはどのような情報をキャッチしますか？下の図を見てください

ちょっと価値のある情報しかありません。他には何の情報もありません。なぜですか？
ブラウザには同源資源の制限があり、通常の状態ではドメインをまたぐ要求ができないことを知っています。また、script、img、frameタグのsrc属性にはこのような制限がないということは、多くのクロスドメインスキームの基礎でもある。しかし、scriptタグが異域のjsファイルに要求されても、このファイルの情報は現在のドメインに露出されてはいけません。これはブラウザの安全対策によるものです。
外国資源の異常情報を得る方法がありますか？
実は簡単です。基本的にすべてのweb製品はJs/css/imageなどの静的資源に対してサービス先にAccess-Coontrol-Alllow-Origin:*の応答ヘッドを設置しました。この環境では、私たちがドメインをまたぐリソースを要求するscriptタグにcrossorigin属性を追加すればいいです。

<script src="http://static.toutiao.com/test.js" crossorigin></script>

これにより、異域のtest.jsファイルに異常が発生した場合、現在のドメインのオンerrorにより、詳細な異常情報がキャプチャされます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。