[25.04.22 / TASK-173] Refactor - 센트리 소스맵 이슈 해결 #30
Conversation
|
Caution Review failedThe pull request is closed. Walkthrough이번 변경에서는 Sentry 설정이 전반적으로 개편되고, Next.js의 소스맵 및 Webpack 관련 설정이 개선되었습니다. Sentry 관련 설정에서는 각 환경별로 Sentry 활성화 여부를 명확히 하였고, release 버전을 고정값으로 지정했으며, 샘플링 비율 및 기타 여러 옵션이 일관적으로 변경되었습니다. 또한 Next.js의 production 소스맵 생성이 활성화되고, Webpack의 devtool 설정이 빌드 환경에 따라 동적으로 지정되도록 수정되었습니다. Sentry 업로드 및 로깅 관련 옵션도 세분화되어 적용되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NextApp
participant Sentry
User->>NextApp: 요청
NextApp-->>Sentry: (production 환경 & enabled=true) 오류/트레이스 전송 (release='production', tracesSampleRate 고정)
NextApp-->>User: 응답
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
next.config.mjsOops! Something went wrong! :( ESLint: 8.57.1 ReferenceError: globals is not defined 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
.github/workflows/docker-publish.yaml (1)
25-25: 글로벌 설치 대신pnpm dlx사용을 고려해주세요.현재
npm install -g @sentry/cli로 Sentry CLI를 글로벌 설치하고 있는데, CI 속도를 위해 로컬로 설치하거나pnpm dlx @sentry/cli를 활용하는 것이 좋습니다.
- 글로벌 설치가 캐시되지 않아 워크플로우가 매번 동일 패키지를 다시 설치할 수 있습니다.
- 특정 버전을 고정하려면
@sentry/cli@버전형식으로 명시하세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.github/workflows/docker-publish.yaml(2 hunks)next.config.mjs(1 hunks)sentry.client.config.ts(2 hunks)sentry.edge.config.ts(1 hunks)sentry.server.config.ts(1 hunks)
🔇 Additional comments (11)
next.config.mjs (3)
7-7: 프로덕션 환경에서 브라우저 소스맵 비활성화 설정 추가프로덕션 환경에서 브라우저 소스맵을 비활성화하는
productionBrowserSourceMaps: false설정을 추가했습니다. 이는 Sentry에 소스맵을 직접 업로드하는 방식으로 전환하기 위한 적절한 설정입니다.
11-11: SVG 로더 설정 형식 변경SVG 로더 설정을 한 줄로 압축했습니다. 기능적으로는 동일하지만 가독성이 향상되었습니다.
13-16: 환경별 소스맵 생성 전략 구현개발 모드가 아닐 때 환경에 따라 다른 소스맵 생성 전략을 사용하도록 설정했습니다:
- 프로덕션 환경:
hidden-source-map(별도 파일로 소스맵 생성)- 기타 환경:
inline-source-map(번들에 소스맵 포함)이 설정은 Sentry와 함께 사용할 때 적절하며, 프로덕션에서는 소스맵을 숨기면서도 Sentry가 읽을 수 있도록 하는 접근 방식입니다.
sentry.edge.config.ts (2)
13-13: 트레이스 샘플링 비율 고정기존 환경별 조건부 샘플링 비율에서 고정값
0.05로 변경했습니다. 이는 모든 환경에서 일관된 샘플링을 제공합니다.
17-17: 프로덕션 환경에서만 Sentry 활성화
enabled: process.env.NODE_ENV === 'production'플래그를 추가하여 프로덕션 환경에서만 Sentry가 활성화되도록 설정했습니다. 이는 개발 및 테스트 환경에서 불필요한 오류 보고를 방지하는 좋은 방법입니다.sentry.server.config.ts (2)
12-12: 서버 트레이스 샘플링 비율 고정서버 측 트레이스 샘플링 비율을
0.1로 고정하여 클라이언트 및 엣지 구성과 일관된 접근 방식을 유지했습니다.
16-16: 프로덕션 환경에서만 서버 Sentry 활성화
enabled: process.env.NODE_ENV === 'production'플래그를 추가하여 클라이언트 및 엣지 구성과 동일한 방식으로 프로덕션 환경에서만 서버 Sentry를 활성화하도록 설정했습니다.sentry.client.config.ts (3)
12-12: 통합 배열 형식 개선Sentry 통합 배열 형식을 단일 라인으로 정리하여 가독성을 향상시켰습니다.
15-15: 클라이언트 트레이스 샘플링 비율 고정클라이언트 측 트레이스 샘플링 비율을 조건부 표현식에서 고정값
0.1로 변경했습니다. 이는 서버 측 구성과 일치하며 일관된 모니터링을 제공합니다.
27-27: 프로덕션 환경에서만 클라이언트 Sentry 활성화
enabled: process.env.NODE_ENV === 'production'플래그를 추가하여 서버 및 엣지 구성과 일관되게 프로덕션 환경에서만 클라이언트 Sentry를 활성화하도록 설정했습니다..github/workflows/docker-publish.yaml (1)
51-53: Sentry Org/Project 설정값 검증 요청
SENTRY_ORG: velog-dashboard2,SENTRY_PROJECT: vd-fe가 실제 Sentry 대시보드의 조직 및 프로젝트 슬러그와 일치하는지 다시 확인해주세요.
There was a problem hiding this comment.
크게 이견없습니다. 2 가지 정도 제안 사항이 있어요.
- 코드 레빗이 찝어준 바와 같이 릴리즈에 버저닝을 해야 디버깅할때 "언제" 배포 해서 "어느 때" 나온 이슈인제 추적하기 용이할 것 같아요.
- 더욱이 기준님, notion task 를 꼭 채워주세요. 기준님 아니면 다른 분들이 해당 내용에 대한 F/U 이 매우 힘듭니다. 특히 이런 task 는 다른 F/W 나 language 와 공유되는 부분이 아니라 철저하게 nextjs 에서만, 더욱이 nextjs 의 sentry 에서만 적용되는 부분이라서요!
너무 고생많으셨어요. 소스맵이 파악이 안되는 정확한 이유는 무엇이라고 봐야할까요?
혹시나 싶어 계속 조사해보니, 센트리 옵션 객체의 일부 속성값에 문제가 있어 정상 동작이 안 되는 경우가 있다는 말이 있어 해당 내용 반영하였습니다. 옵션 파일의 내용을 상세히 확인하지 못한 제 불찰일 듯 합니다. 우선 수정된 내용 마무리하고 빠르게 커밋하겠습니다!
|
옵션값을 수정하니 @sentry/nextjs 자체 소스맵 기능을 통해 정상적으로 소스맵이 업로드되는 것을 확인하였습니다!
🔥 변경 사항
센트리에 소스맵이 업로드되지 않던 이슈를 해결하였습니다.
빌드 직후의 업로드를 위해 깃 액션 파일을 일부 수정하였습니다.
🏷 관련 이슈
#173📸 스크린샷 (UI 변경 시 필수)
X
📌 체크리스트
Summary by CodeRabbit
신규 기능
버그 수정
문서화
스타일