feat(frontend): add PostHog analytics for staging and production #3344
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughAdds PostHog analytics: new env vars and package dependency, client env exports, a new client-side Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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: 1
🤖 Fix all issues with AI agents
In `@frontend/package.json`:
- Line 58: The package.json dependency for posthog-js is set to a non-existent
version "1.205.3"; update the "posthog-js" entry in frontend/package.json (the
dependency key "posthog-js") to a valid published version such as "^1.318.1" (or
query the npm registry for the latest and set an appropriate semver range), then
run npm/yarn install to verify resolution.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
frontend/.env.examplefrontend/package.jsonfrontend/src/app/layout.tsxfrontend/src/utils/env.client.tsfrontend/src/wrappers/PostHogProvider.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-07-13T11:29:25.245Z
Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/src/app/mentorship/programs/page.tsx:59-61
Timestamp: 2025-07-13T11:29:25.245Z
Learning: In Next.js 13+ app router, components with the 'use client' directive run entirely on the client side and don't require window object existence checks or SSR hydration considerations. Direct access to window.location and other browser APIs is safe in client components.
Applied to files:
frontend/src/wrappers/PostHogProvider.tsx
📚 Learning: 2025-07-13T07:31:06.511Z
Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 1717
File: frontend/src/components/ModuleCard.tsx:53-55
Timestamp: 2025-07-13T07:31:06.511Z
Learning: In Next.js 13+ app router, useRouter from 'next/navigation' does not provide asPath or query properties. Use useParams to extract route parameters and usePathname to get the current pathname instead.
Applied to files:
frontend/src/wrappers/PostHogProvider.tsx
🧬 Code graph analysis (1)
frontend/src/app/layout.tsx (3)
frontend/src/wrappers/PostHogProvider.tsx (1)
PostHogProvider(42-55)frontend/src/wrappers/provider.tsx (1)
Providers(20-36)frontend/src/utils/env.server.ts (1)
IS_GITHUB_AUTH_ENABLED(5-5)
🔇 Additional comments (6)
frontend/.env.example (1)
8-9: LGTM - Environment variables properly configured.Empty defaults correctly disable PostHog for local development, aligning with the PR objective to enable analytics only for staging and production.
frontend/src/app/layout.tsx (1)
6-6: LGTM - PostHogProvider integration is clean.The provider is correctly placed as the outermost wrapper, ensuring analytics can capture all page interactions. When PostHog is disabled (local/test environments), children render directly with no overhead.
Also applies to: 75-88
frontend/src/utils/env.client.ts (1)
9-10: LGTM - Environment variable exports follow existing patterns.The new exports are consistent with the file's conventions and properly centralize access to PostHog configuration.
frontend/src/wrappers/PostHogProvider.tsx (3)
9-21: LGTM - PostHog initialization with proper safeguards.The initialization logic correctly:
- Checks for staging/production environment AND presence of both host and key
- Uses
typeof window !== 'undefined'guard for SSR safety- Disables automatic pageview capture in favor of manual tracking (appropriate for Next.js App Router)
- Sets
person_profiles: 'identified_only'which is good for privacy compliance
23-40: LGTM - Manual pageview tracking correctly implemented.The
PostHogPageViewcomponent properly:
- Uses Next.js App Router hooks (
usePathname,useSearchParams)- Constructs the full URL including query parameters
- Re-captures pageviews when pathname or searchParams change
The Suspense boundary wrapping this component (line 49) is correctly required since
useSearchParamsmust be used within Suspense in Next.js App Router.
42-55: LGTM - Provider pattern is clean and efficient.The conditional rendering ensures zero overhead in local/test environments where PostHog is disabled, while properly wrapping the app when enabled.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
you also have to adress sonarcloud issue .
|
There was a problem hiding this comment.
Could you please tell me what you have done here? Based on my experience, there might be a potential issue with this approach. Though, the code owners can surely tell if it's wrong or not.
SuyashJain17
force-pushed
the
feat/posthog-analytics
branch
from
af649a2 to
6176648
Compare
|
2 participants
Proposed change
Resolves #2838
This PR integrates PostHog analytics into the frontend and enables it only for staging and production environments.
Summary of changes
posthog-jsas a frontend dependencyPostHogProviderto initialize and wrap the appNotes
pnpm-lock.yamlwas regenerated after rebasing onmainand addingposthog-js, which resulted in a larger diff.Happy to adjust the lockfile or pnpm version if a different approach is preferred.
Checklist
make check-testlocally: all warnings addressed, tests passed