Sentry 활용하기

[JaeYeopHan]

Sentry ErrorBoundary 사용

이 Sentry에서도 자체 ErrorBoundary를 제공한다. 전역 ErrorBoundary에서 capture된 에러는 unexpected error 이므로 모니터링을 해야 하는데 이 때 SentryErrorBoundary를 이용할 수 있다.

import { ErrorBoundary } from '@sentry/react'
import React, { ReactNode } from 'react'

interface Props {
  children: ReactNode
  onResetError?(): void
}

export default function SentryErrorBoundary({ children, onResetError }: Props) {
  return (
    <ErrorBoundary
      fallback={({ error, resetError }) => (
        <FullScreenError
          error={error}
          onResetError={() => {
            resetError()
            onResetError?.()
          }}
        />
      )}
    >
      {children}
    </ErrorBoundary>
  )
}

Initialize Sentry

앱의 최상단에서 Sentry를 init하기만 하면 된다. next.js 앱의 경우, _app.tsx에서 Sentry를 초기화 할 수 있다.

import * as Sentry from '@sentry/react'
import { Integrations } from '@sentry/tracing'
import { useEffect } from 'react'

interface Options {
  dsn: string
  allowUrls: string[]
}

export default function useSentry({ dsn, allowUrls }: Options) {
  useEffect(() => {
    Sentry.init({
      dsn,
      enabled: process.env.STAGE === 'production',
      autoSessionTracking: true,
      integrations: [new Integrations.BrowserTracing()],
      tracesSampleRate: 1.0,
      release: process.env.NEXT_PUBLIC_DEPLOYMENT_ID,
      allowUrls,
    })
  }, [allowUrls, dsn])
}

SourceMap

모니터링 중에 원인을 파악하기 위한 수단으로 Sentry에 sourcemap을 붙일 수도 있다. SentryWebpackPlugin을 통해 쉽게 소스맵을 업로드 할 수 있다.

new SentryWebpackPlugin({
  org: SENTRY_ORG,
  project: SENTRY_PROJECT,
  authToken: SENTRY_AUTH_TOKEN,

  include: '.next', // <- source
  ignore: ['node_modules'],
  stripPrefix: ['webpack://_N_E/'],
  urlPrefix: `~/_next`, // <- asset prefix
  release: DEPLOYMENT_ID,
})

초기화 시켜주는 시점의 NEXT_PUBLIC_DEPLOYMENT_ID와 SentryWebpackPlugin으로 전달되는 DEPLOYMENT_ID가 같아야 배포된 버전에 맞는 sourcemap이 업로드 된다.