웹 애플리케이션 내 오류를 큰 그림부터 세부 사항까지 파악하세요. 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 트래커는 세 가지 유형의 오류 로깅을 지원합니다.

1. 처리된 예외 - Error
2. 거부된 Promise - PromiseRejectionEvent
3. 오류 이벤트(onError) - ErrorEvent

이 모든 오류는 하나의 메서드로 보고할 수 있습니다.

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으로 문의해 주세요.