유저가 실제 서비스를 사용하다가 에러화면을 맞닥뜨리는 경우는 얼마나 될까?
서비스의 프론트엔드를 개발하면서 에러 케이스를 처리하는 팝업이나 리다이렉트 등의 처리를 해두긴 하지만, 실제 에러 상황에서 유저를 잘 달래줄 수 있는지는 확신이 없다.
CS나 앱스토어/구글플레이를 통해 인입된 이슈들은 유저가 에러케이스에서 불쾌함을 다 느낀 이후 한참 뒤 전달되는 경우일 수 있다.
기기 정보나 당시 배포한 작업이 있는지 등등 추적해보는 시도를 할 수는 있지만 정확한 원인 파악이 어렵다. 유저의 기기를 전달받아 접속해볼 수도 없고, 콘솔로그로 찍힌 에러로그를 유저로부터 전달받을 수도 없기 때문!
서버사이드가 아닌 클라이언트 단에서 발생한 에러를 트래킹할 수 있는 서비스들을 알아보았다.
Sentry
애플리케이션에서 오류가 발생하면 메일을 보내주고 슬랙 메시지로 연동할 수도 있다.
javascript, react, angular, vue, node.js, python, django, ios, android, java, php 등 언어를 다양하게 지원하고 있고 에러 리포팅을 연계할 수 있는 서비스도 slack, github 등 다양하게 제공한다.
에러 리포팅은 필수이고 에러를 파악할 수 있는 정보를 전달해주는데
- 디바이스
- 에러 메시지
- 앱 정보(id, 앱/빌드 버전 등)
- 브라우저 정보
- OS
- breadcrumbs* 에러 발생 시 경로
공식문서(리액트용) https://docs.sentry.io/platforms/javascript/guides/react/
*무료로는 한개의 계정으로 5천개의 에러까지 30일간의 히스토리까지 이용할 수 있다고 한다.
npm 등으로 인스톨 후 셋업 예시로는 다음과 같다.
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
import App from "./App";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [new BrowserTracing()],
// We recommend adjusting this value in production, or using tracesSampler
// for finer control
tracesSampleRate: 1.0,
});
ReactDOM.render(<App />, document.getElementById("root"));
// Can also use with React Concurrent Mode
// ReactDOM.createRoot(document.getElementById('root')).render(<App />);최상위에서 Sentry.init() 메소드로 실행시켜주는 모양새이다.
위 공식문서의 기본 예시 외 다른 예시로는 아래와 같다.
Sentry.init({
dsn: 'dsn key',
release: 'release version',
environment: 'production',
normalizeDepth: 6,
integrations: [
new Sentry.Integrations.Breadcrumbs({ console: true }),
new BrowserTracing(),
],
});Configuration
Sentry 기본 설정에 필요한 정보가 더 추가되어 있다.
dsn: 이벤트 전송을 위한 식별키release: 애플리케이션 버전 *package.json 기준이면 오류 추적에 용이함!environment: 애플리케이션 환경 (dev or development/production 등)normalizeDepth: 컨텍스트 데이터를 해당 뎁스로 정규화 (기본 3)integrations: SDK별 통합 구성 설정 *리액트의 경우 react-router integration설정이 가능하다고 함)
여기에 리액트16이상에서 제공하는 Error Boundary를 사용해 예기치 못한 에러가 발생했을 때 보여줄 fallback UI를 함께 구성할 수 있다. 또는 센트리 자체 제공 Error Boundary 컴포넌트가 있는 듯 하다.
*관련 포스팅: ErrorBoundary와 componentDidCatch
import React from 'react';
import * as Sentry from '@Sentry/react';
<Sentry.ErrorBoundary
fallback={<p>에러가 발생하였습니다. 잠시 후 다시 시도해주세요.</p>}
>
<Example />
</Sentry.ErrorBoundary>;Methods
리액트의 Error Boundary 컴포넌트는 제공하는 componentDidCatch 처럼 센트리가 제공하는 에러 이벤트 전송 api 가 있다.
-
captureException: error 객체 또는 에러 메시지(문자열)를 보낼 수 있다.import * as Sentry from '@Sentry/react'; try { aFunctionThatMightFail(); // 실패할 함수를 의미한다. } catch (err) { Sentry.captureException(err); } -
captureMessage: 에러메시지(텍스트) 를 보낼 수 있다.Sentry.captureMessage('000페이지에서 예기치 못한 에러가 발생하였습니다.');
장점과 활용
- scope 단위로 에러이벤트 데이터를 관리한다는 점
*withScope.. - 이벤트에 임의 데이터를 연결할 수 있는 기능을 제공(Context) 요청 데이터와 에러응답 데이터를 확인하기 위해서는 context를 이용하여 추가적으로 데이터를 전송해주도록 해야함
*setContext..
- HTTP status의 4, 5 등의 에러코드를 수집할 때 기준과 구분이 있어야 분석이 필요한 에러를 잘 골라내 수집할 수 있을 것으로 보인다.
참고
- 카카오 페이FE - Sentry로 우아하게 프론트엔드 에러 추적하기
- Sentry를 활용한 에러 모니터링 및 트래킹
- https://urbanbase.github.io/dev/2021/03/04/Sentry.html
추가로 스터디해볼 요소:
- Datadog
- Source Map
