Docs » Splunk Observability Cloud でサポートされているインテグレーション » モバイルおよび Web アプリケーションを Splunk RUM でインストルメンテーションする » Splunk RUM でブラウザベースの Web アプリケーションをインストルメンテーションする » ブラウザRUMエージェントが収集したエラー

ブラウザRUMエージェントが収集したエラー 🔗

ブラウザ RUMエージェントは、継続時間が0のスパンとしてエラーを収集します。エラースパンは、エラーが発生した時間に基づいたタイムスタンプを運びます。

デフォルトでは、インストルメンテーションは以下のソースからエラーを収集します：

  • window オブジェクトの "error" イベントリスナーからの捕捉されなかったエラーと処理されなかったエラー。

  • window オブジェクトの unhandledrejection イベントリスナーからの未処理のプロミス拒否。

  • document オブジェクトの "error" イベントリスナーからのリソースのロードに失敗したことによるエラーイベント。

  • console.error コンソールに記録されるエラー

  • SplunkRum.error ログには記録されないが、エージェントによって収集されるエラー

シングルページアプリケーション（SPA）フレームワークからJavaScriptエラーを収集するには、シングルページアプリケーションのフレームワークでエラーを収集する を参照してください。

捕捉されなかったエラーと処理されなかったエラー 🔗

ブラウザ RUMエージェントは、捕捉されなかったエラーや処理されなかったエラーを、onerror という名前のスパンとして登録します。以下は、捕捉されなかったり、処理されなかったりするエラーの典型的な例です：

  • try {} と catch {} ブロックで捕捉されないエラー

  • エラーは catch ブロックで再度スローされますが、再度捕捉されることはありません。

  • ファイルの構文エラー

以下の例は、ブラウザ RUMエージェントがどのように捕捉されなかったエラーや処理されなかったエラーを収集するかを示しています：

構文エラーの例 🔗

次のような構文エラーを考えてみます：

var abc=;

ブラウザ RUMエージェントは、以下の属性を使用してエラーを収集します：

  • component: "error"

  • "error": true

  • error.message: Unexpected token ';'

  • error.object: SyntaxError

  • error.stack: SyntaxError: Unexpected token ';'

注釈

error.message および error.stack メッセージはブラウザ固有です。

Null リファレンスの例 🔗

次の null 参照エラーを考えてみます：

var test = null;
test.prop1 = true;

ブラウザ RUMエージェントは、以下の属性を使用してエラーを収集します：

  • component: "error"

  • "error": true

  • error.message: Cannot set property 'prop1' of null

  • error.object: TypeError

  • error.stack: TypeError: Cannot set property 'prop1' of null at...

注釈

error.message および error.stack メッセージはブラウザ固有です。

捕捉されなかったプロミスの拒否 🔗

ブラウザ RUMエージェントは、各捕捉されなかったプロミス拒否を、名前 unhandledrejection のスパンとして登録します。捕捉されないプロミス拒否は、以下の状況で発生する可能性があります：

  • 最後の .catch メソッドがないプロミスチェーンにおいて

  • As an error in promise chain, including rethrowing in a catch block, without any subsequent catch block

  • async 関数の throw ブロックとして

以下の例は、ブラウザ RUMエージェントが捕捉されなかったプロミス拒否を収集する方法を示しています：

標準エラーの例 🔗

次のコードを考えてみます：

new Promise((resolve, reject) => {
   reject(new Error('broken'))
})

ブラウザ RUMエージェントは、以下の属性を使用してエラーを収集します：

  • component: "error"

  • "error": true

  • error.message: broken

  • error.object: "error"

  • error.stack: Error: broken at...

注釈

error.message および error.stack メッセージはブラウザ固有です。

タイプエラーの例 🔗

次のコードを考えてみます：

new Promise((resolve, reject) => {
   resolve(null)
}).then((val) => {
   val.prop = 1
})

ブラウザ RUMエージェントは、以下の属性を使用してエラーを収集します：

  • component: "error"

  • "error": true

  • error.message: Cannot set property 'prop' of null

  • error.object: TypeError

  • error.stack: TypeError: Cannot set property 'prop' of null at...

注釈

error.message および error.stack メッセージはブラウザ固有です。

リソースの読み込みに失敗 🔗

ブラウザRUMエージェントは、リソースのロードに失敗するたびに、名前 eventListener.error のスパンとして登録します。画像やスクリプトの読み込み時にサーバーが4xxまたは5xxステータスコードを返すと、ブラウザはリソースの読み込みに失敗します。

次の例を考えてみます：

<!DOCTYPE html>
<html>
   <head>
      [...]
   </head>
   <body>
      <img src="/missing-image.png" />
   </body>
</html>

ブラウザ RUMエージェントは、以下の属性を使用してエラーを収集します：

  • component: "error"

  • "error": true

  • error.message: "IMG"

  • error.object: "https://example.com/missing-image.png"

  • error.stack: ""//html/body/img""

注釈

error.message および error.stack メッセージはブラウザ固有です。

コンソールエラー 🔗

ブラウザRUMエージェントは、コンソールを使用してログに記録された各エラーを、console.error という名前のスパンとして登録します。ブラウザは通常、開発者コンソールにメッセージを表示するためにコンソールエラーを使用します。ブラウザ RUMエージェントは、コンソールエラーを try...catch ブロックから収集します。

注釈

ブラウザコンソールが、コンソールエラーをブラウザ RUM エージェントエラーとして誤って報告する可能性があります。スタックトレースを確認し、エラーの原因が Splunk RUM にあるのか、インストルメンテーション対象のアプリケーションで生成された console.error 呼び出しにあるのかを確認してください。

以下の例は、ブラウザ RUMエージェントがどのようにコンソールエラーを収集するかを示しています：

フィールドの値をnullに設定する例 🔗

次のコードを考えてみます：

try {
   someNull.anyField = 'value';
} catch(e) {
   console.error('failed to update', e);
}

ブラウザ RUMエージェントは、以下の属性を使用してエラーを収集します：

  • component: "error"

  • "error": true

  • error.message: failed to update TypeError: Cannot set property 'anyField' of null

  • error.object: String

  • error.stack: "TypeError: Cannot set property 'anyField' of null at...

注釈

error.message および error.stack メッセージはブラウザ固有です。

エラー404の例 🔗

次のコードを考えてみます：

axios.get('/users').then(users => {
   showUsers(users)
}).catch(error => {
   showErrorMessage()
   console.error('error getting users', error)
})

ブラウザ RUMエージェントは、以下の属性を使用してエラーを収集します：

  • component: "error"

  • "error": true

  • error.message: "error getting users Error: Request failed with status code 404"

  • error.object: "String"

  • error.stack: "Error: Request failed with status code 404 [...] at XMLHttpRequest.l.onreadystatechange  axios.min.js:2:8373)"

注釈

error.message および error.stack メッセージはブラウザ固有です。

Splunk RUM エラー 🔗

ブラウザ RUM エージェントは、 SplunkRum.error を name: SplunkRum.error のスパンとして呼び出すことで、ログに記録された各エラーを登録します。 SplunkRum.error を使用しても、ブラウザの開発者コンソールにはエラーは記録されません。エラーは他の RUM テレメトリとともに送信され、Splunk RUM UI で公開されます。

次の例を考えてみます：

axios.get('/users').then(users => {
   showUsers(users)
}).catch(error => {
   showErrorMessage()
   if (window.SplunkRum) {
   SplunkRum.error('error getting users', error)
   }
})

結果として発生するエラーは、ブラウザ RUMエージェントが収集した console.error と同様の属性を持ちます。

This page was last updated on 2022年12月28日.