feat: Sentry 에러 모니터링 도입

[iOdiO89]

작업 요약

• Sentry 에러 모니터링 도입 (web + app). 기존 Org에 web/app 프로젝트를 분리 생성했습니다.

작업 내용

어디서 수집되나

web

• 예측 못 한 uncaught 에러 (전역 자동)
• 에러 페이지 (global-error.tsx, error.tsx)
• API 에러 — axios 인터셉터에서 중앙 수집 (개별 호출마다 코드 추가 X)

app

• JS 에러 + 네이티브 크래시
• WebView 로드 실패 / HTTP 5xx
• 백그라운드 푸시(FCM) 핸들러
• 소셜로그인 요청 실패

수집되는 경우와 안 되는 경우

수집됨	수집 안 됨
서버 오류 (5xx)	4xx (400·401·403·404) — 예상된 흐름이라 제외
네트워크 오류	dev · 로컬 — production/staging 에서만 수집
uncaught 예외	브라우저 확장·요청 취소 등 노이즈
수동 captureError

Session Replay (에러 직전 화면 재생)

• web만 도입 (app은 에러/크래시만)
• 에러 난 세션만 녹화 (쿼터 절약)
• 이메일만 마스킹, 나머지는 노출 (디버깅용)
• 구글·카카오 로그인창은 녹화 안 됨 (다른 origin이라 원천 불가 → 비밀번호 안전)

알림 (Discord)

규칙	언제 오나
New Issue	새로운 종류의 에러가 처음 발생할 때
High Frequency	한 이슈가 하루 30건 넘게 발생할 때

알림에 environment / release / source 태그 + Replay 링크 포함.

설정

• production / staging 에서만 수집 (dev·로컬 off)
• Tracing off · PII 기본 마스킹 · Free 플랜
• 소스맵 CI 업로드 (web: Vercel / app: EAS)

스크린샷

연관 이슈

closes #289

Summary by CodeRabbit

• New Features
  • 앱과 웹 전반의 오류/예외 모니터링이 Sentry 연동으로 더 체계화되었습니다.
  • 로그인/API/WebView/라우팅/페이지 오류 및 백그라운드 메시지에서 오류 수집 범위와 조건이 개선되었습니다.
  • 오류 캡처 유틸과 세션 처리(사용자 컨텍스트 정리) 로직이 추가되었습니다.
• Bug Fixes
  • 5xx 및 네트워크 중심으로 안정적으로 보고되며, 응답 해석 실패도 명확히 처리됩니다.
• Style
  • 개인정보 마스킹(data-sentry-mask) 적용이 강화되었습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jul 6, 2026 2:13am

[github-actions]

No description provided.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 9f6aa0da-583c-48ae-8191-9efc732d049d

📥 Commits

Reviewing files that changed from the base of the PR and between db26985 and 7ac6161.

📒 Files selected for processing (1)

• apps/app/apis/postSocialLogin.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/app/apis/postSocialLogin.ts

---

📝 Walkthrough

Walkthrough

web과 app에 Sentry 초기화가 추가되고, 에러 캡처 유틸과 API/WebView/에러 바운더리 연동이 붙었습니다. 빌드 설정, 환경변수, 사용자 컨텍스트, 마스킹, 소스맵 관련 설정도 함께 변경되었습니다.

Changes

apps/app Sentry 연동

Layer / File(s)	Summary
captureError 유틸 및 환경 타입 apps/app/utils/captureError.ts, apps/app/types/env.d.ts	Sentry.captureException을 감싼 captureError 함수와 tags/extra 컨텍스트 타입, EXPO_PUBLIC_STAGE/DSN 환경변수 타입이 추가됨.
초기화와 빌드 설정 apps/app/index.js, apps/app/app/_layout.tsx, apps/app/app.json, apps/app/metro.config.js, apps/app/package.json	앱 엔트리에서 Sentry.init과 FCM 백그라운드 예외 캡처가 추가되고, RootLayout이 Sentry.wrap으로 감싸지며, Expo plugin/Metro config/의존성이 갱신됨.
소셜 로그인과 WebView 오류 캡처 apps/app/apis/postSocialLogin.ts, apps/app/app/index.tsx	소셜 로그인 fetch/JSON 실패와 5xx 응답, WebView 네이티브 로드 실패와 HTTP 5xx 오류를 captureError로 수집하도록 변경됨.

