[feature] Mixpanel Session Replay 및 히트맵 기능 추가 #1017
Conversation
- mixpanel-browser 2.60.0 → 2.73.0 업그레이드 - record_heatmap_data 활성화로 히트맵 데이터 수집 - record_sessions_percent: 1 설정으로 100% 세션 녹화
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | 요약 |
|---|---|
Mixpanel 의존성 업그레이드frontend/package.json |
mixpanel-browser 버전을 ^2.60.0에서 ^2.73.0으로 업데이트 |
Mixpanel 히트맵 설정 추가frontend/src/utils/initSDK.ts |
mixpanel.init 호출에 히트맵 데이터 수집(record_heatmap_data: true)과 세션 기록 비율(record_sessions_percent: 1) 설정 추가 |
Estimated code review effort
🎯 1 (Trivial) | ⏱️ ~3 minutes
Possibly related issues
- Moadong/moadong#1016: 이 PR은 요청된 "믹스패널 히트맵 설정 추가" 작업을 직접 구현하며, 히트맵 데이터 수집 설정을 추가합니다.
Possibly related PRs
- [feature] Mixpanel IP 추적하도록 변경 및 ignore_dnt 적용 #850: 두 PR 모두 frontend/src/utils/initSDK.ts의 mixpanel.init 설정 옵션을 수정합니다.
- [fix] Mixpanel 초기화 로직 방어 코드 추가 #1008: 두 PR 모두 initializeMixpanel 함수를 수정하며, 추적 관련 설정을 변경합니다.
- [feature] Mixpanel 로컬 환경 비활성화 및 세션 ID 연동 #1004: 두 PR 모두 frontend/src/utils/initSDK.ts의 initializeMixpanel을 수정합니다.
Suggested labels
✨ Feature
Suggested reviewers
- lepitaaar
- oesnuj
- suhyun113
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | 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 (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | PR 제목은 Mixpanel 세션 리플레이 및 히트맵 기능 추가를 명확하게 설명하며, 실제 변경사항(히트맵 데이터 수집, 세션 녹화 설정)과 정확하게 일치합니다. |
| Linked Issues check | ✅ Passed | PR 변경사항이 MOA-495 이슈의 목표인 Mixpanel 히트맵 설정 추가를 완전히 충족합니다. mixpanel-browser 업그레이드, record_heatmap_data 활성화, record_sessions_percent 설정을 모두 구현했습니다. |
| Out of Scope Changes check | ✅ Passed | 모든 변경사항이 MOA-495 이슈의 범위 내에 있습니다. 패키지 버전 업그레이드와 Mixpanel 히트맵/세션 녹화 설정은 모두 이슈 목표와 직접 관련됩니다. |
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing touches
- 📝 Generate docstrings
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 help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/utils/initSDK.ts (1)
17-17: 매직 넘버를 네임드 상수로 교체하세요.
record_sessions_percent: 1값은 100% 녹화를 의미하는 매직 넘버입니다. 코드의 의도를 명확히 하기 위해 네임드 상수를 사용하는 것이 좋습니다.♻️ 네임드 상수 사용 예시
파일 상단에 상수를 정의하세요:
const LOCALHOST_HOSTNAME = 'localhost'; const MIXPANEL_SESSION_RECORD_PERCENT = 1; // 100% 녹화 (1 = 100%, 0.1 = 10%)그리고 다음과 같이 사용하세요:
mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN, { ignore_dnt: true, debug: false, record_heatmap_data: true, - record_sessions_percent: 1, + record_sessions_percent: MIXPANEL_SESSION_RECORD_PERCENT, });Based on coding guidelines, 매직 넘버를 네임드 상수로 교체하여 코드의 명확성을 개선해야 합니다.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
frontend/package.jsonfrontend/src/utils/initSDK.ts
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/utils/initSDK.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/utils/initSDK.ts
🧠 Learnings (1)
📚 Learning: 2025-11-15T08:13:58.854Z
Learnt from: lepitaaar
Repo: Moadong/moadong PR: 844
File: frontend/package.json:97-97
Timestamp: 2025-11-15T08:13:58.854Z
Learning: In frontend/package.json, the `tough-cookie` package is a dependency of `msw` (Mock Service Worker) used for cookie parsing and management. Both packages should be in devDependencies together.
Applied to files:
frontend/package.json
🔇 Additional comments (2)
frontend/src/utils/initSDK.ts (1)
16-16: 히트맵 데이터 수집이 올바르게 구성되었습니다.
record_heatmap_data: true설정은 PR 목표에 부합하며, 사용자 상호작용 분석을 위한 히트맵 데이터 수집을 활성화합니다.frontend/package.json (1)
34-34: [email protected]로 업그레이드 전 추가 검증이 필요합니다.버전 2.73.0은 유효하며 최신 배포본입니다. 다음이 확인되었습니다:
- ✅ 버전 존재 여부: 2.73.0은 공식 npm 레지스트리에 존재하며 최신 버전입니다 (2025년 12월 23일 배포)
- ✅ 설정 옵션 지원:
record_heatmap_data와record_sessions_percent옵션은 모두 지원되며 공식 문서에 명시되어 있습니다- ✅ 보안 취약점: npm에 등록된 보안 취약점이 없습니다
그러나 주의할 점:
⚠️ 브레이킹 체인지: 2.73.0의 공개 CHANGELOG 및 GitHub 릴리스 노트가 아직 문서화되지 않았습니다 (공식 문서는 v2.72.0까지만 기록). 2.72.0에서 2.73.0 사이의 변경 사항을 확인하려면 GitHub 저장소의 커밋 히스토리를 검토하거나 Mixpanel 팀에 문의하시기 바랍니다.
| record_heatmap_data: true, | ||
| record_sessions_percent: 1, |
There was a problem hiding this comment.
100% 세션 녹화 설정의 영향을 재검토하세요.
record_sessions_percent: 1 설정은 모든 사용자 세션의 100%를 녹화합니다. 이는 다음과 같은 중대한 영향을 미칠 수 있습니다:
- 비용 급증: Mixpanel 세션 리플레이는 사용량 기반 과금이며, 100% 녹화는 예상보다 훨씬 높은 비용을 발생시킬 수 있습니다.
- 성능 저하: 모든 세션에서 DOM 변경, 클릭, 스크롤 등을 추적하면 클라이언트 성능에 영향을 줄 수 있습니다.
- 프라이버시 위험: 민감한 사용자 입력 데이터가 의도치 않게 수집될 수 있습니다.
프로덕션 환경에서는 일반적으로 10-20% 샘플링을 권장합니다. 초기 테스트 단계라면, 환경 변수로 제어 가능하게 만드는 것을 고려하세요.
♻️ 환경 변수를 통한 설정 제어 (권장)
mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN, {
ignore_dnt: true,
debug: false,
record_heatmap_data: true,
- record_sessions_percent: 1,
+ record_sessions_percent: Number(import.meta.env.VITE_MIXPANEL_SESSIONS_PERCENT) || 0.1,
});이렇게 하면 환경별로 다른 샘플링 비율을 설정할 수 있습니다 (예: 개발 환경 100%, 프로덕션 10%).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| record_heatmap_data: true, | |
| record_sessions_percent: 1, | |
| mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN, { | |
| ignore_dnt: true, | |
| debug: false, | |
| record_heatmap_data: true, | |
| record_sessions_percent: Number(import.meta.env.VITE_MIXPANEL_SESSIONS_PERCENT) || 0.1, | |
| }); |
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
개선 사항
유지보수
✏️ Tip: You can customize this high-level summary in your review settings.