Next.js를 사용한 센트리

Sentry는 "충돌을 재현하고 수정하기 위한 정보와 함께 프로덕션 배포에 대한 실시간 통찰력"을 제공하는 충돌 보고 플랫폼입니다.

이 블로그에서는 센트리를 기존 next.js 애플리케이션에 통합하는 방법을 살펴보겠습니다.

📥 설치 중

Sentry의 Next.jsSDK를 next.js 프로젝트에 추가합니다.

yarn add @sentry/nextjs

자동 구성 🛠

npx @sentry/wizard -i nextjs

CLI의 아래 나열된 옵션에서 프로젝트를 선택하면 설정 마법사가 기본값과 API 키로 구성 파일을 자동으로 생성합니다.



생성된 파일:

sentry.client.config.js

sentry.server.config.js

.sentryclirc(토큰 키가 저장되는 위치)

센트리 속성

next.config.wizardcopy.js(next.config.js가 이미 있는 경우).

next.config.js 수정 🔧

next.config.js가 프로젝트에 이미 존재하는 경우 앱이 자동으로 next.config.wizardcopy.js를 생성한 다음 스니펫을 next.config.js에 수동으로 복사해야 합니다.

/** @type {import('next').NextConfig} */
const { withSentryConfig } = require( '@sentry/nextjs' );

const nextConfig = {
  reactStrictMode: true
}

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

  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

module.exports = withSentryConfig( nextConfig, sentryWebpackPluginOptions );

백엔드 🔙

오류를 캡처하고 API의 서버 성능을 모니터링하는 애플리케이션에서 핸들러를 Sentry 함수로 래핑합니다.

통사론:

import { withSentry } from '@sentry/nextjs';

const handler = async (req, res) => {
  // your API calls...
}

export default withSentry(handler);

참조:

import type { NextApiRequest, NextApiResponse } from "next"
import { withSentry } from "@sentry/nextjs";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: "Akilesh" });
};

export default withSentry(handler);

테스트 🧪

모든 것이 제대로 작동하는지 확인하기 위해 프런트엔드 구성 요소에서 오류를 발생시키는 버튼 클릭 이벤트를 트리거합니다.

            <button type="button" onClick={() => {
              throw new Error("Sentry Frontend Error");
            }}>
              Throw error
            </button>

이제 sentry dashboard을 확인하여 오류 및 성능 메트릭에 대해 자세히 알아보십시오.

배포(Vercel) 🛫

next.js 프로젝트가 vercel에 배포되었다고 가정합니다.

vercel에서 프로젝트에 환경 변수를 추가합니다Project Settings > General > Environment Variables.
SENTRY_AUTH_TOKEN : .sentryclirc 파일에 표시될 센트리 인증 토큰이 있는 환경 변수에 있습니다.

센트리를 웹 애플리케이션 🥳과 성공적으로 통합했습니다. Slack 및 Vercel 통합에서 알림을 받으려면 🔔 여기를 확인하세요.