Script Errorの発生の原因と解法

本文は「フロントエンド3分」Script Errorが発生した原因と解法を知っていて、運搬転載は出典を明記してください.そうしないと著作権責任を追及します.
Script Errorはフロントエンド開発者にとってよく知られていないが,具体的なエラースタックやコード行列番号がないため,最も神秘的なエラーの一つになる可能性があると信じている.
以下にScript Errorの発生原理と解決策を紹介する.
1、Script Errorはどのように発生したのか
ドメイン間リソース参照abc.comの下のページがhttp://def.com(CDN)に属するdemo.jsファイルを参照している場合.実行中のdemo.jsのrun()メソッドの内部に異常が報告されると、フロントエンドのエラーキャプチャスクリプトは、script errorの異常のみを検出します.
これは、ブラウザがセキュリティ上の考慮に基づいて、他のドメインJSファイルから投げ出された具体的なエラー情報を故意に隠しているためである.これにより、機密情報が第三者(制御されていない)スクリプトによって意図的にキャプチャされることを効果的に回避することができ、ブラウザは同ドメインのスクリプトで特定のエラー情報のみをキャプチャすることを許可する.具体的には、「ブラウザ同源ポリシーおよびScript Errorエラー」を参照してください.
具体的には、WEBソースコードを参照してください.

bool ScriptExecutionContext::sanitizeScriptError(String& errorMessage, int& lineNumber, String& sourceURL)
    {
        KURL targetURL = completeURL(sourceURL);
        if (securityOrigin()->canRequest(targetURL))
            return false;
        errorMessage = "Script error.";
        sourceURL = String();
        lineNumber = 0;
        return true;
    }

2、解決方法
ブラウザがドメイン間リソース参照を制限する理由を知っておくと、解決策も難しくありません.ページがリソースを要求する時、ブラウザに要求を開始することを許可させ、サーバー(CDN)もリソースを取得することを許可し、ブラウザがリソースを実行するエラー情報を得る.このように2段階に分けて解決する.
ステップ1:scriptラベルにcrossoriginプロパティを追加し、ブラウザにページリクエストリソースを許可します.

//         


 

ステップ2:静的リソース応答ヘッダにドメイン間タグを追加し、サーバにリソースの戻りを許可します.
サーバのHTTP応答ヘッダがAccess-Control-Allow-Origin: *またはAccess-Control-Allow-Origin: http://def.com増加
注意:大部分の主流CDNにはAccess-Control-Allow-Origin属性がデフォルトで追加されています.
3、crossoriginを追加してもscript errorがある
一部のブラウザではcrossoriginプロパティがサポートされていないか、HTTPリクエスト応答ヘッダにドメイン間プロパティを追加できないため、script errorが発生する可能性があります.
この場合、ページエラーメッセージをtry catchで取得し、JSエラーを再投げ出したり、報告したりすることもできます.

  try {
    run(); //   demo.js    run  
  } catch (e) {
    console.log(e);
    throw e; 
  }

4、参考

Cross-Origin Resource Sharing (CORS)

The crossorigin attribute: Requesting CORS access to content

5、もっと多くの文章を共有する

阿里UC百億級PVの先端監視プラットフォーム実践

10分フロントエンドページのパフォーマンスモニタリング

を徹底的に理解
6、岳鷹-WEB先端監視
阿里UC出品の岳鷹パノラマ監視プラットフォームは、モバイルH 5、PCサイト、微信小プログラム、支付宝小プログラムなどの各小プログラムをサポートし、PV、JS異常、ページ性能などの監視指標が完全で、すでに公開されており、無料体験試用を歓迎している.
技術交流、第一時間に製品の動態を把握し、微信のアシスタントに連絡することを歓迎します.
この文章は1文の多発プラットフォームArtiPubによって自動的に発表された.