Error catching method using Sentry
주절
인피덕이다. 메생 첫 검은 마법사 격파에 성공했다. 야호~
검멘.. 그곳에서 편히 잠드소서.. (글 작성 시점 기준 2번 잡았으니 6개월 지나야 해방)
당신의 서비스, 어떤 에러가 어떻게 발생하는지 모두 파악할 수 있냐구 츄?
사내 새로운 서비스가 오픈되고 나름 여러 가지 에러와 이슈들이 발생했다.
하지만 그동안 에러 모니터링 등등을 제대로 하지 못했었고, (이유: 트래픽이 그만큼 많이 없.. 크흠)
운영 배포 후 구경하다가 어? 이거 제대로 안 나오네요 ^^ 라고 하는 셀프 QA도 종종 있었기에
프론트 프로젝트 모니터링 및 에러 관리의 필요성을 느끼게 되어 Sentry 찍먹을 진행하게 되었다.
여러분도 센트리 츄라이~
Sentry 로긘
Sentry에 들어가서 회원 가입 끼끼
organization 만들기
로그인하면 새 조직을 만들라는 화면이 뜰 수도 안 뜰 수도 있는데 아마 새삥 계정이면 이 화면이 나타날 것이다.
원하는 org 이름과 location을 선택하자 필자는 US로 했다구 츄
약관에 동의 해주고 create!
센츄리 프로젝트 만들기
조직을 만들었다면 프로젝트까지 셋업 하라는 센트리의 재촉을 볼 수 있다.
인피덕 프로젝트는 next.js와 typescript를 쓰는 프로젝트이므로 next.js를 선택,
여러분들은 사용하는 플랫폼을 선택하면 된다.
이 글은 next.js로 셋업하는 튜토리얼을 제공할 것임
근데 다른 플랫폼도 소개할 방법이랑 크게 다르지는 않을 듯
알림에 대한 설정과 프로젝트 이름까지 지정하면 완료끼끼
Sentry 내부에서의 기본적인 세팅은 끝났다 야호
프로젝트 세팅
회원 가입을 완료했다면 프로젝트 코드로 넘어와서 세팅 끼끼
방법은 크게 어렵지 않다! 이 글만 차례대로 따라간다면 당신도 센츄리 기본 세팅 마스터!
-
Sentry Wizard (SaaS)
-
Sentry 수동 세팅 (SaaS)
의 순서로 설명할 예정이니 차근차근 알아보도록 하자구 츄~
Sentry 라이브러리 설치
먼저 필요한 라이브러리,
@sentry/nextjs, @sentry/wizard, @sentry/webpack-plugin (devDependencies)를 설치해 주자.
// package.json
{
...,
"@sentry/nextjs": "^8.28.0",
"@sentry/wizard": "^3.27.0",
},
// sentry에 source map을 자동으로 업로드 하는 라이브러리
"devDependencies": {
...,
"@sentry/webpack-plugin": "^2.22.4",
}
Sentry Wizard로 세팅
아주 간편한 방법이다. 딸깍만 해도 센츄리가 당신의 프로젝트에 쏙
일단 wizard를 실행시켜야 하니까 다음의 명령어를 입력해 보자.
npx @sentry/wizard
어라? CommonJS 모듈 관련 에러가 발생한다면?
/.../node_modules/cliui/build/index.cjs:291
const stringWidth = require('string-width');
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/string-width/index.js from /.../node_modules/cliui/build/index.cjs not supported.
Instead change the require of index.js in /.../node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/.../node_modules/cliui/build/index.cjs:291:21)
at Object.<anonymous> (/.../node_modules/yargs/build/index.cjs:2861:12)
at Object.<anonymous> (/.../node_modules/yargs/index.cjs:5:30)
at Object.<anonymous> (/.../node_modules/@sentry/wizard/dist/bin.js:34:31) {
code: 'ERR_REQUIRE_ESM'
}
Node.js v18.20.2
왓..
ESM이요…?
해결 방법
아마 위에 작성된 라이브러리 3개를 모두 설치했다면 에러가 안 날 건데,
@sentry/webpack-plugin 설치가 빠지면 저 에러가 발생하는 걸로 보인다.
아래는 시도했던 방법들…
-
노드 버전을 20으로 올려서 진행 -> 동일한 에러 발생
-
그 외
node_modules내부의 파일을 직접 수정? -> 별로인 것 같아 하지 않음
관련된 상세 내용은 조금 더 알아볼 필요가 있..을 수도 있고 아닐 수도 있고 그럴 수도 있고(?)
다시 셋업으로 컴백
정상적으로 wizard 실행이 됐다면 아래와 같이 님 멀로 할 거? 선택지가 쭈루룩 나오는데,
여러분의 프로젝트에 맞게 선택하면 되겠다. (필자는 Next.js 선택)
┌ Sentry Wizard 3.27.0
│
◆ What do you want to set up?
│ ○ React Native
│ ○ iOS
│ ○ Android
│ ○ Cordova
│ ○ Electron
│ ● Next.js
│ ○ Remix
│ ○ SvelteKit
│ ○ Configure Source Maps Upload
└
다음으로는 님이 설치해서 직접 쓸 거? 돈 내고 쓸 거? 를 선택하는 부분인데
일단 default로 세팅할 거니까 돈 내고 쓰는 (안 내도 됨) SaaS를 선택해 주자.
┌ Sentry Next.js Wizard
│
◇ ────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ The Sentry Next.js Wizard will help you set up Sentry for your application. │
│ Thank you for using Sentry :) │
│ │
│ Version: 3.27.0 │
│ │
│ This wizard sends telemetry data and crash reports to Sentry. This helps us improve the Wizard. │
│ You can turn this off at any time by running sentry-wizard --disable-telemetry. │
│ │
├───────────────────────────────────────────────────────────────────────────────────────────────────╯
│
◆ Are you using Sentry SaaS or self-hosted Sentry?
│ ● Sentry SaaS (sentry.io)
│ ○ Self-hosted/on-premise/single-tenant
└
다음은 센트리 계정이 있냐고 물어보는 건데 우리는 앞서 계정을 만들어 두었으니 Yes를 선택해 주도록 하자 츄
◆ Do you already have a Sentry account?
│ ● Yes / ○ No
└
그러면 이제 자동으로 브라우저 창이 뜰 건데, 놀라지 말고 로그인 레고레고
만약 브라우저가 안 떴다면 콘솔 창에 나타나는 링크를 복붙해서 진행하면 된다링구 망고링구
● If the browser window didn't open automatically, please open the following link to log into Sentry:
│
│ https://sentry.io/account/settings/wizard/~~~/
│
◐ Waiting for you to log in using the link above
무사히 로그인을 진행했다면 알아서 auth-token을 발급한다! (당신의 아이디는 해킹되었다.)
◇ Login complete.
│
◇ Selected project 여러분의_ORG/여러분의_PROJECT
로그인/토큰 관련 기초 작업 끗!
아직 안 끝났다 선택 옵션들 확인해 줘.. 가지마..
다음으로는 이제 프로젝트 내부 코드에 sentry 관련 파일을 추가하고 수정하는 작업을 진행할 것임 끼끼
어렵지 않으니 마지막까지 힘내보자구 츄~
아래는 센츄리 최신 버전으로 갈아엎을 것임? 인데 이미 체신 버전이 설치됐으므로 PASS
◆ The @sentry/nextjs@^8 package is already installed. Do you want to update it to the latest version?
│ ○ Yes / ● No
└
요 내용은 이제 브라우저에서 에러가 발생했을 때 Sentry에 해당 에러가 바로 전달 되는데,
몇몇 광고 차단 되는 것들이나 뭐 브라우저 도구를 쓰면 에러가 안 날아갈 수도 있으니 Next.js 에서 Sentry로 보낼 거냐는 것
일단은 우리 서비스에 굳이? 싶은 내용이기도 하고 아마 미들웨어 쪽에 추가적인 설정이 필요해 보여서 따로 설정하진 않았다!
마찬가지로 PASS
(필요시 선택 사항이니 여러분들은 체크해도 된다구 츄)
◆ Do you want to route Sentry requests in the browser through your Next.js server to avoid ad blockers?
│ ○ Yes (Can increase your server load and hosting bill)
│ ● No
└
아래는 컴포넌트 관련 내용을 번들에 추가해 가지고~ 그래서 나중에 센츄리에서 확인할 때 조금 더 보기 쉽게 할 거냐는 뜻이고~
번들 크기가 증가한다는 월닝 이 있지만 필자는 Yes를 선택
◆ Do you want to enable React component annotations to make breadcrumbs and session replays more readable?
│ ● Yes (Annotates React component names - increases bundle size)
│ ○ No
└
요놈은 서비스 성능 저하의 범인을 잡아라 걸리면 바로 코드 리팩토링
을 할 수 있도록 트래킹 할 거냐는 내용이다.
이 역시 필자는 Yes를 선택했다.
◆ Do you want to enable Tracing to track the performance of your application?
│ ● Yes (recommended)
│ ○ No
└
마지막 선택 사항! Session Replay 쓸 거냐는 내용인데
저번에 한 번 보니까 사용자의 이동 경로?를 따라가며 어디서 에러가 발생했는지 캐치가 가능해서 좋았다. 싱기방기스
그래서 이것도 Yes
◆ Do you want to enable Sentry Session Replay to get a video-like reproduction of errors during a user
session?
│ ● Yes (recommended, but increases bundle size)
│ ○ No
└
진짜 거의 다 왔다 config를 세팅해 보자
필자는 기존에 wizard 없이 세팅한 적이 있어서
◆ Found existing Sentry server config (sentry.server.config.ts). Overwrite it?
│ ● Yes / ○ No
└
기존 파일을 삭제하고 wizard가 제공하는 파일로 대체할 거냐는 뜻
확인해 보니 어차피 내용은 같았지만 일단 wizard가 제공하는 걸로 선택
파일의 내용은 아래 wizard 없이 세팅 쪽을 참고하면 된다!
▲ Removed existing sentry.server.config.ts.
│
◆ Created fresh sentry.server.config.ts.
마찬가지로 sentry.client.config.ts, sentry.edge.config.ts 부분!
동일하게 Yes로 선택했다 츄
◆ Found existing Sentry client config (sentry.client.config.ts). Overwrite it?
│ Yes
│
▲ Removed existing sentry.client.config.ts.
│
◆ Created fresh sentry.client.config.ts.
◇ Found existing Sentry edge config (sentry.edge.config.ts). Overwrite it?
│ Yes
│
▲ Removed existing sentry.edge.config.ts.
│
◆ Created fresh sentry.edge.config.ts.
다음 선택지는 instrumentation.ts 파일도 생성한다는 것
런타임에 따라 어떤 설정 파일을 사용할 것인지 명시해 주는 역할을 하는 친구이다. 끼끼
◇ Add the following code to your instrumentation.ts file:
// instrumentation.ts
import * as Sentry from '@sentry/nextjs';
export async function register() {
if (process.env.NEXT_RUNTIME === 'nodejs') {
await import('../sentry.server.config');
}
if (process.env.NEXT_RUNTIME === 'edge') {
await import('../sentry.edge.config');
}
}
export const onRequestError = Sentry.captureRequestError;
//
│
◆ Did you apply the snippet above?
│ ● Yes, continue!
└
다음은 next.config.mjs 파일과 관련된 부분!
이 역시도 기존에 next.config 파일이 있기 때문에 sentry 관련 코드를 추가하라는 뜻이다.
◆ next.config.mjs already contains Sentry SDK configuration. Should the wizard modify it anyways?
│ ● Yes / ○ No
└
아까 위에서 선택했던 내용이 아래 wizard가 주는 코드에 잘 반영된 걸 볼 수 있다.
● Please put the following code snippet into next.config.mjs: You probably have to clean it up a bit.
│
// next.config.mjs
import { withSentryConfig } from "@sentry/nextjs";
export default withSentryConfig(
yourNextConfig,
{
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options
org: "여러분의_ORG",
project: "여러분의_PROJECT",
// Only print logs for uploading source maps in CI
silent: !process.env.CI,
// For all available options, see:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
// Upload a larger set of source maps for prettier stack traces (increases build time)
widenClientFileUpload: true,
// Automatically annotate React components to show their full name in breadcrumbs and session replay
reactComponentAnnotation: {
enabled: true,
},
// Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
// This can increase your server load as well as your hosting bill.
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
// side errors will fail.
// tunnelRoute: "/monitoring",
// Hides source maps from generated client bundles
hideSourceMaps: true,
// Automatically tree-shake Sentry logger statements to reduce bundle size
disableLogger: true,
// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
// See the following for more information:
// https://docs.sentry.io/product/crons/
// https://vercel.com/docs/cron-jobs
automaticVercelMonitors: true,
}
);
//
│
◆ Are you done putting the snippet above into next.config.mjs?
│ ● Yes / ○ No, get me out of here
└
해당 내용을 복사해서 기존 next.config 파일에 추가해 주고 완료됐으면 Yes를 선택하자 츄
다음으로 넘어갔더니 에러 페이지도 착실히 Sentry 처리를 하라고 아예 코드를 준다..
말 잘 들어야 나중에 센츄리한테 안 혼나니까 해당 내용을 추가해 주자.
파일 경로는 src/pages/_error.tsx 이다.
● It seems like you already have a custom error page.
│
│ Please put the following function call in the getInitialProps
│ method of your custom error page at src/pages/_error.tsx:
import * as Sentry from '@sentry/nextjs';
import Error from "next/error";
// Replace "YourCustomErrorComponent" with your custom error component!
YourCustomErrorComponent.getInitialProps = async (contextData) => {
await Sentry.captureUnderscoreErrorException(contextData);
// ...other getInitialProps code
return Error.getInitialProps(contextData);
};
│
◇ Did you modify your src/pages/_error.tsx file as described above?
│ ● Yes / ○ No, get me out of here
└
마찬가지로 해당 내용 추가 후 Yes를 선택해 주자.
아래는 이제 센츄리로 에러를 보낼 수 있는 테스트 페이지를 만들어 준다는 내용이다.
아마 요 내용 없이 그냥 프로젝트에서 에러 발생시켜도 잘 올라갈 것이기 때문에 필자는 PASS
선택 사항이니 테스트가 필요하면 Yes를 선택하는 것도 나쁘지 않으니 편한 대로 선택하면 된다링고 망고링구
◆ Do you want to create an example page ("/sentry-example-page") to test your Sentry setup?
│ ○ Yes (Recommended - Check your git status before committing!)
│ ● No
└
다음으로는 아까 브라우저 띄워서 로그인했을 때 wizard에서 자동으로 만들어 줬던 AUTH_TOKEN 부분인데
이 내용을 외부에 공개하면 안 되니까 .env 파일 안에 적어 뒀으니 꺼내서 쓰라는 내용이다. 끼끼
친절히 .gitignore 에도 추가해 준 걸 볼 수 있다.
◆ Created .env.sentry-build-plugin with auth token for you to test source map uploading locally.
│
◆ Added .env.sentry-build-plugin to .gitignore.
아래는 생성된 .env.sentry-build-plugin 파일의 내용이다.
쏘 SIMPLE하게 AUTH_TOKEN만 들어있는 걸 확인할 수 있다.
# .env.sentry-build-plugin
# DO NOT commit this file to your repository!
# The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
# It's used for authentication when uploading source maps.
# You can also set this env variable in your own `.env` files and remove this file.
SENTRY_AUTH_TOKEN=여러분의_AUTH_TOKEN
여러분이 진행하고 있는 프로젝트 안의 개별 .env 파일에 해당 내용을 넣어주고
요 파일은 삭제해 주면 아주 깰끔스하게 프로젝트 관리가 가능하다.
다음은 CI/CD 따로 사용하는 게 있냐는 부분인데..
필자는 일단 로컬에서 빌드 후 실행해서 에러가 캐치 되는지 확인할 것이기 때문에 PASS
◆ Are you using a CI/CD tool to build and deploy your application?
│ ○ Yes (I use a tool like GitHub Actions, GitLab, CircleCI, TravisCI, Jenkins, Vercel, ...)
│ ● No
└
그랬더니 wizard로 센츄리 셋업하기 끗!
길고 긴 여정이었다. 고생 많았다 제군들 따따봉
실행 이후의 내용은 Sentry Wizard 없이 세팅 밑 부분으로 바로 짬프하면 된다.
아니면 밑의 내용도 그냥 봐줘잉
Sentry Wizard 없이 세팅
wizard를 사용하는 것과 거의 동일한 내용이긴 한데
일단 처음에 이 방법으로 진행했기 때문에 기록 용도로 작성해 본다.
next.config 설정
yarn(혹은 npm)으로 위의 패키지를 설치했다면, config에 Sentry 관련 내용을 추가해 주자.
import { withSentryConfig } from "@sentry/nextjs"
...
// withSentryConfig 요 녀석이 따로 세부 내용을 설정하지 않아도 default 값으로 알잘딱깔센 세팅해 준다.
// config: 기존에 사용하던 nextConfig
export default withSentryConfig(config, {
org: "여러분의_ORG",
project: "여러분의_PROJECT",
authToken: "Settings/DEVELOPER SETTINGS/Auth Tokens에서 발급 가능",
// 빌드 시 로그에 source map 업로드 관련 로그가 출력되도록 함
silent: false;
// 릴리즈 관련 정보 (필수 값은 아님)
release: {
create: boolean; 조건에 따라 release 생성 안 되게 할 수 있음
finalized: bolean; create 값이랑 맞춰야 함 아니면 릴리즈 정보가 없는데 릴리즈 세팅 마무리하다가 에러 남
},
// 소스맵 관련 정보 (필수 값은 아님)
sourcemaps: {
disabled: boolean; 조건에 따라 소스맵 안 올라가게 할 수 있음
}
});
sentry.config 설정
sentry.client.config.ts 파일과 sentry.server.config.ts 파일을 생성해 줘야 한다.
프로젝트 최상단 경로(next.config.mjs와 같은 경로)에 아래 두 개의 파일을 추가해 주도록 하자.
dsn은 센트리 홈페이지에서 프로젝트를 세팅하면 자동으로 발급해 준다.
아직 발급을 받지 못했다면 위의 센츄리 프로젝트 만들기를 참고해 줍시다잉
// sentry.client.config.js
import * as Sentry from "@sentry/nextjs"
Sentry.init({
dsn: "여러분의_DSN",
// 사용자가 브라우저에서 상호작용 하는 걸 기록했다가 에러가 발생하면 해당 기록 재현
integrations: [
Sentry.replayIntegration()],
Sentry.captureConsoleIntegration({
levels: ["error", "warn"], // console error와 warn 감지
}),
],
// 트랜 잭션 수집 범위 (0 ~ 1.0)
tracesSampleRate: 1.0,
// 사용자의 상호작용 기록 수집 범위 (0 ~ 1.0)
replaySessionSampleRate: 0.1,
// 오류 발생 시만 기록할 것인지 (0 ~ 1.0)
replayOnErrorSampleRate: 1.0
});
// sentry.client.config.ts
const Sentry = require("@sentry/nextjs");
Sentry.init({
dsn: "여러분의_DSN",
// 트랜 잭션 수집 범위 (0 ~ 1.0)
tracesSampleRate 1.0
})
CSP 설정?
혹시나 프로젝트에 CSP 관련 설정을 해놓았다면 Sentry를 추가해야 한다.
추가 안 하면 리소스 못 가져와서 열심히 세팅한 센츄리 츄라이 못 함 나도 알고 싶지 않았어..
필자의 프로젝트에는 해당 설정이 있어 CSP 헤더에 sentry.io 내용을 추가해 줬다. 끼끼
...
https://여러분의_VALUE.ingest.us.sentry.io;
# report-to를 사용하면 센츄리에 JSON 형식으로 CSP 위반 사항, 네트워크 오류 등을 보고할 수 있다고 한다.
report-to https://여러분의_도메인.ingest.us.sentry.io/api/여러분의_API_VALUE/security/?sentry_key=여러분의_SENTRY_KEY;
...
진짜 진짜 찐 센트리 세팅 끗
테스트
테스트 방법은 어렵지 않다.
로컬에서 테스트
위의 세팅을 다 완료했다면 yarn dev로 프로젝트를 로컬에서 띄워보자 츄
yarn dev는 next.js 기준, default로 프로젝트를 실행하는 명령어이기 때문에
여러분의 프로젝트에서 사용하는 명령어로 프로젝트를 띄우면 된다!
이제 로컬로 프로젝트에 접속한 후 에러를 발생시켜 보면?
센트리 대시보드에 해당 에러 내역이 쭈루룩 올라가는 걸 볼 수 있을 것임!
빌드 테스트
로컬 테스트와 크게 다르지 않다 레고레고 yarn build로 프로젝트 빌드 레고레고
로컬과 마찬가지로 yarn build는 next.js 기준 default 빌드 명령어이다!
여러분의 커스텀 빌드 명령어가 있다면 그걸 사용하면 된다 츄
빌드가 완료됐다면 yarn start 명령어로 빌드된 프로젝트를 로컬에 띄워보고,
에러를 발생시키면 센트리 대시보드에서 확인이 가능할 것임!
주절
테스트 목적을 위한 글이라 모두 프로젝트 실행, 빌드 파일 모두 로컬에서 테스트하는 방법으로 작성했다.
프로덕션에서 빌드된 파일도 위와 동일하거나 크게 다르지 않을 것이니 유연하게 대응하면 된다링구 망고링구
어떤 에러가 감지 되는감자?
console 에러
만약 여러분이 sentry.client.config.js 파일 안에 아래 코드 부분을 추가한 후 세팅을 완료했다면,
...
Sentry.captureConsoleIntegration({
levels: ["error", "warn"], // console error와 warn 감지
}),
...
콘솔에 찍히는 에러가 여러분의 센트리 대시보드에 보일 것이다. (옆에 console 표시가 있는 상태)
굿
Sentry에서 지원하는 에러 캐치 방법
만약 콘솔에 에러가 찍힐 일이 없다면 그럴 거 같죠? 어떻게든 하나는 찍힘
^^ 아래 몇 가지의 센트리 에러 캐치 메소드를 사용해서 에러를 찍으면 에러가 감자된다.
captureException
에러 발생 시 수동으로 에러를 센트리에 전달할 수 있는 가장 간단한 방법으로,
아주 아주 심플하게 try-catch 문에서 에러 캐치 시 사용해볼 수 있겠다. 끼끼
가장 보편적으로 사용해도 될 듯
try {
throw "그냥 에러 발생시킴 captureException test";
} catch (e) {
captureException(e);
}
센츄리에서 확인한 화면 ->
captureMessage
요건 그냥 일반 텍스트를 센트리로 보내는 방법이다 츄
에러 말고 그냥 텍스트 자체를 센트리에 보내고 싶을 때 사용해도 좋겠다. 그럴 일이 있을지는 의문
옆에 표시가 퍼렁색으로 뜨는 안전한 녀석이다.(?)
captureMessage("captureMessage test");
안전한 캡쳐
captureEvent
다음으로는 에러 객체를 만들어서 센츄리에 떤질 수 있는 녀석이다.
extra 항목에 값을 넣으면 센츄리 대시보드 상세 페이지에서 Additional Data 항목으로 확인할 수 있다.
captureEvent({
message: "captureEvent test",
level: "error",
extra: { key: "value" } // 추가 정보
});
리스트에 보이는 화면
해당 에러의 상세 페이지 Additional Data 화면
setUser
요걸 사용하면 어떤 사용자가 에러를 발생시켰는지 확인할 수 있도록 로그에 사용자 정보를 추가할 수 있다. 끼끼
누가누가 에러 발생시키나 확인 가능 ! 프로젝트 블랙 리스트 등록 가능 !
$실시간 상담$ —-> https://infiduk.github.io
Sentry.setUser({
id: "123456",
username,
email
});
아이디가 123456인 사용자가 발생시킨 에러 검색 가능 (넌 주겄다)
등등 여러 에러를 센트리에 보낼 수 있는 방법이 있으니 활용하면 된다!
소스맵이 제대로 올라가지 않는 이슈
센트리에 올라온 이슈를 확인하다가 In App 코드가 잘 나오는 이슈도 있고 그렇지 않은 이슈도 있는 걸 발견한 인피덕
그렇지 않은 이슈 중 아래와 같은 이슈들이 몇몇 있었다.
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 왜 안 나와
해당 내용을 좀 더 알아보니..
Stack Frame Not Matching Artifact Name
The path for this stack frame is app:///_next/static/chunks/pages/_app-d1fdb29efdc32ed8.js and the release value for this event is 여러분의_RELEASE_NAME
Sentry was not able to find a file in the release's artifacts that matches one of the following paths:
app:///_next/static/chunks/pages/_app-d1fdb29efdc32ed8.js
~/_next/static/chunks/pages/_app-d1fdb29efdc32ed8.js
This event doesn't have a dist value. Please check that you uploaded your artifacts without dist value.
If the stack frame path is changing based on runtime parameters, you can use the RewriteFrames integration to dynamically change the stack frame path.
릴리즈와 소스맵이 올라가긴 했는데 dist 값이 없어서 못 찾는다고 하는 내용인 듯싶다.
또는 Debug ID가 맞지 않아서 발생할 수도 있다고 한다! 광광 광어우럭흙흙
next.config 수정
그러면 센츄리에서 알려준 대로 가장 심플한 방법을 선택해 보자 끼끼
릴리즈 시 dist 값이 들어가도록 next.config를 수정해 보자 츄
기존 next.config release 부분을 약간 수정해서 dist 값과 release name까지 명시해 봤다.
...
release: {
create: boolean; 조건에 따라 release 생성
finalized: bolean; create 값이랑 맞춰야 함
name: "여러분의_RELEASE_NAME",
// 빌드 시 어떤 서버 환경인지 어떤 빌드인지 구분
dist: "여러분의_BUILD_ENVIRONMENT/여러분의_BUILD_VERSION"
},
...
그 후 다시 빌드를 진행하고 센츄리 상에서 release를 확인해 봤을 때,
dist 값은 잘 들어갔으나.. 해당 에러는 동일하게 발생했다. FAIL
sentry-cli 사용
사실 맨 처음에 수동으로 센트리를 설정했었고, 소스맵 이슈로 인해 sentry-cli를 사용했던 건데
sentry-cli를 사용했음에도 동일하게 소스맵을 찾지 못해서 이 방법도 FAIL
source map.. 왜 나에게 이런 시련을..
위의 방법에 추가로 rewriteFrames을 사용해서
센츄리에 업로드되는 파일 경로와 파일명을 변경했음에도 계속 소스맵을 찾지 못했다.
이 이슈와 관련해서는 조금 더 찾아봐야 할 것 같다는 결론으로 일단 마무리..
혹시 해결 방법을 발견하신 분이 계신다면 공유 부탁드립니다 (__) 집단지성으ㅣ 힘 따따봉
2탄도 봐줘잉
다음 편은 self-hosted 버전으로 센츄리를 세팅하는 방법에 대해 알아볼 예정이다!
제발 인피덕 2탄 빨리빨리 올려라 5천만명 대한민국 국민이 기다리고 있다! (아님)
참고
- Chat GPT