apps/web Sentry 연동

Layer / File(s)	Summary
captureError 유틸 apps/web/src/utils/captureError.ts	Sentry.captureException 기반 captureError 함수와 컨텍스트 타입이 추가됨.
클라이언트, 서버, 엣지 초기화 apps/web/instrumentation-client.ts, apps/web/sentry.server.config.ts, apps/web/sentry.edge.config.ts, apps/web/instrumentation.ts	환경별 Sentry 초기화와 register/onRequestError 훅이 구성되고, 리플레이·마스킹·노이즈 필터·트레이싱 설정이 추가됨.
next.config와 빌드 설정 apps/web/next.config.mjs, apps/web/package.json, turbo.json, apps/web/.gitignore	withSentryConfig 래핑, @sentry/nextjs 의존성, 빌드 env, .env.example 예외 규칙이 추가됨.
API 인터셉터 에러 캡처 apps/web/src/apis/client.ts, apps/web/src/apis/server.ts	5xx/네트워크 오류만 선별해 captureError로 보고하고, 401 실패 시 Sentry 사용자 컨텍스트를 해제함.
에러 바운더리와 사용자 컨텍스트 apps/web/src/app/error.tsx, apps/web/src/app/global-error.tsx, apps/web/src/hooks/useGetMe.ts, apps/web/src/app/mypage/_components/ProfileSection.tsx, apps/web/src/app/mypage/_hooks/usePostLogout.ts	에러 바운더리에서 Sentry.captureException 호출이 추가되고, 사용자 id 설정/해제와 이메일 마스킹이 적용됨.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

• depromeet/PIKI-Client#28: apps/web/src/apis/client.ts와 apps/web/src/apis/server.ts의 axios 인스턴스/인터셉터 구조 위에 Sentry 보고가 추가되었습니다.
• depromeet/PIKI-Client#98: apps/web/src/apis/client.ts의 401/refresh 실패 처리 흐름과 직접 맞닿아 있으며, 이번 변경은 그 지점에 Sentry 사용자 해제와 에러 수집을 더합니다.
• depromeet/PIKI-Client#225: apps/web/src/apis/client.ts의 401 리프레시 실패 흐름과 동일한 코드 경로를 다룹니다.

Suggested reviewers: soyeong0115, ychany

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	핵심 Sentry 연동과 web replay, 소스맵은 반영됐지만 새 이슈 알림/Replay 링크 통합이 없어 요구사항을 모두 충족하지 못합니다.	Discord/Slack 알림 통합과 Replay 링크 첨부, app EAS 소스맵 업로드를 추가해 요구사항을 완성하세요.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 Sentry 에러 모니터링 도입이라는 핵심 변경을 간결하게 요약합니다.
Out of Scope Changes check	✅ Passed	변경점은 Sentry 연동, 환경변수, 소스맵, 에러 캡처 범위에 머물러 있어 뚜렷한 무관 변경은 없습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (4)

apps/app/types/env.d.ts (1)

8-10: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

리터럴 유니온 타입으로 좁히는 것을 고려해보세요.

주석에 명시된 production | staging | dev 값을 타입에도 반영하면, 이 값을 참조하는 TypeScript 코드(향후 .ts/.tsx에서 비교 시)에서 오타를 컴파일 타임에 잡을 수 있습니다. 현재는 apps/app/index.js(plain JS)에서만 참조되고 있어 당장의 이득은 제한적입니다.

