NextJS/ReactJS에서 sentry 가져오기

이른바 Sentry

프런트엔드의 오류 모니터링 툴입니다.
서버 쪽에서 로그 출력 수단이 있어요.
전단에 로그를 저장하는 메커니즘이 없습니다. 오류 로그를 서버에 보내는 것을 설치해야 합니다.
sentry는 쉽게 실현할 수 있고 분석 오류가 있는 계기판도 있습니다.

가져오기

사용자가 sentry에 로그인하여 프로젝트를 만드는 전제에서 진행합니다.
공식적으로안내서 도입(en).

매크로 패키지 설치

# yarn
yarn add @sentry/react @sentry/tracing

# npm
npm install --save @sentry/react @sentry/tracing

이루어지다

호출해야 하는 구성 요소 앞에서 Sentry를 초기화합니다.
리액트면 index.js

넥스트JS라면app.tsx

React 편(js)

index.js의render 메소드 앞에서 Sentryinit()를 설명합니다.

import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";


Sentry.init({
  dsn: "***************",
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

NextJS 편(tsx)

NextJS는 pages/_app.tsx에 기술되어 있습니다.

import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";


Sentry.init({
  dsn: "***************",
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

document is not defined 등이 욕을 먹은 경우에도 이렇게 쓸 수 있다.

useEffect(()=>{
    if(document){
      Sentry.init({
        dsn: "**************************",
        autoSessionTracking: true,
        integrations: [
          new Integrations.BrowserTracing(),
        ],
        tracesSampleRate: 1.0,
      });  
    }
  },[])