「スクリプトエラー」とはどういう意味ですか？-jsチュートリアル-php.cn

What the Heck Does

コアポイント

ブラウザは、javaScriptファイルが別のソースから来たときにonerrorコールバック関数に「スクリプトエラー」メッセージを送信します。これは、潜在的に機密情報の偶発的な漏れを防ぐためのセキュリティ上の理由によるものです。
さまざまなソースからのファイルによって提供されるJavaScriptエラーに関する洞察を得るには、2つの手順を実行する必要があります。これにより、任意のソースがファイルを取得でき、スクリプトによってトリガーされたエラーはcrossorigin="anonymous"に報告されます。 window.onerror
を使用できます。サードパーティのコードをtry/catchブロックに包むことにより、クロスドメインスクリプトによってスローされたエラーに関する洞察を得ることができます。ただし、可能であれば、CORS特性とヘッダーを設定することをお勧めします。 try/catch

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

以前にjavaScriptの

イベントを使用したことがある場合、次の状況に遭遇した可能性があります。 onerror

スクリプトエラー。

異なるソース（異なるドメイン名、ポート、またはプロトコル）からのJavaScriptファイルからエラーが発信されると、ブラウザは

コールバック関数に「スクリプトエラー」を送信します。これは、エラーが発生したとしても、エラーが何であるかも、エラーが発信するコードもわからないため、痛みを伴います。そして、

の全体的な目的は、アプリケーションの猛攻撃エラーに関する洞察を得ることです。 onerror window.onerror

理由：クロスドメインスクリプト

何が起こっているのかをよりよく理解するには、次の例HTMLドキュメントを考えてみてください。

これは

の内容です。呼び出しが常にhttp://example.com/testと呼ばれる単一の関数を宣言します。

<!DOCTYPE html>
<html>
<head>
  <title>example.com/test</title>
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

ログイン後にコピー

このドキュメントがロードされ、JavaScriptがブラウザで実行されると、以下はコンソールに出力されます（http://another-domain.com/app.jsコールバック関数を介して録音）：foo ReferenceError

"スクリプトエラー

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}

ログイン後にコピー

これはJavaScriptエラーではありません-Browserは、セキュリティ上の理由からさまざまなソースからスクリプトファイルを意図的に隠します。これは、スクリプトが潜在的に機密情報を誤って潜在的に漏らしないようにするため、制御できないコールバック関数です。したがって、ブラウザでは、window.onerrorのみが同じドメインから発生するエラーについての洞察を得ることができます。私たちが知っているのは、他のことを知るのではなく、エラーが発生したことです！

私は悪い人ではありません！

ブラウザは善意にありますが、さまざまなソースからスクリプトによってスローされたエラーを深く掘り下げたいと考えています。

アプリケーションJavaScriptファイルは、さまざまなホスト名（たとえば、static.sentry.io/app.js）からのものです。
CDNJやGoogleホスティングライブラリなどのコミュニティCDNから提供されるライブラリを使用しています。
外部サーバーからのみ利用可能な商用サードパーティのJavaScriptライブラリを使用しています。

しかし、心配しないでください！これらのファイルによって提供されるJavaScriptエラーをより深く理解するには、いくつかの簡単な調整のみが必要です。

ソリューション：CORSプロパティとヘッダー

さまざまなソースからスクリプトによってスローされたJavaScript例外を理解するには、2つのことをする必要があります。

1 `crossorigin="anonymous"`

これは、ターゲットファイルを「匿名で」取得する必要があることをブラウザに伝えます。これは、このファイルを要求するとき、ブラウザは、CookieやHTTP資格情報など、潜在的なユーザーを特定する情報をサーバーに送信しないことを意味します。

<!DOCTYPE html>
<html>
<head>
  <title>example.com/test</title>
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

ログイン後にコピー

CORSは、クロスドメインリソース共有の略語であり、ファイルのダウンロード方法とドメイン全体で提供される方法を指定するAPI（主にHTTPヘッダー）のセットです。

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}

ログイン後にコピー

を設定することにより、サーバーはブラウザに、任意のソースがこのファイルを取得できることを示します。または、制御する既知のソースに制限することもできます：

<code>Access-Control-Allow-Origin: *</code>これらの2つの手順が完了すると、このスクリプトによってトリガーされたエラーは、通常の同じドメインスクリプトと同様に

に報告されます。したがって、

<🎜>

ログイン後にコピー

の例は「スクリプトエラー」ではなく、代わりに次のようになります。

window.onerrorそれだけです！「スクリプトエラー」は、もはやあなたとあなたのチームを悩ませません。 onerror

<code>Access-Control-Allow-Origin: *</code>

ログイン後にコピー

代替：試してください/catch

Webアプリケーションが使用しているスクリプトのHTTPヘッダーを調整できない場合があります。この場合、代替手段があります。元の例をもう一度考えてみてください。

将来の世代のために、try/catch次のように再び：

例を実行するHTMLは、次の2つのエントリをコンソールに出力します。 try/catch

最初のコンソールステートメント -

$ curl --head https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js | \
    grep -i "access-control-allow-origin"

Access-Control-Allow-Origin: *

ログイン後にコピー

から - ファイル名と行番号を含むタイプ、メッセージ、およびスタックトレースを含むエラーオブジェクトを取得できました。

からの2番目のコンソールステートメントは、「スクリプトエラー」のみを再度出力できます。 some-domain.com/app.js

これは、すべてのコードをキャプチャしようとする必要があることを意味しますか？おそらくそうではありません。 HTMLを簡単に変更してCDNでCORSヘッダーを指定できる場合は、これを行い、

<code>"ReferenceError: bar 未定义", "http://another-domain.com/app.js", 2, 1, [Object Error]</code>

ログイン後にコピー

に固執することをお勧めします。

しかし、これらのリソースを制御しない場合、

window.onerror = function (message, url, line, column, error) {
  console.log(message, url, line, column, error);
}

try {
  foo(); // 调用 app.js 中声明的函数
} catch (e) {
  console.log(e);
  throw e; // 故意重新抛出（由 window.onerror 捕获）
}

ログイン後にコピー

を使用してサードパーティのコードをラッピングすることは、クロスドメインスクリプトによってスローされたエラーをより深く理解するための信頼できる（退屈ですが）方法です。

注：デフォルトでは、SentryのJavaScript SDK Raven.jsは、組み込みのメソッドを慎重に検出して、コードをtry/catchブロックで自動的にラップしようとします。これは、どこから来たのかに関係なく、すべてのスクリプトのエラーメッセージとスタックトレースをキャプチャしようとするために行われます。可能であれば、CORS特性とヘッダーを設定することをお勧めします。

もちろん、あなたのためにすべての重い持ち上げを行うことができる商業的およびオープンソースのツールがたくさんあります。（SHH：SentryでJavaScriptをデバッグしてみてください。）それだけです！幸せなエラー監視。

スクリプトエラーfaq

（ここでは、FAQパーツは省略されています。記事が長すぎて記事の主題との相関が弱いため、必要に応じて自分でFAQを追加または変更できます）

以上が「スクリプトエラー」とはどういう意味ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。