♻️ 제안

     /** 배포 환경: production | staging | dev */
-    EXPO_PUBLIC_STAGE: string;
+    EXPO_PUBLIC_STAGE: 'production' | 'staging' | 'dev';
     EXPO_PUBLIC_SENTRY_DSN: string;

🤖 Prompt for 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.

In `@apps/app/types/env.d.ts` around lines 8 - 10, EXPO_PUBLIC_STAGE is currently
typed too broadly as string in env.d.ts, so the declared production | staging |
dev constraint in the comment is not enforced by TypeScript. Narrow the
EXPO_PUBLIC_STAGE property to a literal union in the env type definition so any
future .ts/.tsx usage of this env var is checked at compile time; update the
existing env declaration around EXPO_PUBLIC_STAGE and keep
EXPO_PUBLIC_SENTRY_DSN unchanged.

apps/web/next.config.mjs (1)

50-63: 🗄️ Data Integrity & Integration | 🔵 Trivial | 💤 Low value

silent 주석만 실제 역할에 맞게 수정하세요 withSentryConfig 는 SENTRY_AUTH_TOKEN 을 기본적으로 읽으므로 authToken 추가는 필요 없습니다. 현재 주석은 silent 가 CI에서 빌드 로그만 제어한다는 점으로 바꾸는 편이 맞습니다.

🤖 Prompt for 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.

In `@apps/web/next.config.mjs` around lines 50 - 63, Update the comment in
withSentryConfig to match what silent actually does: it only controls Sentry CLI
log noise during CI/build, not whether SENTRY_AUTH_TOKEN is read. Keep the
existing config in nextConfig as-is, and revise the inline note near the silent
option so it accurately describes CI build logging behavior.

apps/web/src/apis/client.ts (1)

64-89: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

client.ts/server.ts 간 에러 리포팅 로직 중복.

shouldReport 판별, ApiError 생성, captureError 호출부가 apps/web/src/apis/server.ts의 동일 인터셉터와 거의 동일합니다. 공용 헬퍼(예: reportApiError(source, { url, method, status, code, detail }))로 추출해 captureError.ts 또는 공용 유틸에 두면 향후 두 파일이 서로 다르게 수정되어 로직이 어긋나는 것을 방지할 수 있습니다.

♻️ 제안: 공용 헬퍼 추출 예시

+// apps/web/src/utils/reportApiError.ts
+export const reportApiError = (
+  source: 'api-client' | 'api-server',
+  { url, method, status, code, detail }: {
+    url?: string; method?: string; status?: number; code?: string; detail?: string;
+  }
+) => {
+  const apiError = new Error(`API ${status ?? code} ${method ?? 'UNKNOWN'} ${url?.split('?')[0] ?? 'unknown'}`);
+  apiError.name = 'ApiError';
+  captureError(apiError, { tags: { source }, extra: { url, method, status, code, detail } });
+};

🤖 Prompt for 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.

In `@apps/web/src/apis/client.ts` around lines 64 - 89, The API error reporting
logic in client.ts duplicates the same shouldReport check, ApiError
construction, and captureError call used in the server interceptor. Extract this
shared flow into a common helper such as reportApiError(source, { url, method,
status, code, detail }) in a shared util or captureError helper, then have both
client.ts and server.ts call it so the behavior stays consistent and easier to
maintain.

apps/web/sentry.edge.config.ts (1)

1-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

sentry.server.config.ts와 설정이 완전히 중복됨.

dsn/environment/enabled/release/tracesSampleRate/sendDefaultPii 옵션이 sentry.server.config.ts와 한 글자도 다르지 않습니다. 향후 옵션 변경 시 두 파일을 모두 수정해야 하고, 하나만 갱신하면 edge/server 간 설정이 어긋날 위험이 있습니다. 공통 옵션을 별도 헬퍼(예: getSentryBaseOptions())로 추출해 두 파일에서 재사용하는 것을 권장합니다.

