Next.js에서 Sentry로 원본 맵 보내기

안녕하세요, 저는 주식회사 Stamen회사FANTS의 개발자입니다.
이번에는 넥스트.js 프로그램에 Sentry를 넣는 방법과 원본 맵을 보낸 후 Sentry에서 전송 전 코드로 잘못된 부분을 볼 수 있는 방법을 쓰고 싶습니다.

Sentry란?

Sentry는 오류 추적 서비스에서 응용 프로그램에서 발생하는 오류 내용, 사용자, 브라우저 정보 등을 알릴 수 있는 서비스다.비슷한 서비스로는 버그싱과 데이터독 등이 있다.
리액트나 뷰 등은 디코딩을 통해 압축해 읽기 어려운 자바스크립트로 변환하는 코드라고 생각하지만, 디코딩된 코드로 오류가 발생한 곳을 알려주는 것도 오류 추적이 어렵다.
따라서 전송 전 코드를 오류 추적할 수 있도록 소스 매핑 파일을 Sentry에 전송합니다.
간단하게 설명하자면 원본 그림은 전송 전과 후 코드를 연결하는 파일이다. 아래와 같이 변환된 파일은 원본 그림의 URL을 부여한다.

//# sourceMappingURL=framework-4449950695638f171aae.js.map

Sentry 설정

지금 Sentry 설정을 시작합니다.
먼저 설치@sentry/nextjs합니다.

yarn add @sentry/nextjs

다음에wizard 명령을 치면sentry 관련 파일을 자동으로 생성할 수 있습니다.

npx @sentry/wizard -i nextjs

이후 다음 파일이 생성되었는지 확인하십시오.

sentry.client(server).config.js: 클라이언트 및 서버 환경에서 오류를 감지하는 Sentry 초기화 파일

next.config.js : next.config.하면, 만약, 만약...next.config.js 생성

sentry.properties: 원본 그림 등의sentry-cli를 보내는 설정 파일(예를 들어sentry-cli로 가는 경로 등)

.sentryclirc:sentry-cli를 사용하는auth입니다.Token 저장

개발 환경 외부에서 전송

나는 sentry.client(server).js에 DSN을 설정하고 싶다. 이것은 소위 Sentry SDK가 어디에서 오류를 보냈는지 명확하게 표시한 것이다.따라서 다음 환경 변수를 사용하여 개발 환경에서 오류를 보내지 마십시오.
.env.production

NEXT_PUBLIC_SENTRY_DSN=hogehoge~

sentry.client.js

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1.0
  // ...
  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
});

auth.token을 환경 변수로 설정하기

sentryclierc에서auth.내 생각에는 토큰, 이거auth가 있을 것 같아.토큰은 은밀한 정보이기 때문에 반드시 녹음해야 한다.(wizard.gitignore. 나는sentryclierc가 위에 추상될 것이라고 생각한다)
그래서 정식 공연 환경에서auth.token을 읽기 위해서는 next.config.js의SentryWebpackPluginOptionsauthToken에 환경 변수를 지정하고vercel 등으로 환경 변수를 설정해야 한다.
next.config.js

const SentryWebpackPluginOptions = {
  // ...
  authToken: process.env.SENTRY_AUTH_TOKEN,
};

Sentry를 사용하여 소스 매핑 보내기

보통 리액트 등으로 원본 지도를 보낼 때는 웹 팩 설정 등 다양한 것을 만져야 하지만 넥스트.js라면 방금 실행한wizard 명령으로 생성된 next.config.js 에서 원본 맵이 보내는 설정을 자동으로 기술하기 때문에 특별한 설정이 필요하지 않습니다.next.config.js를 보면 withSentryConfig를 import로 하는 것 같아. 웹 패키지를 확대하는 거야.확장이란 페이지를 불러올 때 서버가 시작될 때sentry.client(server).js에 Sentry 초기화를 실행하고 원본 맵을 보내는 것을 말한다.withSentryConfig의 내부를 보세요.

export function withSentryConfig(
  userNextConfig: ExportedNextConfig = {},
  userSentryWebpackPluginOptions: Partial<SentryWebpackPluginOptions> = {},
): NextConfigFunction | NextConfigObject {
  // ...
  return {
    ...userNextConfig,
    webpack: constructWebpackConfigFunction(userNextConfig, webpackPluginOptionsWithSources),
  };
}

export function constructWebpackConfigFunction(
  userNextConfig: NextConfigObject = {},
  userSentryWebpackPluginOptions: Partial<SentryWebpackPluginOptions> = {},
): WebpackConfigFunction {
// ...

newConfig.plugins.push(
  // @ts-ignore Our types for the plugin are messed up somehow - TS wants this to be `SentryWebpackPlugin.default`,
  // but that's not actually a thing
  new SentryWebpackPlugin(getWebpackPluginOptions(buildContext, userSentryWebpackPluginOptions)),
);

, SentryWebpackPlugin의 실례를 호출하고 있습니다. 이 SentryWebpackPlugin은sentry-cli를 사용하여build에 원본 맵을 업로드합니다.(개발 환경에서 원본 그림을 업로드하지 않습니다.)
실제로next build 하는데 Sentry로 보세요.
대상 항목의 [settings]에서 [source Maps]로 이동하면 다음과 같은 원본 맵이 업로드되었는지 확인할 수 있습니다.

그렇다면 넥스트.js 프로그램에서 오류가 발생할 코드를 섞어 보았습니다.

const Example = () => {
  // ...
  <button
    onClick={() => {
      throw new Error("hoge");
    }}
  >
    button
  </button>;
  // ...
};

button을 클릭하여 Sentry를 확인하면 Sentry의 [issues]에서 상기 오류가 추적되었음을 확인하고 변압기 앞의 코드로 보고할 수 있습니다.

주의점

상기 설정을 한 경우 전송 전의 원본 코드는 공식 환경에서도 공개되기 때문에 원본 맵 파일을 업로드한 후 삭제해야 한다.
내가 운영하는 것을 시험해 봤다블로거.
Devotol의 [sources]_N_E를 보면 소스 코드를 확인할 수 있습니다.

퍼블릭 프로젝트라면 문제없지만 프로바트 창고라면 공개하고 싶지 않기 때문에 보이지 않을 필요가 있다.
삭제 자체는 간단합니다. next build면out 디렉터리에 맵 파일이 생성되기 때문에 아래next build 이후out 디렉터리 아래에 있는 맵 파일을 삭제합니다.
package.json

"build": "next build && next export && find ./out -name *.map -delete"

최후

SentryNext.나는 js에 삽입하는 방법과 원본 그림을 업로드했다.Sentry는 오류 추적 외에도 웹 vital을 기반으로 성능 감시를 할 수 있으니 다양한 측면에서 활용해 주십시오.