スクリプトエラーの原因と解決策 - Application Real-Time Monitoring Service

スクリプトエラーは一般的なエラーです。ただし、このタイプのエラーでは、完全なエラーメッセージやエラースタックは利用できません。したがって、これらのエラーのトラブルシューティングは困難です。このトピックでは、原因を分析し、解決策を提供し、Application Real-Time Monitoring Service (ARMS) でこのタイプのエラーを無視する方法を示します。

スクリプトエラーの原因

スクリプトエラーはクロスオリジンエラーとも呼ばれます。Webサイトがサードパーティのドメイン名でホストされているスクリプトをリクエストして実行すると、スクリプトエラーが発生する可能性があります。最も一般的なシナリオは、コンテンツ配信ネットワーク (CDN) を使用して JavaScript (JS) リソースをホストすることです。

理解を深めるために、次の HTML ページが http://test.com ドメイン名にデプロイされていると仮定します。

<!doctype html>
<html>
<head>
  <title>Test page in http://test.com</title>
</head>
<body>
  <script src="http://another-domain.com/app.js"></script>
  <script>
  window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  }
  foo(); // app.js ファイルで定義されている foo メソッドを呼び出します。
  </script>
</body>
</html>

foo メソッドが未定義の bar メソッドを呼び出すと仮定します。

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar is not a function
}

ページが読み込まれた後、次のエラーがキャプチャされます。

"Script error.", "", 0, 0, undefined

実際、これは JS エラーではありません。セキュリティ上の理由から、ブラウザは他のオリジンの JS ファイルによってスローされた特定のエラーを意図的に隠します。このようにして、機密情報が制御されていないサードパーティのスクリプトによって誤ってキャプチャされるのを効果的に防ぐことができます。したがって、同じオリジンのスクリプトのみが特定のエラーメッセージをキャプチャできますが、他のオリジンのスクリプトはエラーを検出できますが、特定のエラーメッセージをキャプチャすることはできません。詳細については、を参照してください。

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;
    }

以下のセクションでは、スクリプトエラーを解決する方法について説明します。

解決策 1: クロスオリジンリソース共有を有効にする

オリジンを越えた JS エラーをキャプチャするには、次の手順を実行します。

crossorigin="anonymous" 属性を追加します。
```
<script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>
```
この手順では、ブラウザにサードパーティのスクリプトを匿名で取得するように指示します。これは、ブラウザがスクリプトをリクエストするときに、Cookie や HTTP 証明書などの潜在的なユーザーID情報をサーバーに送信しないことを意味します。
クロスオリジン HTTP レスポンスヘッダーを追加します。たとえば、次のコマンドを実行できます。
```
Access-Control-Allow-Origin: * 
```
または、次のコマンドを実行することもできます。
```
Access-Control-Allow-Origin: http://test.com 
```
説明
デフォルトでは、ほとんどの主流の CDN には Access-Control-Allow-Origin 属性があります。次の例は Alibaba Cloud CDN のものです。
```
$ curl --head https://retcode.alicdn.com/retcode/bl.js | grep -i "access-control-allow-origin"
=> access-control-allow-origin: *
```

上記の手順を実行した後、window.onerror ハンドラーを使用してクロスオリジンエラーをキャプチャできます。前の例では、ページが再度読み込まれた後、次のエラーがキャプチャされます。

=> "ReferenceError: bar is not defined", "http://another-domain.com/app.js", 2, 1, [Object Error]

解決策 2: `try catch` コマンドを追加する (オプション)

クロスオリジン属性を HTTP リクエストまたはレスポンスヘッダーに追加するのが難しい場合は、try catch コマンドを追加します。

前の HTML ページに try catch コマンドを追加します。次のコードは例を示しています。

<!doctype html>
<html>
<head>
  <title>Test page in http://test.com</title>
</head>
<body>
  <script src="http://another-domain.com/app.js"></script>
  <script>
  window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  }
  try {
    foo(); // app.js ファイルで定義されている foo メソッドを呼び出します。
  } catch (e) {
    console.log(e);
    throw e;
  }
  </script>
</body>
</html>

ページを再度読み込みます。次の情報が返されます。

=> ReferenceError: bar is not defined
     at foo (http://another-domain.com/app.js:2:3)
     at http://test.com/:15:3
=> "Script error.", "", 0, 0, undefined

try catch コマンドはコンソールログに完全なエラー情報を生成しますが、window.onerror ハンドラーはスクリプトエラーのみを生成します。try catch コマンドでキャプチャされた例外を手動で報告できます。詳細については、SDK メソッドを参照してください。

__bl.error(error, pos);

説明

try catch コマンドを使用して一部の例外をキャプチャできますが、解決策 1 を使用することをお勧めします。

ARMS でスクリプトエラーを無視するにはどうすればよいですか?

スクリプトエラーは通常、サードパーティのドメイン名にあるスクリプトから発生します。スクリプトエラーがアプリケーションの実行に影響しない場合は、ARMS フロントエンド監視 SDK の ignore パラメーターを設定することで無視できます。

ignore パラメーターを使用すると、指定された JS エラーのレポートを無視できます。このパラメーターの値は、ignoreUrls、ignoreApis、ignoreErrors の 3 つのプロパティを含むオブジェクトです。次のコードは、このパラメーターのデフォルト値を示しています。

ignore: {
    ignoreUrls: [],
    ignoreApis: [],
    ignoreErrors: []
},

ignoreErrors プロパティを使用してスクリプトエラーを無視します。ignoreErrors プロパティは、指定されたルールに準拠する JS エラーを無視するために使用されます。このプロパティの値は、文字列 (String タイプ)、正規表現 (RegExp タイプ)、メソッド (Function タイプ)、または上記の 3 つのタイプを含む配列です。次のコードは、スクリプトエラーを無視する方法の例を示しています。

__bl.setConfig({
    ignore: {
        ignoreErrors: /^Script error\.?$/
    }
});