프론트엔드 에러 추적, 도구 없이 시작하는 법

Sentry를 붙이면 좋지만, 사이드 프로젝트나 초기 서비스라면 도구 없이도 에러 추적의 80%를 만들 수 있다. 핵심은 수집 창구를 하나로 모으는 것이다.

전역 핸들러 두 개면 시작된다

window.addEventListener("error", (e) => {
  report({ type: "error", message: e.message, stack: e.error?.stack });
});

window.addEventListener("unhandledrejection", (e) => {
  report({ type: "rejection", message: String(e.reason) });
});

function report(data: Record<string, unknown>) {
  navigator.sendBeacon(
    "/api/client-errors",
    JSON.stringify({ ...data, url: location.href, ua: navigator.userAgent, at: Date.now() }),
  );
}

sendBeacon은 페이지 이탈 중에도 전송이 보장되고 응답을 기다리지 않는다. 에러 리포트에 정확히 맞는 도구다.

React 경계도 한 곳으로

Error Boundary의 componentDidCatch, Next.js의 error.tsx에서도 같은 report()를 호출한다. 수집 창구가 하나면 나중에 Sentry로 갈아탈 때도 이 함수 하나만 바꾸면 된다.

서버 쪽 최소 구성

받은 에러는 DB 테이블 하나에 쌓는다. message + stack 해시로 그룹핑하고 count를 올리면 "무슨 에러가 몇 번"이 바로 보인다. 하루 한 번 새 그룹만 슬랙/디스코드로 쏘면 알림도 끝.