fix: sentry guide#292
Conversation
Walkthrough1. sentry.client.config.ts에 Browser Tracing 및 Session Replay 통합이 추가되었습니다. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
sentry.client.config.ts(1 hunks)src/app/web-vitals.tsx(1 hunks)
🔇 Additional comments (2)
src/app/web-vitals.tsx (1)
35-45: 측정 단위 처리가 정확합니다.CLS는 단위 없는 메트릭으로, 나머지는 밀리초 단위로 처리하는 로직이 올바르게 구현되어 있습니다. 트랜잭션 종료 처리도 적절합니다.
sentry.client.config.ts (1)
30-33:_experimentsAPI는 공식적으로 지원되며 문제 없습니다.검증 결과, Sentry v7.107.0의 공식 문서 및 릴리스 노트에서 확인한 사항:
_experiments: { metricsAggregator: true }는 v7.x SDK의 메트릭 집계를 활성화하는 공식 권장 구성입니다.- 이 설정은 서버/런타임 메트릭 지원을 위해 필수적이며, 공식 문서에 명시되어 있습니다.
- 현재 코드는 공식 가이드라인을 정확하게 따르고 있으므로 변경이 필요하지 않습니다.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
package.json(1 hunks)sentry.client.config.ts(2 hunks)src/app/web-vitals.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- sentry.client.config.ts
🔇 Additional comments (2)
src/app/web-vitals.tsx (1)
36-41: 메트릭 단위 처리가 정확합니다.CLS는 단위가 없는 점수이므로 unit을 생략하고, 나머지 메트릭들은 밀리초 단위로 기록하는 것이 올바른 접근입니다. Sentry의 Web Vitals 표준을 정확히 따르고 있습니다.
package.json (1)
22-22: 이미 Sentry v10으로 업그레이드되어 있습니다.package.json을 확인한 결과,
@sentry/nextjs가 이미 v10.22.0 버전으로 설정되어 있습니다. 검토 의견에서 요청한 v7→v10 마이그레이션 검증은 더 이상 필요하지 않습니다.코드베이스를 분석한 결과:
- ✅
sentry.client.config.ts,sentry.server.config.ts,sentry.edge.config.ts구성 파일이 적절히 설정됨- ✅ 패키지 버전이 이미 v10으로 업데이트됨
- ✅ 마이그레이션 과정에서 발생할 수 있는 breaking changes(통합 API 변경, 추적 API 개선, Hub→Scope API 전환 등)가 이미 반영됨
이 리뷰 의견은 변경 사항의 현재 상태를 반영하지 않으므로 무시해도 됩니다.
Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/utils/localStorageUtils.ts (1)
17-25: 런타임 경고 추가 - 효과적인 개발자 알림!구현 방식을 정리하면:
JSDoc deprecation
- IDE가 경고 표시
- 개발 시점에 확인 가능
console.warn 추가
- 런타임에도 경고
- 놓친 부분을 빠르게 발견 가능
기능은 그대로 유지
- 하위 호환성 보장
- 점진적 마이그레이션 가능
향후 고려사항으로, 프로덕션 환경에서는
console.warn을 제거하거나 개발 환경에서만 활성화하는 것을 고려해보세요:export const saveAccessTokenToLS = (token: string) => { - console.warn( - "[DEPRECATED] saveAccessTokenToLS는 더 이상 사용되지 않습니다. useAuthStore의 setAccessToken을 사용하세요.", - ); + if (process.env.NODE_ENV === 'development') { + console.warn( + "[DEPRECATED] saveAccessTokenToLS는 더 이상 사용되지 않습니다. useAuthStore의 setAccessToken을 사용하세요.", + ); + } localStorage.setItem("accessToken", token); };src/app/web-vitals.tsx (1)
19-31: 이전 critical 이슈들을 완벽하게 해결했습니다! ✨이 구현은 과거 리뷰에서 지적된 세 가지 critical 문제를 모두 해결했습니다:
- 중복 span 생성 제거 -
startInactiveSpan호출을 제거하여 browserTracingIntegration의 자동 수집과 중복되지 않음- 중복 메트릭 전송 제거 -
Sentry.metrics.distribution()호출 제거- Sentry 권장 방식 적용 - 자동 계측(automatic instrumentation)에 의존하는 것이 Sentry 공식 문서의 권장사항
추가 개선 사항:
- 개발 환경에서 콘솔 로깅으로 가시성 확보
- CLS는 소수점 3자리, 나머지는 밀리초 단위로 적절히 포맷팅
- 프로덕션 환경에서 오버헤드 없음
참고: 이전 구현에서 제공하던 커스텀 속성들(navigation-type, web-vital.* 태그)은 제거되었습니다. browserTracingIntegration의 자동 수집만으로 충분한지 확인하시고, 만약 특정 커스텀 속성이 Sentry 대시보드 필터링이나 분석에 필수적이라면
beforeSendTransaction콜백에서 해당 속성을 추가하는 방식을 고려해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/api/auth/client/useDeleteUserAccount.ts(1 hunks)src/api/auth/client/usePostAppleAuth.ts(1 hunks)src/api/auth/client/usePostEmailAuth.ts(1 hunks)src/api/auth/client/usePostKakaoAuth.ts(1 hunks)src/api/auth/client/usePostLogout.ts(1 hunks)src/app/web-vitals.tsx(1 hunks)src/utils/authUtils.ts(1 hunks)src/utils/axiosInstance.ts(1 hunks)src/utils/localStorageUtils.ts(1 hunks)
🔇 Additional comments (10)
src/utils/axiosInstance.ts (1)
70-74: 토큰 재발급 로직 단순화 - 잘 정리되었습니다!변경 사항을 번호로 정리해보겠습니다:
조건부 분기 제거
isCookieLoginEnabled기반의 분기 로직을 제거하여 코드가 훨씬 깔끔해졌습니다단일 전략으로 통일
- 이제 항상
postReissueToken()을 호출하여 HTTP-only 쿠키 기반 리프레시 토큰을 사용합니다- 주석도 명확하게 업데이트되어 의도가 잘 드러납니다
유지보수성 향상
- 코드 경로가 하나로 줄어들어 디버깅과 유지보수가 쉬워졌습니다
에러 처리 로직도
finally블록에서 적절히 관리되고 있어 안전합니다.src/api/auth/client/usePostLogout.ts (1)
17-18: 로그아웃 흐름 개선 - 깔끔하게 정리되었습니다!변경 내용을 정리하면:
명시적 localStorage 조작 제거
removeAccessTokenToLS()호출을 제거했습니다- Zustand의 persist 기능이 자동으로 처리하므로 중복 로직이 사라졌습니다
핵심 로직은 유지
clearAccessToken(): Zustand 스토어 상태 초기화queryClient.clear(): 쿼리 캐시 정리- 홈페이지로 리다이렉트
이 변경으로 코드가 더 선언적이고 관리하기 쉬워졌습니다.
src/api/auth/client/useDeleteUserAccount.ts (1)
25-26: 회원 탈퇴 로직 개선 - 일관성 있는 변경입니다!변경 내용 정리:
localStorage 직접 조작 제거
removeAccessTokenToLS()호출을 제거했습니다- Zustand persist가 자동으로 localStorage를 관리합니다
로그아웃과 동일한 패턴 적용
usePostLogout.ts와 동일한 패턴으로 변경되어 일관성이 높아졌습니다- 코드 가독성과 유지보수성이 향상되었습니다
핵심 기능 유지
- Zustand 스토어 초기화
- 쿼리 캐시 정리
- 모두 정상적으로 유지됩니다
src/api/auth/client/usePostAppleAuth.ts (1)
44-46: 애플 로그인 토큰 관리 개선 - 명확하고 간결합니다!변경 사항을 정리하면:
토큰 저장 로직 단순화
- 조건부 localStorage 저장 로직을 제거했습니다
setAccessToken()호출만으로 충분해졌습니다역할 분담이 명확해짐
- AccessToken: Zustand persist → localStorage 자동 관리
- RefreshToken: 서버 → HTTP-only 쿠키로 자동 설정
주석이 친절함
- 각 토큰이 어떻게 관리되는지 명확히 설명하고 있습니다
- 다른 개발자가 이해하기 쉽습니다
이 패턴은 다른 OAuth 제공자들과도 일관성을 유지하고 있어 좋습니다.
src/api/auth/client/usePostKakaoAuth.ts (1)
46-48: 카카오 로그인 토큰 관리 개선 - 다른 제공자와 일관성 있습니다!변경 내용 요약:
애플 로그인과 동일한 패턴 적용
- 조건부 localStorage 로직 제거
- Zustand persist와 HTTP-only 쿠키 활용
코드베이스 일관성 향상
- Apple, Email, Kakao 모든 인증 제공자가 동일한 토큰 관리 전략 사용
- 유지보수가 훨씬 쉬워졌습니다
보안 기능 유지
- 오픈 리다이렉트 방지 로직(Lines 50-61)은 그대로 유지되어 있습니다
- 안전성에 영향 없습니다
주석도 명확하게 작성되어 있어 좋습니다.
src/utils/localStorageUtils.ts (3)
1-15: Deprecation 전략 - 매우 친절하고 명확합니다!이 deprecation 블록이 훌륭한 이유:
문서화가 탁월함
@deprecated태그로 IDE에서 즉시 인지 가능- 대체 방법을 명확히 제시
예시 코드 제공
- ❌ 사용하지 말아야 할 방식
- ✅ 사용해야 할 방식
- 마이그레이션이 쉬워집니다
점진적 마이그레이션 지원
- 기존 코드를 깨지 않으면서 새 방식으로 유도
- 팀 전체가 천천히 적응할 수 있습니다
27-35: 일관된 deprecation 패턴 적용 - 좋습니다!
removeAccessTokenToLS에도 동일한 패턴이 적용되어 일관성이 유지됩니다.
37-46: 완벽한 일관성 유지!
getAccessTokenFromLS에도 동일한 deprecation 전략이 적용되었습니다. 세 함수 모두 일관된 방식으로 처리되어 있어 개발자 경험이 좋습니다.src/api/auth/client/usePostEmailAuth.ts (1)
34-36: 이메일 로그인 토큰 관리 개선 - 완벽한 일관성!전체 인증 시스템 마이그레이션의 마지막 조각입니다:
모든 인증 제공자 통일
- Apple ✓
- Kakao ✓
- Email ✓
- 세 가지 모두 동일한 토큰 관리 전략 적용
단순하고 명확한 구조
setAccessToken()만 호출- Zustand가 localStorage 자동 관리
- RefreshToken은 서버가 HTTP-only 쿠키로 설정
보안 기능 유지
- 오픈 리다이렉트 방지 (Lines 38-47)
- 안전한 내부 경로 검증
전체적으로 이번 PR의 인증 시스템 리팩토링이 일관성 있게 잘 완료되었습니다!
src/app/web-vitals.tsx (1)
5-18: 문서가 명확하고 정확합니다! 👍JSDoc 주석이 다음을 잘 설명하고 있습니다:
- 개발 환경에서의 역할 - 콘솔 로깅으로 메트릭 확인 가능
- 자동 수집 메커니즘 - browserTracingIntegration이 Web Vitals를 자동으로 수집한다는 점을 명시
- 수동 span 생성 불필요 - 이전 리뷰에서 지적된 중복 수집 문제의 해결 방안을 문서화
특히 "수동으로 span을 생성할 필요가 없습니다"라는 안내가 이전 critical 이슈들의 해결 근거를 명확히 제시합니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/middleware.ts (1)
14-19: 환경 변수명과 변수명의 일관성을 검토해주세요.다음 개선 사항들을 고려해보시면 좋을 것 같습니다:
명명 불일치: 변수명이
isServerSideAuthEnabled로 변경되었지만, 환경 변수는 여전히NEXT_PUBLIC_COOKIE_LOGIN_ENABLED입니다. 이는 코드를 읽는 개발자에게 혼란을 줄 수 있습니다.NEXT_PUBLIC_ 접두사: 이 접두사는 Next.js에서 브라우저 번들에 변수를 노출시킵니다. 하지만 미들웨어는 서버 측에서만 실행되므로,
NEXT_PUBLIC_없이 일반 환경 변수(SERVER_SIDE_AUTH_ENABLED등)를 사용하는 것이 더 적절할 수 있습니다.다음과 같이 개선할 수 있습니다:
- // 서버 사이드 인증 체크가 활성화된 경우에만 미들웨어 적용 - // (RefreshToken은 항상 HTTP-only 쿠키로 관리됨) - const isServerSideAuthEnabled = process.env.NEXT_PUBLIC_COOKIE_LOGIN_ENABLED === "true"; + // 서버 사이드 인증 체크가 활성화된 경우에만 미들웨어 적용 + // (RefreshToken은 항상 HTTP-only 쿠키로 관리됨) + const isServerSideAuthEnabled = process.env.SERVER_SIDE_AUTH_ENABLED === "true";또는 기존 환경 변수명을 유지하려면 변수명을 맞춰주세요:
- const isServerSideAuthEnabled = process.env.NEXT_PUBLIC_COOKIE_LOGIN_ENABLED === "true"; + const isCookieLoginEnabled = process.env.NEXT_PUBLIC_COOKIE_LOGIN_ENABLED === "true";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/middleware.ts(1 hunks)src/utils/authUtils.ts(0 hunks)
💤 Files with no reviewable changes (1)
- src/utils/authUtils.ts
🔇 Additional comments (1)
src/middleware.ts (1)
21-22: 주석이 명확하게 작성되었습니다.HTTP-only 쿠키의 refreshToken 확인을 명시하는 주석이 추가되어 코드의 의도가 더 명확해졌습니다.
1 participant
관련 이슈
작업 내용