Web アプリケーション内のエラーを、大局的にも細部まで把握できます。OpenReplay を使用すると、完全なコンテキストでトラブルシューティングでき、問題をより迅速に解決できます。

1. セッションビュー > Errors タブに移動します
2. Omnisearch を使用する: イベント “Error Message” を選択し、特定のエラーメッセージを入力します。

1. Console > Errors Tab に移動します
2. エラーを開いて、完全なソースマップを表示します。
3. “Find all sessions with this error” をクリックして、そのエラーが発生したセッションの一覧を確認します。

1. Cards > Add Card > Monitors に移動します
2. Table of Errors カードを選択します

OpenReplay トラッカーは、3 種類のエラーのログ記録をサポートしています。

1. 捕捉された例外 - Error
2. 拒否された Promise - PromiseRejectionEvent
3. エラーイベント（onError） - ErrorEvent

これらはすべて、次の 1 つのメソッドで報告できます。

tracker.handleError(error, metaObject); // metaObject is optional and is a flat object

それぞれの種類のエラーの例を見ていきましょう。

デフォルトでは、捕捉された例外は「Console」タブにログ記録されません。エラーを報告するには、次のパターンを使用します。

try {
    // application code
} catch (err) {
    // application code that handles the error
    tracker.handleError(err, metaObject); // metaObject is optional and is a flat object
}

Promise が拒否され、OpenReplay に報告する必要がある場合は、次の方法を使用します。

function myFunc() {
    doSomeAsyncStuff()
        .then((result) => {
            // application code
        })
        .catch(promiseRejectionErr => {
            // application code to handle the error
            tracker.handleError(promiseRejectionErr, metaObject); // metaObject is optional and is a flat object
        });
}

<img> 要素の読み込みに失敗した場合など、イベントによってトリガーされるエラーを報告します。

<img id="myImg" src="image.gif">
<p id="demo"></p>

<script>
document.getElementById("myImg").addEventListener("error", myFunction);

function myFunction(errorEvent) {
    document.getElementById("demo").innerHTML = "The image could not be loaded.";
    tracker.handleError(errorEvent, { context: "demo" });
}
</script>

この手順についてご不明な点がございましたら、お気軽に Slack までお問い合わせください。