Skip to main content

Source: ocean/docs/sentry-v9-features.md | ✏️ Edit on GitHub

Sentry v9 Features Implementation

Overview​

We've successfully implemented advanced Sentry monitoring features compatible with v9 SDK, maximizing the free tier capabilities.

Implemented Features​

1. Core Error Tracking​

  • Location: /src/lib/sentry.tsx
  • Features:
    • Automatic error capture with source maps
    • Smart error filtering (browser extensions, network errors, etc.)
    • Cost-optimized sampling rates for free tier
    • Privacy-focused configuration (no PII)

2. User Flow Performance Monitoring​

  • Location: /src/lib/sentry-performance.ts
  • Implementation:
    • UserFlowTracker class using v9's startInactiveSpan API
    • Pre-configured flows: authentication, billing, onboarding, data export
    • React hook useUserFlow for easy integration
    • Currently tracking authentication flow in /src/routes/login.tsx

3. Cron Monitoring Simulation​

  • Location: /src/lib/sentry-crons.ts
  • Implementation:
    • Browser-compatible cron monitoring using performance spans
    • Designed for GitHub Actions scheduled workflows
    • Includes health check monitoring configuration

4. GraphQL Performance Tracking​

  • Locations:
    • /src/hooks/use-graphql-query.ts
    • /src/services/graphql-client.ts
  • Features:
    • Automatic span creation for all GraphQL operations
    • Error tracking with operation context
    • Performance monitoring with operation names

5. Stripe Webhook Monitoring​

  • Location: /supabase/functions/handle-stripe-webhook/index.ts
  • Features:
    • Performance tracking for each webhook type
    • Error capture with Stripe event context
    • Customer and subscription tracking

Sampling Configuration (Free Tier Optimized)​

// Production sampling rates
tracesSampleRate: 0.1 // 10% - stays under 100K transactions/month
replaysSessionSampleRate: 0.01 // 1% - minimal replay storage
replaysOnErrorSampleRate: 1.0 // 100% - always capture on error
profilesSampleRate: 0.01 // 1% - profiling for critical operations

How to Verify Features​

  1. Visit Production: https://ocean.goldfish.io

  2. Open Browser Console and run:

    // Check Sentry is loaded
    window.Sentry

    // Check version (should be 9.43.0)
    window.Sentry.SDK_VERSION

  3. Test Authentication Flow:

    • Go to login page
    • Enter email and submit
    • Check Sentry Performance tab for user-flow.authentication transaction
    • Should see steps: enter-email, email-sent, verify-otp, login-success

  4. Test Error Tracking:

    // Create test error
    window.Sentry.captureException(new Error('Test error'))

  5. Check Sentry Dashboard:

    • Errors should appear in Issues tab
    • Performance data in Performance tab
    • User flows under Transactions
    • GraphQL operations tracked separately

Dashboard Configuration​

See /docs/sentry-alerts-setup.md for:

  • Alert rules configuration
  • Issue ownership setup
  • Slack integration
  • Dashboard customization

Key Benefits​

  1. Cost Efficiency: Optimized sampling keeps within free tier limits
  2. User Journey Insights: Track complete flows, not just individual actions
  3. Performance Monitoring: Identify slow operations and bottlenecks
  4. Smart Error Filtering: Reduce noise from non-actionable errors
  5. v9 Compatibility: Using latest Sentry APIs for future-proofing

Next Steps​

  1. Monitor actual usage in production to fine-tune sampling rates
  2. Set up alerts based on the guide in /docs/sentry-alerts-setup.md
  3. Configure issue ownership for your team
  4. Add more user flows as features are developed
  5. Review performance data weekly to identify optimization opportunities

Troubleshooting​

If Sentry data isn't appearing:

  1. Check browser console for errors
  2. Verify window.Sentry exists
  3. Check Network tab for Sentry API calls
  4. Ensure DSN is correctly configured in environment
  5. Verify custom domains are allowed in Sentry project settings