[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(7) Sentry 설정

2024.08.10 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(6)

 

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(6)

sentry can't fix this

 

유튜브 광고로 종종 봤던 sentry! 오늘은 sentry 적용에 대해 정리를 하고자 한다.
sentry에 대해 알게 된 게 프로젝트 마무리 시점이라, 경험은 해보고 싶어서 아쉬운대로 적용을 해봤다.

⚠️ 시간상 마지막 단계에 했지만, 설정 관련 회고들을 같이 모아두고 싶어서 sentry 설정에 대해 먼저 다루게 되었습니다! yarn, react를 기준으로 작성되었습니다!

 

sentry는 개발자들이 서비스와 시스템 전반에 걸쳐 성능 이슈나 에러들을 발견하고 디버깅하는데 도와주는 도구다.

뿐만 아니라 여러 서비스나 애플리케이션 간에 상호작용을 모니터링할 수 있다는 장점이 있다.

 

아래처럼 어떤 경로로 요청이 많이 가고 이슈가 있을 때 로그를 확인할 수 있고, 가입했던 이메일로 에러 발생 시 이메일이 온다.

 

에러가 발생할 경우 dom 리플레이도 가능하다.

 

이렇게 시각적으로 에러가 어떻게 어디서 발생하는 지 알려주는 게 신박한 거 같다.

그럼 본격적으로 설정을 해보자! (계정 가입 후 과정을 다룹니다.)

 

설정 방법으로는 패키지 매니저/ loader/ cdn 방법이 있는데, 그 중 패키지 매니저로 설치를 할 것이다.

설치

yarn add @sentry/react

설정

sentry는 react router 버전을 여러개 지원한다.

가능한 앱의 최상단에 sentry 초기화를 해줘야한다. 다음과 같이 초기화 코드를 애플리케이션 최상단에 하도록 하자. 

vinylify의 앱 진입 파일은 main.tsx다. (vite에서 index.html에서 <script type="module" src="/src/main.tsx"></script>로 설정되어 있기 때문)

 

https://docs.sentry.io/platforms/javascript/#configure에 있는 코드를 복사해오면 된다.

• main.tsx 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'https://랜덤일련번호.ingest.us.sentry.io/랜덤일련번호2',
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  // Performance Monitoring
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: [
    'localhost',
    /^https:\/\/yourserver\.io\/api/,
    /^https:\/\/vinylify-express.vercel.app/, //로그인 페이지와의 상호작용을 알기 위해 등록
    // /^https:\/\/api.spotify.com/,
  ],
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

 

그 후 vite.config.ts에 플러그인 설정을 추가해주자.

import { sentryVitePlugin } from '@sentry/vite-plugin';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

import type { UserConfig } from 'vite';
import type { InlineConfig } from 'vitest';

type ViteConfig = UserConfig & { test: InlineConfig };
const config: ViteConfig = {
  plugins: [
    react(),
    tsconfigPaths(),
    //////////////////////////////////////////////// 💖 추가 ////////////////////////////////////////////////////////////////
    sentryVitePlugin({
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: 'pyotato',
      project: 'javascript-react',
    }),
    //////////////////////////////////////////////// 💖 추가 ////////////////////////////////////////////////////////////////
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
  },
  build: {
    sourcemap: true, // Source map generation must be turned on
  },
};
export default defineConfig(config);

 

깃허브에 sentry token 도 등록해주자.

---

 📚 References

https://docs.sentry.io/platforms/javascript/guides/react/

React | Sentry for React