[INIT] Sentry & 디스코드 웹훅 초기 세팅

[ehye1]

ISSUE 🔗

close #24

What is this PR? 🔍

apps/timo-web에 Sentry SDK를 연동하고, 에러 발생 시 Discord로 알림이 전송되는 파이프라인을 구축했습니다.

Sentry를 도입한 이유

배포 후 유저가 에러를 만나도 개발자가 인지할 방법이 없었습니다. Sentry는 단순한 에러 로그와 달리 누가(유저 환경), 언제, 어디서(파일·라인), 왜(스택 트레이스) 에러가 났는지 한눈에 확인할 수 있어 도입했습니다.

에러 전송 흐름

브라우저 / 서버 / 엣지에서 에러 발생
        ↓
Sentry SDK 자동 감지 및 수집
        ↓
Sentry 대시보드 확인
        ↓
Alert Rule 조건 충족 시 Discord #웹-에러알림 알림 전송

파일 구성

Next.js는 코드가 실행되는 환경이 브라우저, 서버(Node.js), 엣지로 나뉘기 때문에 각각 초기화 파일을 분리했습니다.

파일	역할
instrumentation-client.ts	브라우저 런타임 Sentry 초기화
instrumentation.ts	서버 시작 시 런타임 판단 후 맞는 설정 파일 로드
sentry.server.config.ts	Node.js 서버 런타임 Sentry 초기화
sentry.edge.config.ts	Edge 런타임 Sentry 초기화
app/global-error.tsx	App Router 전역 에러 바운더리, 에러 Sentry 전송
next.config.js	빌드 시 Sentry 연결 및 source map 업로드 설정

구현 시 고려한 사항

DSN 없으면 초기화하지 않음
DSN 체크 없이 Sentry.init()을 호출하면 DSN이 없는 환경에서 콘솔 경고가 발생합니다. 클라이언트뿐 아니라 서버·엣지 설정에도 동일하게 적용해 일관성을 맞췄습니다.

const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN;
if (dsn) {
  Sentry.init({ dsn, environment: ... });
}

NODE_ENV 대신 NEXT_PUBLIC_SENTRY_ENVIRONMENT 사용
NODE_ENV는 development / production 두 가지만 존재해 preview 환경을 구분할 수 없습니다. 별도 환경변수로 local / preview / production을 세분화했습니다.

server와 edge 설정 파일 분리
현재는 두 파일의 코드가 동일하지만, 미들웨어가 추가되면 edge 환경에서 별도 설정이 필요할 수 있어 미리 분리해두었습니다.

Discord 연동 방식
처음에 Legacy Webhooks를 사용했으나 Sentry가 보내는 JSON 포맷과 Discord 웹훅이 받는 포맷이 달라 전송이 실패했습니다. Sentry 공식 Discord Integration + Internal Integration 방식으로 전환해 해결했습니다.

To Reviewers

• environment 기본값을 local로 설정했습니다. production / preview 값은 배포 환경변수에서 주입해야 Sentry에서 환경별로 분리됩니다.
• DSN은 .env.local에서 관리하며 git에 올라가지 않습니다. 팀원 각자 로컬에서 .env.local에 DSN을 추가해야 Sentry가 동작합니다.
• SENTRY_AUTH_TOKEN이 없어 source map 업로드는 현재 동작하지 않습니다. CI/CD 설정 시 함께 추가할 예정입니다.
• axios interceptor 에러 핸들링 확정 후 httpMethod, httpStatusCode 등 Sentry 태그를 붙여 Discord 알림에 상세 정보를 포함할 예정입니다.

Screenshot 📷

Test Checklist ✔

• 브라우저 에러 발생 시 Sentry 대시보드 이슈 수집 확인
• Discord #웹-에러알림 채널 알림 수신 확인
• DSN 없을 때 Sentry 초기화 안 되는 것 확인
• pnpm build — 미실행: CI에서 확인 예정
• source map 업로드 — SENTRY_AUTH_TOKEN 설정 후 별도 확인 예정

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: e8ce2111-3801-4feb-9ba3-2383d81161bb

📥 Commits

Reviewing files that changed from the base of the PR and between 71ed0ff and c78d951.

📒 Files selected for processing (1)

• apps/timo-web/app/global-error.tsx

---

Walkthrough

Sentry Next.js 연동을 위해 의존성, 빌드 설정, 런타임 초기화, 전역 오류 화면을 추가했습니다. 클라이언트 라우팅과 서버/엣지 요청 오류가 Sentry로 전달되고, 전역 오류 화면은 재시도 동작을 제공합니다.

Changes

Sentry 초기화와 오류 캡처

Layer / File(s)	Summary
패키지와 빌드 환경 apps/timo-web/package.json, turbo.json, apps/timo-web/next.config.js	@sentry/nextjs 의존성이 추가되고, Turbo globalEnv에 Sentry 관련 환경 변수가 포함되며, next.config.js가 withSentryConfig(nextConfig, ...)로 감싸진다.
클라이언트 계측 apps/timo-web/instrumentation-client.ts	NEXT_PUBLIC_SENTRY_DSN/NEXT_PUBLIC_SENTRY_ENVIRONMENT로 Sentry를 초기화하고 onRouterTransitionStart를 라우터 전환 캡처 함수로 노출한다.
서버와 엣지 계측 apps/timo-web/instrumentation.ts, apps/timo-web/sentry.server.config.ts, apps/timo-web/sentry.edge.config.ts	instrumentation.ts가 register()와 onRequestError를 내보내며, NEXT_RUNTIME에 따라 서버/엣지 Sentry 설정을 동적 import 한다. 두 설정 파일은 DSN이 있을 때만 초기화된다.
전역 오류 화면 apps/timo-web/app/global-error.tsx	GlobalError가 useEffect에서 전달된 error를 Sentry.captureException으로 보내고, reset 버튼을 렌더링한다.

