Skip to main content

Source: ocean/docs/sentry-performance-setup-summary.md | ✏️ Edit on GitHub

Sentry Performance Monitoring Setup Summary

Overview​

I've successfully enhanced your Sentry integration to monitor critical operations across your Ocean application. The implementation focuses on tracking user journeys, business-critical transactions, and expensive API calls as you requested.

What Was Implemented​

1. Performance Monitoring Module (/src/lib/performance-monitoring.ts)​

  • Created a comprehensive performance monitoring utility
  • Supports tracking async operations with automatic error handling
  • Provides specialized wrappers for auth, data, and Stripe operations
  • Includes automatic slow operation detection (>3s warning threshold)

2. Authentication Flow Monitoring (/src/services/auth.ts)​

  • Enhanced all auth methods with performance tracking:
    • signUpPasswordless: Tracks new user registration
    • signInPasswordless: Monitors login performance
    • verifyOtp: Measures OTP verification speed
    • signOut: Tracks logout operations
    • refreshSession: Monitors JWT refresh performance
    • getUser: Tracks user profile loading

3. GraphQL Operation Tracking (/src/hooks/use-graphql-query.ts)​

  • Automatic performance monitoring for all GraphQL queries and mutations
  • Extracts operation names for better categorization
  • Tracks success/failure rates and error types
  • Monitors JWT validation overhead

4. Core Data Operations (/src/hooks/use-graphql-organization.ts)​

  • Instrumented organization data fetching
  • Tracks member list loading performance
  • Monitors organization updates
  • Includes metadata like organization count and plan types

5. Stripe Operations (/src/hooks/use-stripe.ts)​

  • Subscription creation/update monitoring
  • Subscription cancellation tracking
  • Portal session creation performance
  • Includes price IDs and subscription IDs in tracking data

6. Webhook Processing (/supabase/functions/handle-stripe-webhook/index.ts)​

  • Enhanced with structured logging and metrics
  • Tracks processing time by event type
  • Monitors organization updates from webhook events
  • Includes proper error tracking with context

7. Edge Function Observability Update​

  • Modified to use environment variable for Sentry DSN
  • Now reads from SENTRY_DSN or EDGE_FUNCTION_SENTRY_DSN

Key Features​

Automatic Performance Tracking​

  • All operations are wrapped with timing measurements
  • Slow operations (>3s) trigger automatic warnings
  • Failed operations include full error context

Cost Optimization​

  • Inherits existing sampling rates (10% in production)
  • Filters out noise (browser extensions, network errors)
  • No PII in performance data

Rich Context​

  • Operations include relevant metadata (IDs, counts, statuses)
  • GraphQL operations track query/mutation names
  • Authentication tracks email domains (not full emails)
  • Stripe operations include price and subscription IDs

Usage Patterns​

For New Operations​

// Import the utilities
import { PerformanceMonitor } from '@/lib/performance-monitoring'

// Track any async operation
const result = await PerformanceMonitor.trackAsyncOperation(
  'operation.name',
  async () => {
    // Your operation code
    return await someAsyncWork()
  },
  {
    description: 'Human-readable description',
    data: { relevant: 'metadata' },
  }
)

For Specific Domains​

// Authentication
const authMonitor = createAuthPerformanceWrapper()
const txId = authMonitor.trackLogin('passwordless')

// Data operations
const dataMonitor = createDataOperationWrapper()
const txId = dataMonitor.trackFetch('users', userCount)

// Stripe operations
const stripeMonitor = createStripeOperationWrapper()
const txId = stripeMonitor.trackCheckoutSession(priceId)

Monitoring Benefits​

  1. Identify Bottlenecks: See which operations are slowest
  2. Track Trends: Monitor performance over time
  3. Error Correlation: Link errors to performance issues
  4. User Impact: Understand which slowdowns affect users most
  5. Business Metrics: Track subscription flow performance

Next Steps​

  1. Set up Alerts: Configure Sentry alerts for slow operations
  2. Create Dashboards: Build custom dashboards for key metrics
  3. Performance Budgets: Define acceptable latency for each operation
  4. Regular Reviews: Schedule monthly performance reviews

Environment Variables Required​

Add these to your deployment environments:

  • EDGE_FUNCTION_SENTRY_DSN: Your Sentry DSN for Edge Functions

The frontend Sentry configuration already uses the existing environment variables.

Verification​

All code changes have been:

  • ✅ Type-checked (no TypeScript errors)
  • ✅ Linted (no ESLint warnings)
  • ✅ Integrated with existing error boundaries
  • ✅ Cost-optimized with sampling
  • ✅ Privacy-focused (no PII)

The performance monitoring is now active and will start collecting data immediately for all tracked operations.