♻️ 공통 설정 추출 예시

// apps/web/sentry.shared.config.ts
export function getSentryBaseOptions() {
  const stage = process.env.NEXT_PUBLIC_STAGE;
  const enabled = stage === 'production' || stage === 'staging';

  return {
    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
    environment: stage,
    enabled,
    ...(process.env.NEXT_PUBLIC_WEB_VERSION
      ? { release: process.env.NEXT_PUBLIC_WEB_VERSION }
      : {}),
    tracesSampleRate: 0,
    sendDefaultPii: false,
  };
}

 import * as Sentry from '`@sentry/nextjs`';
+import { getSentryBaseOptions } from './sentry.shared.config';

-/** 배포 환경(production/staging/dev). Sentry 는 production/staging 에서만 수집 (dev·로컬 비활성) */
-const stage = process.env.NEXT_PUBLIC_STAGE;
-const enabled = stage === 'production' || stage === 'staging';
-
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  environment: stage,
-  enabled,
-  ...(process.env.NEXT_PUBLIC_WEB_VERSION ? { release: process.env.NEXT_PUBLIC_WEB_VERSION } : {}),
-  tracesSampleRate: 0,
-  sendDefaultPii: false,
-});
+Sentry.init(getSentryBaseOptions());

🤖 Prompt for 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.

In `@apps/web/sentry.edge.config.ts` around lines 1 - 14, The Sentry init options
in sentry.edge.config.ts are duplicated with sentry.server.config.ts, so extract
the shared dsn/environment/enabled/release/tracesSampleRate/sendDefaultPii setup
into a common helper such as getSentryBaseOptions() and have both config files
call it. Keep the edge-specific Sentry.init wrapper in place, but move the
repeated base option construction into the shared helper so changes only need to
be made once.

