ブラウザスパンでエラーを特定する

Splunk RUM for Browser を使用して、JavaScript コンソールエラーやリソースエラーなどのエラーを監視する方法のシナリオ例です。

次のシナリオは、架空のeコマース企業である Buttercup Industries を取り上げています。

Splunk RUM のエラー

Splunk RUM はブラウザアプリケーションのすべての HTTP ステータスコードをキャプチャするため、すべての XMLHttpRequest(XHR)オブジェクトを表示し、Tag Spotlight でリクエストを取得できます。エンドポイントのエラーメトリクスでは、5xx エラーと 4xx エラーがカウントされます。Splunk RUM の各スパンにはタグが含まれ、エラーは次の属性を持つスパンとして定義されます。

  • status_code:5xx

  • error:true

  • status_code:4xx

以下の定義と例は、Splunk RUM for Browser でデータから検索できるさまざまなタイプのエラーを示しています。

JavaScriptエラー

Splunk RUM for Browser では、明示的な JavaScript コンソールエラーと、onerror イベントのような捕捉されない JavaScript エラーの 2 種類があります。フロントエンドエラーはページごとに表示され、1 分あたりのエラー数、ページロードまたはルート変更ごとのエラー数で説明されます。

JavaScriptのコンソールエラー

JavaScript コンソールエラーは明示的なエラーです。エラー [console.error(...)] が発生した場合、そのエラーに関するコンテキストや原因を説明するカスタムエラーメッセージが表示されます。

捕捉されないJavaScriptエラー

検出されていない JavaScript エラーは暗黙的なエラーです。不明な JavaScript エラーには通常、カスタムエラーメッセージは表示されません。未検出の JavaScript エラーには、スタックトレースなどの重要な情報が未編集の形式で含まれている可能性があります。スタックトレースは、JavaScript エラーが検出済みか未検出かを問わず、双方に含めることができます。架空アプリケーションで発生した未検出エラーを示すこの例におけるスパンは、Splunk RUM のセッション詳細ビューでどのようなフィールドが表示されるかを示しています。

Span ID                      c85a362c4667
Operation                    console.error

TAGS:
_sf_ua_browserName           Safari
_sf_ua_browserVersion        87.0.4280.88
_sf_ua_clientIP              exampleIP
_sf_ua_osName                Linux
app                          ExampleName
component                    error
error                        true
error.message                Uncaught TypeError: Cannot read property 'Price' of undefined
error.object                 String
location.href                http://example
norm.location.href           http://example
customerId                   c123
ot.status_code               UNSET
splunk.rumSessionId          session123
splunk.rumVersion             0.0.14
splunk.scriptInstance        instance123

バックエンドのエラーとリソースの応答時間の長さ

バックエンドのエラーは、ファーストパーティとサードパーティの両方のエンドポイントでキャプチャされます。

リソースエラー

リソースエラーは、フェッチエラー、AJAX エラー、XHR リクエストなどの明示的な HTTP イベントエラーです。サーバーでエラーが発生すると、XHR / フェッチエラーが発生します。たとえば、ユーザーがアプリケーション上のデータへのアクセスを要求し、そのデータがサーバーから削除された場合などです。サードパーティリソースエラーは、ユーザーがネットワーク経由でリソースにアクセスしようとしたときに、リソースを利用できない場合です。たとえば、アプリケーション上でユーザーが JavaScript、 CSS、または イメージリソースのロードを試みて失敗した場合です。

リソース応答時間

Splunk はエンドポイントのパフォーマンスを監視し、リソースの応答遅延といった挙動のスパイクを特定します。

スパンの例

ここでは my-app という架空のアプリで表示された 404 エラーをスパンの例として示します。

Span ID                      c85a362c4668
Operation                    HTTP GET

TAGS:
_sf_ua_browserName           Chrome
_sf_ua_browserVersion        87.0.4280.88
_sf_ua_osName                Mac OS X
_sf_ua_osVersion             10.15.7
app                          my-app
component                    xml-http-request
error                        true
http.host                    my.app.domain.com
http.method                  GET
http.response_content_length 18
http.scheme                  http
http.status_code             404
http.status_text             Not Found
http.url                     /api/ratings/api/fetch/STAN-1
http.user_agent              Mozilla/5.0 (Macintosh; Intel Mac OS X
                            10_15_7) AppleWebKit/537.36 (KHTML, like
                            Gecko) Chrome/87.0.4280.88 Safari/537.36
location.href                my-app.comain.com/product/STAN-1
orgId                        org123
ot.status_code               UNSET
span.kind                    client
splunk.rumSessionId          session123
splunk.rumVersion                0.0.14
splunk.scriptInstance        instance123

概要

エクスペリエンスを最適化するには、次のリソースを参照してください。

Subject

リソース

ビデオチュートリアルとブログ記事

Splunk RUM ドキュメント