Next.js 프로젝트에 Sentry 도입 (Next.js 10.0.8 이상)

2021/06/18 추가
3-1. Sentry 초기화 은 더 이상 필요하지 않습니다.

2021/06/22 추가
자신의 환경에서는, next build -> next start 의 흐름으로 실시했을 경우,
클라이언트측 렌더링이 더 이상 발생하지 않음
원인은 알 수 없습니다. 확실하면 추가합니다.

개요

Next.js의 프로젝트에 Sentry를 도입하려고 Sentry의 Project를 만들면,
왠지 이전과 다른 시작 가이드가
htps : // / cs. 센트리. 이오 / p t 후 rms / 그럼 sc 리 pt / 구이 s / 네 xtjs /
실제로는 자신의 프로젝트에서는 이러한 URL이 표시되었지만 대체로 같은 내용

Next.js의 Ver. 10.0.8 이상을 지원한다는 것
(하지만 10.0.0에서 실시해도 동작했다)

1. Sentry의 Next.js SDK 설치

다음 부분
htps : // / cs. 센트리. 이오 / pt t rms / 그럼 sc 리 pt / gue s / ne xtjs / # in s tail
이것은 공식 절차

  yarn add @sentry/nextjs
  # or
  npm install --save @sentry/nextjs

2. Wizard를 사용하여 설정

다음 부분
htps : // / cs. 센트리. 이오 / p t 후 rms / 그럼 sc 리 pt / gue s / 네 xtjs / # 곤후
이것도 순서로서는 공식 그대로

npx @sentry/wizard -i nextjs

실행 후에는 문서에서 팔로우가 없기 때문에 상세를 기술해 간다

2-1. 브라우저 열기

이것의 의미는 불명, 여담이지만 10초로 사라져 버리기 때문에 SS를 찍는 것이 상당히 고생했다

2-2. 콘솔

설정 파일의 추가가 행해진 취지, 표시가 나온다

# npx @sentry/wizard -i nextjs
info sentry-cli Using cached binary: /Users/makoto-h/.npm/sentry-cli/329df8-sentry-cli-Darwin-universal
Running Sentry Wizard...
version: 1.2.8 | sentry-cli version: 1.66.0
Sentry Wizard will help you to configure your project
Thank you for using Sentry :)

✓ next > 10.0.0 is installed

Please open
https://sentry.io/account/settings/wizard/vsz9u6fe01kcekf9skfmizx2gxd6ipnubjqt3skrq0fugqzz0pj3kpvubhqkwbmx/
in your browser (if it's not open already)

? Please select your project in Sentry: (Use arrow keys)
❯ organization-name / project-name-1 
  organization-name / project-name-2 

--------------------------------------------------------------------------

? Please select your project in Sentry: explorstate / stay-count

Successfully created sentry.properties

File next.config.js already exists, and _next.config.js also exists.
Please, merge those files.

File sentry.client.config.js already exists, and _sentry.client.config.js also exists.
Please, merge those files.

File sentry.server.config.js already exists, and _sentry.server.config.js also exists.
Please, merge those files.

For more information, see https://docs.sentry.io/platforms/javascript/guides/nextjs/

프로젝트가 여러 개 있으면 콘솔에서 어느 것을 연결할지 선택하도록 지시되므로 커서로 선택하여 선택Please select your project in Sentry: (Use arrow keys) 부분

그러면 다음 4 개의 파일이 생성됩니다.

next.config.js
sentry.client.config.js
sentry.properties
sentry.server.config.js

이미 위의 파일이 있으면 언더바가있는 파일이 만들어지고 병합하라는 메시지가 나타납니다.
존재하지 않으면 아무것도하지 않고 OKnext.config.js의 병합의 예는 후술

3. 소스 코드에 추가

3-1. Sentry 초기화

※ 이 항목은 불필요했습니다.sentry.client.config.js 와 sentry.server.config.js 에 비슷한 코드가 있기 때문입니다.

3-2. 에러 발생 코드

다음 부분 (그러나 API 모드 부분 제외)
htps : // / cs. 센트리. 이오 / p t 후 rms / 그럼 sc 리 pt / 구이 s / 네 xtjs / # ゔ ㅇ fy

적당한 화면의 JSX에 추가하면 OK

4. 오류 발생

Throw error라는 버튼이 자라므로 누르면 오류가 발생합니다.


안전 Sentry에 등록
그러나 왠지 같은 이벤트가 2회 등록되어 있다. 초기화의 위치가 이상한지도
이해하는 대로 수정

5. next.config.js 병합

Wizard가 작성하는 내용은 이하

// This file sets a custom webpack configuration to use your Next.js app
// with Sentry.
// https://nextjs.org/docs/api-reference/next.config.js/introduction
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

const { withSentryConfig } = require('@sentry/nextjs');

const moduleExports = {
  // Your existing module.exports
};

const SentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

예를 들어 이미 다음과 같은 config 파일이 존재할 때

const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  serverRuntimeConfig: {
    ENV_FOR_SERVER_SIDE: process.env.ENV_FOR_SERVER_SIDE,
  },
  publicRuntimeConfig: {
    ENV_FOR_BOTH: process.env.ENV_FOR_BOTH,
  },
};

다음과 같이 병합하면 예상대로 움직였다.
불필요한 코멘트 제거

const dotenv = require('dotenv');
const { withSentryConfig } = require('@sentry/nextjs');

dotenv.config();

const moduleExports = {
  serverRuntimeConfig: {
    ENV_FOR_SERVER_SIDE: process.env.ENV_FOR_SERVER_SIDE,
  },
  publicRuntimeConfig: {
    ENV_FOR_BOTH: process.env.ENV_FOR_BOTH,
  },
};

const SentryWebpackPluginOptions = {};

module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

히스토리

더 이상 필요하지 않은 항목 로그

3-1. Sentry 초기화

이러한 URL 에 기재가 있지만,
정적 페이지 쪽에는 왠지 기재가 없으므로 전재
단, 최소한의 기재만
원래 기사라면 Sentry의 import에 대해서 기재가 없지만, 아래와 같이 움직였다

_app.tsx

import * as Sentry from '@sentry/react'

Sentry.init({
  dsn: "https://[email protected]/5819897",
  tracesSampleRate: 1.0,
});