Add event capturing into PostHog

[koji-m]

Summary

Added feature to allow PostHog to capture access events for user behavior analysis.
This feature can be enabled using environment variables.

Changes

• Added PostHog initializing component to app/providers.tsx .
• Added event capturing component to app/Tracking.tsx .
• Inserted components implemented above into app/layout.tsx .

Testing

Normal case - Enable event capturing

• Set environment variables
  • NEXT_PUBLIC_ENABLE_ANALYTICS : true (enables event capturing)
  • NEXT_PUBLIC_POSTHOG_HOST : PostHog test project url
  • NEXT_PUBLIC_POSTHOG_KEY : PostHog test project key
• Start up development environment ( bun dev ) and access some pages.
• Result: Verified that the event was recorded in PostHog.

Normal case - Disable event capturing

• Set environment variables
  • NEXT_PUBLIC_ENABLE_ANALYTICS : false or remove definition (disables event capturing)
  • NEXT_PUBLIC_POSTHOG_HOST : PostHog test project url
  • NEXT_PUBLIC_POSTHOG_KEY : PostHog test project key
• Start up development environment ( bun dev ) and access some pages.
• Result: Verified that the event was not recorded in PostHog.

Error case

• Set environment variables
  • NEXT_PUBLIC_ENABLE_ANALYTICS : true (enables event capturing)
  • NEXT_PUBLIC_POSTHOG_HOST : Wrong PostHog test project url or remove definition
  • NEXT_PUBLIC_POSTHOG_KEY : Wrong PostHog test project key or remove definition
• Start up development environment ( bun dev ) and access some pages.
• Result: Although an error is displayed on the browser console (not in app), confirmed that the application runs normally.

Other Information

• I referred to PostHog's Next.js implementation guide.
• If an error occurs related to event capture, the error is reported to Sentry without affecting the operation of the application.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
giselle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 22, 2024 9:00am