Sequence Diagram(s)

sequenceDiagram
  participant NextRuntime
  participant instrumentation.ts
  participant sentry.server.config.ts
  participant sentry.edge.config.ts
  participant Sentry

  NextRuntime->>instrumentation.ts: register()
  instrumentation.ts->>sentry.server.config.ts: import when NEXT_RUNTIME=serverjs
  instrumentation.ts->>sentry.edge.config.ts: import when NEXT_RUNTIME=edge
  sentry.server.config.ts->>Sentry: init with DSN and environment
  sentry.edge.config.ts->>Sentry: init with DSN and environment
  instrumentation.ts->>Sentry: captureRequestError

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• jjangminii
• yumin-kim2
• kimminna

참고 문서

• Next.js instrumentation
• Next.js global-error file convention
• Sentry Next.js SDK

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	Sentry 초기화와 전역 에러 처리는 반영됐지만, 이슈의 Discord 웹훅 URL 환경변수와 전송 유틸리티는 보이지 않습니다.	Discord 웹훅 URL 환경변수와 전송 유틸리티를 추가하거나, 실제 구현 범위에 맞게 이슈 설명을 Sentry 연동 중심으로 갱신하세요.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 Sentry와 Discord 알림 초기 세팅이라는 변경 핵심을 짧고 명확하게 담고 있습니다.
Description check	✅ Passed	설명이 Sentry 연동, 환경변수, Discord 알림 흐름을 직접 설명해 변경 내용과 잘 맞습니다.
Out of Scope Changes check	✅ Passed	추가된 파일들은 모두 Sentry 초기화, 에러 처리, 빌드 설정 범위에 있어 눈에 띄는 이탈 변경은 없습니다.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch init/web/24-sentry-discord-webhook

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

📦 번들 사이즈 리포트

🕐 Timo Web

라우트	크기	First Load JS	상태
/	0 B	205.20 kB	🟡
/login	0 B	205.20 kB	🟡
/signup	0 B	205.20 kB	🟡

공유 번들: 205.20 kB

---

🟢 정상 (<200kB) 🟡 주의 (<350kB) 🔴 초과 (≥350kB) — First Load JS 기준 (gzip 크기)

빌드 커밋: 7e83cc0

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/timo-web/app/global-error.tsx`:
- Line 17: The global error document root in global-error.tsx renders an <html>
element without a lang attribute, which triggers accessibility/lint issues.
Update the <html> in the global-error component to include an explicit language
code, using the existing document-root render path in global-error.tsx so screen
readers and Next.js linting are satisfied.

In `@apps/timo-web/next.config.js`:
- Line 11: The `silent: !process.env.CI` usage in `next.config.js` triggers
`no-undef` because `process` is not declared as a Node global in the current
ESLint setup. Fix this by adding `process` to the `languageOptions.globals`
override for `**/next.config.js` in the ESLint flat config, or by explicitly
importing `process` from `node:process` in `next.config.js` if that matches the
repo’s style. Use the `next.config.js` file and the ESLint config files
referenced by the current setup to keep the rule consistent.

In `@turbo.json`:
- Around line 4-10: `SENTRY_AUTH_TOKEN` is currently being treated as a hashed
build input via `globalEnv`, but it should be passed through only for Sentry
upload during build. Update the Turborepo config so `tasks.build.passThroughEnv`
includes `SENTRY_AUTH_TOKEN` and remove it from `globalEnv`, then keep
`withSentryConfig` reading it from `process.env.SENTRY_AUTH_TOKEN` so the
`build` task and Sentry upload flow still work without affecting cache keys.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 90c324bd-24ff-45df-b797-b48db7662638

📥 Commits

Reviewing files that changed from the base of the PR and between 14b6200 and d8ea5d5.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (8)

• apps/timo-web/app/global-error.tsx
• apps/timo-web/instrumentation-client.ts
• apps/timo-web/instrumentation.ts
• apps/timo-web/next.config.js
• apps/timo-web/package.json
• apps/timo-web/sentry.edge.config.ts
• apps/timo-web/sentry.server.config.ts
• turbo.json

[kimminna]

고생하셨어요!
.env 에 추가해야 할 값들은 노션 페이지 > 웹 > 자료 > .env 페이지에 공유해 주셔용

간단한 코멘트라 바로 어푸 남길게요!

[jjangminii]

Sentry에 대해 처음 알게 됐는데 잘 정리해주셔서 어떻게 동작할지 기대돼요-! 고생하셨어요 😊

간단한 코멘트 한 가지만 확인 부탁드려요!

[yumin-kim2]

Sentry 도입 이유부터 파일 구성, 고려한 사항까지 PR 설명이 너무 잘 정리돼 있어서 리뷰하기 편했어요.최고....👍
Discord 연동 삽질 과정도 공유해주셔서 나중에 참고하기 좋을 것 같아요. 수고하셨습니다-!!!✨