Skip to content

posthog-error-handling.md

Latest commit

 

History

History
96 lines (65 loc) · 2.98 KB

posthog-error-handling.md

File metadata and controls

96 lines (65 loc) · 2.98 KB

PostHog Error Handling Implementation

Problem

The application was experiencing network errors when PostHog tried to flush analytics data:

Error while flushing PostHog [PostHogFetchNetworkError: Network error while fetching PostHog]

Solution

Implemented a comprehensive error handling system for PostHog network failures:

1. PostHog Service (src/services/posthog.service.ts)

  • Purpose: Centralized error handling and retry logic for PostHog
  • Features:
    • Tracks retry attempts (default: 3 max retries)
    • Temporarily disables PostHog after max retries
    • Automatic re-enabling after 5 minutes
    • Comprehensive logging of errors and state changes

2. PostHog Provider Wrapper (src/components/common/posthog-provider.tsx)

  • Purpose: Wraps the PostHog provider with error handling
  • Features:
    • Catches console errors related to PostHog
    • Uses the PostHog service for error management
    • Gracefully falls back to rendering without PostHog when disabled
    • Conservative configuration to reduce network calls

3. Updated Layout (src/app/_layout.tsx)

  • Purpose: Uses the new PostHog wrapper instead of direct PostHog provider
  • Change: Replaced PostHogProvider with PostHogProviderWrapper

Key Features

Graceful Degradation

  • When PostHog encounters network errors, the app continues to function normally
  • Analytics are temporarily disabled rather than causing app crashes
  • User experience remains unaffected

Automatic Recovery

  • PostHog is automatically re-enabled after 5 minutes
  • Retry counter is reset upon recovery
  • System logs recovery events for monitoring

Conservative Configuration

  • Reduced flush frequency (60 seconds instead of 10)
  • Smaller batch sizes (10 events instead of 20)
  • 10-second request timeout
  • Comprehensive error logging

Testing

The implementation includes comprehensive unit tests:

PostHog Service Tests (src/services/__tests__/posthog.service.test.ts)

  • Error handling logic
  • Retry mechanism
  • Disable/enable functionality
  • Status tracking
  • Timer-based recovery

PostHog Provider Tests (src/components/common/__tests__/posthog-provider.test.tsx)

  • Component rendering with PostHog enabled/disabled
  • Error handling integration
  • Configuration validation
  • Navigation ref support
  • Service integration

All tests pass successfully and provide good coverage of the error handling functionality.

Benefits

  1. Reliability: App no longer crashes due to PostHog network errors
  2. User Experience: Seamless operation even when analytics fail
  3. Monitoring: Comprehensive logging for debugging
  4. Performance: Reduced network calls and optimized configuration
  5. Resilience: Automatic recovery from network issues

Configuration

The system uses environment variables for PostHog configuration:

When no API key is provided, the app runs without PostHog entirely.