🤖 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/app/apis/postSocialLogin.ts`:
- Around line 29-39: Wrap the `response.json()` handling in `postSocialLogin`
with error-safe parsing so JSON parse failures on 5xx responses are also
reported. Use the existing `captureError` path in `postSocialLogin` to catch
exceptions from `response.json()`, preserve the current 5xx tagging/extra
metadata when available, and fall back to a safe default message when the body
is empty or non-JSON so the failure never bypasses Sentry.

In `@apps/web/instrumentation-client.ts`:
- Around line 17-25: Keep Sentry Replay’s default masking enabled in
instrumentation-client and only exempt the specific element(s) that need to be
visible. Remove the broad false overrides in replayIntegration so the default
PII protections remain, and keep the targeted mask rule for the email element
used by ProfileSection while ensuring any needed exceptions are scoped narrowly
rather than disabling masking for all text, inputs, and media.

In `@apps/web/src/hooks/useGetMe.ts`:
- Around line 13-17: Sentry user context is only being set in useGetMe when
userData.id exists, but it is never cleared on logout or account switch. Update
the logout flow (for example in usePostLogout/logout) and the user-effect in
useGetMe so that Sentry.setUser(null) runs whenever the current user is absent
or after logout, while still setting Sentry.setUser({ id: userData.id }) when a
user is present.

In `@turbo.json`:
- Around line 14-19: The build cache inputs for the Turborepo config are missing
NEXT_PUBLIC_WEB_VERSION, so changes to the release tag source used by
apps/web/sentry.server.config.ts may not invalidate cached build results. Add
NEXT_PUBLIC_WEB_VERSION to the build task’s env array in turbo.json so the cache
key reflects version changes, and keep the existing env list consistent with the
variables consumed by the web build.

---

Nitpick comments:
In `@apps/app/types/env.d.ts`:
- Around line 8-10: EXPO_PUBLIC_STAGE is currently typed too broadly as string
in env.d.ts, so the declared production | staging | dev constraint in the
comment is not enforced by TypeScript. Narrow the EXPO_PUBLIC_STAGE property to
a literal union in the env type definition so any future .ts/.tsx usage of this
env var is checked at compile time; update the existing env declaration around
EXPO_PUBLIC_STAGE and keep EXPO_PUBLIC_SENTRY_DSN unchanged.

In `@apps/web/next.config.mjs`:
- Around line 50-63: Update the comment in withSentryConfig to match what silent
actually does: it only controls Sentry CLI log noise during CI/build, not
whether SENTRY_AUTH_TOKEN is read. Keep the existing config in nextConfig as-is,
and revise the inline note near the silent option so it accurately describes CI
build logging behavior.

In `@apps/web/sentry.edge.config.ts`:
- Around line 1-14: The Sentry init options in sentry.edge.config.ts are
duplicated with sentry.server.config.ts, so extract the shared
dsn/environment/enabled/release/tracesSampleRate/sendDefaultPii setup into a
common helper such as getSentryBaseOptions() and have both config files call it.
Keep the edge-specific Sentry.init wrapper in place, but move the repeated base
option construction into the shared helper so changes only need to be made once.

In `@apps/web/src/apis/client.ts`:
- Around line 64-89: The API error reporting logic in client.ts duplicates the
same shouldReport check, ApiError construction, and captureError call used in
the server interceptor. Extract this shared flow into a common helper such as
reportApiError(source, { url, method, status, code, detail }) in a shared util
or captureError helper, then have both client.ts and server.ts call it so the
behavior stays consistent and easier to maintain.

🪄 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: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: e9f953de-e2b8-4f4a-8e46-d7707f9c4c85

📥 Commits

Reviewing files that changed from the base of the PR and between 97e7301 and 735fa79.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (24)

• apps/app/apis/postSocialLogin.ts
• apps/app/app.json
• apps/app/app/_layout.tsx
• apps/app/app/index.tsx
• apps/app/index.js
• apps/app/metro.config.js
• apps/app/package.json
• apps/app/types/env.d.ts
• apps/app/utils/captureError.ts
• apps/web/.gitignore
• apps/web/instrumentation-client.ts
• apps/web/instrumentation.ts
• apps/web/next.config.mjs
• apps/web/package.json
• apps/web/sentry.edge.config.ts
• apps/web/sentry.server.config.ts
• apps/web/src/apis/client.ts
• apps/web/src/apis/server.ts
• apps/web/src/app/error.tsx
• apps/web/src/app/global-error.tsx
• apps/web/src/app/mypage/_components/ProfileSection.tsx
• apps/web/src/hooks/useGetMe.ts
• apps/web/src/utils/captureError.ts
• turbo.json

[kanghaeun]

Sentry 도입 너무 좋다 하나만 봐줘~!

[kanghaeun]

로그아웃 로직에도 Sentry.setUser(null) 추가하는 건 어떨까? 로그아웃이 페이지 리로드 없이 이동해서 여기서도 따로 지워줘야 다음 유저 세션에 이전 id가 안 남을 것 같아서

[iOdiO89]

수정완료 ~!!

[coderabbitai]

Actionable comments posted: 1

🤖 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/app/apis/postSocialLogin.ts`:
- Line 47: The 2xx parsing failure path in postSocialLogin still throws without
reporting to Sentry, so update the response handling in postSocialLogin to call
captureError before throwing when response.ok is true but parsed data is null.
Reuse the same error-reporting pattern already used for other unexpected
response failures in this function, and make sure the thrown error still
preserves the existing user-facing message.

🪄 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: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 75decd0d-0d8a-4a63-a05a-079862f81298

📥 Commits

Reviewing files that changed from the base of the PR and between 735fa79 and db26985.

📒 Files selected for processing (3)

• apps/app/apis/postSocialLogin.ts
• apps/web/instrumentation-client.ts
• apps/web/src/app/mypage/_hooks/usePostLogout.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/instrumentation-client.ts