앱 실사용 중에는 알 수 없는 이유로 일어나는 에러가 있다.
또 이 에러가 간헐적으로 일어난다면 이유를 찾기도 어렵다.
Firebase Analytics(이하 FA)의 이벤트 기능을 이용하여 앱 전체에서 일어나는 에러를 로깅하여 보자.
먼저 FA를 logEvent 함수를 잘 이해할 필요가 있다.
처음에는 logEvent의 이벤트 이름으로 'error'를 사용해서 로깅하려 하였다.
그런데 다른 이름의 이벤트는 잘 전송되는데 'error'라는 이름만 안된다는 사실을 발견하였다.
그 이유를 찾아보니
Firebase Analytics Event
'event'등의 이름은 predefined 되었기 때문에 사용할 수 없다는 것이다.
logEvent 함수 특성상 에러 로그를 받을 수 없었기 때문에 이 원인을 찾는 것이 힘들었다.
두번째로는 ErrorBoundary를 app.tsx에 선언함으로써 앱 내부에서 일어나는 오류를 로깅하려 하였다.
그러나 이 방법은 2가지 문제가 있었다.
첫번째는, ErrorBoundary가 선언된 app.tsx가 렌더링되기 전에 일어난 오류는 확인할 수 없다는 것이다.
두번째는, 안 그래도 긴 app.tsx의 provider hell에 ErrorBoundary 컴포넌트가 한 단계 기여를 한다는 것이다.
괜찮은 방법을 찾는 도중 자바스크립트 window 객체에 onerror가 있다는 사실을 발견하였다.
window.onerror = (event, source, lineno, colno, error): void => {
const analytics = getAnalytics(app);
logErrorEvent(analytics, event, source, lineno, colno, error);
};해당 코드로 기존의 56줄 정도의 ErrorBoundary 코드를 대체할 수 있었다.
그리고 해당 로직을 index.tsx에 선언함으로써 app.tsx의 여러 로직에서 일어나는 에러들을 다 이벤트로 처리하여 로깅할 수 있게 되었다.
export const logErrorEvent = (
event: string | Event,
source: string | undefined,
lineno: number | undefined,
colno: number | undefined,
error: Error | undefined,
) => {
analytics.then((analytic) => {
if (analytic) {
const errorMsg = error ? error.stack : '';
const errorPosition = errorMsg?.split('\n')[1];
logEvent(analytic, 'errorEvent', {
event,
source,
lineno,
colno,
error: errorMsg,
errorPosition,
});
}
});
};그리고 에러가 일어난 정확한 파일 위치와 에러 타입을 알기 위해 에러이벤트의 파라미터를 위와 같이 설정하였다.
에러 위치를 알 수 있다!
