Sentry 도입(2): Sentry 설정 과정 및 Error Boundary 구성 방법

JeongWu (Jane) Park·2025년 3월 31일

지난 글 중 Sentry 도입(1)에서는 프론트엔드 오류 추적의 어려움을 해결하기 위해 Sentry라는 도구를 도입하게 된 배경과, 기존 모니터링 도구인 InterMax와의 차이점에 대해 정리했었다.

이번 글에서는 실제 Vue.js 프로젝트에 Sentry를 적용하기 위해 어떤 과정으로 설정해야 하는지와 Error Boundary를 어떻게 구성할 수 있는지도 함께 정리해보려고 한다.

1️⃣ Sentry 설정 과정

Sentry는 비교적 간단한 설정만으로 Vue 프로젝트에 통합할 수 있다.

1. Sentry 계정 생성 및 프로젝트 설정

먼저 sentry.io에 접속해 계정을 생성하고, 조직과 프로젝트를 만든다.
플랫폼으로 Vue.js를 선택하면, 초기화 코드와 함께 연동 가이드가 제공된다.

2. Sentry SDK 설치 및 초기 설정

npm install @sentry/vue @sentry/tracing

main.js 혹은 main.ts에서 아래와 같이 설정한다.

import { createApp } from 'vue';
import * as Sentry from '@sentry/vue';
import { BrowserTracing } from '@sentry/tracing';
import App from './App.vue';
import router from './router';

const app = createApp(App);

Sentry.init({
  app,
  dsn: 'https://<your-public-key>@o0.ingest.sentry.io/<project-id>',
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ['localhost', 'yourdomain.com'],
    }),
  ],
  tracesSampleRate: 1.0,
});

3. 애플리케이션 배포 및 네트워크 설정 확인

운영 환경에서 오류가 정상적으로 수집되기 위해서는, 배포된 앱이 sentry.io와 통신할 수 있어야 한다. 이를 위해 네트워크 설정을 점검해야 한다.

✅ 네트워크 설정 체크리스트

방화벽 설정
- 콜센터 내부망 → sentry.io로의 TCP 443 포트 아웃바운드 규칙 설정
- 예: 콜센터 IP → sentry.io TCP/443
프록시 서버 경유 여부 확인 및 설정
DNS 설정
네트워크 연결 확인
```
curl https://sentry.io --verbose
```

2️⃣ Error Boundary 구성하기

UI의 일부분에서 자바스크립트 오류가 발생했다고 해서 전체 애플리케이션이 멈춰서는 안 된다. 이를 방지하기 위해 Sentry와 함께 Error Boundary를 구성하는 것이 좋다.

Error Boundary란?

하위 컴포넌트 트리에서 발생한 자바스크립트 오류를 포착하고, 깨진 UI 대신 fallback UI를 보여주는 방식

try-catch처럼 작동하지만 컴포넌트 단위로 동작한다. Vue에서는 errorCaptured 훅을 활용해 구현할 수 있다.

예시: Vue에서의 Error Boundary 구현

<template>
  <div v-if="error">
    <p>문제가 발생했습니다. 새로고침해 주세요.</p>
  </div>
  <div v-else>
    <slot />
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: null,
    };
  },
  errorCaptured(err, vm, info) {
    this.error = err;
    // Sentry로 에러 전송
    this.$sentry?.captureException(err);
    return false; // true 반환 시 에러가 상위로 전파되지 않음
  },
};
</script>