Sentry Error Monitoring Patterns

# Sentry Error Monitoring for Google Antigravity

Implement comprehensive error monitoring with Sentry in your Google Antigravity IDE projects. This guide covers error boundaries, performance monitoring, custom contexts, and alerting patterns optimized for Gemini 3 agentic development.

## Sentry Configuration

Set up Sentry with Next.js integration:

```typescript
// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  
  // Performance Monitoring
  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
  
  // Session Replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  // Release tracking
  release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,

  // Filter out noise
  ignoreErrors: [
    'ResizeObserver loop limit exceeded',
    'ResizeObserver loop completed with undelivered notifications',
    'Non-Error promise rejection captured',
    /^Network Error$/,
  ],

  beforeSend(event, hint) {
    // Filter out specific errors
    const error = hint.originalException;
    
    if (error instanceof Error) {
      // Don't send user abort errors
      if (error.name === 'AbortError') return null;
      
      // Don't send chunk load failures (usually from deployments)
      if (error.message.includes('Loading chunk')) return null;
    }

    return event;
  },

  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});
```

```typescript
// sentry.server.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  
  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
  
  release: process.env.VERCEL_GIT_COMMIT_SHA,

  // Capture unhandled promise rejections
  integrations: [
    Sentry.captureConsoleIntegration({
      levels: ['error'],
    }),
  ],
});
```

## Error Boundary Component

Create a reusable error boundary with Sentry integration:

```typescript
// components/ErrorBoundary.tsx
'use client';

import * as Sentry from '@sentry/nextjs';
import { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
  onError?: (error: Error, errorInfo: ErrorInfo) => void;
}

interface State {
  hasError: boolean;
  error: Error | null;
  eventId: string | null;
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null, eventId: null };
  }

  static getDerivedStateFromError(error: Error): Partial<State> {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    const eventId = Sentry.captureException(error, {
      extra: {
        componentStack: errorInfo.componentStack,
      },
    });

    this.setState({ eventId });
    this.props.onError?.(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback;
      }

      return (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          <p>We've been notified and are working on a fix.</p>
          
          <button
            onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId! })}
          >
            Report Feedback
          </button>
          
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try Again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

// Hook version for functional components
export function useErrorHandler() {
  return (error: Error, context?: Record<string, unknown>) => {
    Sentry.captureException(error, {
      extra: context,
    });
  };
}
```

## Custom Error Tracking

Implement structured error tracking with context:

```typescript
// lib/error-tracking.ts
import * as Sentry from '@sentry/nextjs';

interface ErrorContext {
  userId?: string;
  organizationId?: string;
  feature?: string;
  action?: string;
  metadata?: Record<string, unknown>;
}

export function trackError(
  error: Error | string,
  context: ErrorContext = {}
) {
  const { userId, organizationId, feature, action, metadata } = context;

  Sentry.withScope((scope) => {
    if (userId) {
      scope.setUser({ id: userId });
    }

    if (organizationId) {
      scope.setTag('organization_id', organizationId);
    }

    if (feature) {
      scope.setTag('feature', feature);
    }

    if (action) {
      scope.setTag('action', action);
    }

    if (metadata) {
      scope.setExtras(metadata);
    }

    if (typeof error === 'string') {
      Sentry.captureMessage(error, 'error');
    } else {
      Sentry.captureException(error);
    }
  });
}

// Async error wrapper for API routes
export function withErrorTracking<T extends (...args: unknown[]) => Promise<unknown>>(
  fn: T,
  context: Omit<ErrorContext, 'metadata'>
): T {
  return (async (...args: Parameters<T>) => {
    try {
      return await fn(...args);
    } catch (error) {
      trackError(error as Error, {
        ...context,
        metadata: { args },
      });
      throw error;
    }
  }) as T;
}
```

## Performance Monitoring

Track custom performance metrics:

```typescript
// lib/performance.ts
import * as Sentry from '@sentry/nextjs';

export function measurePerformance<T>(
  name: string,
  fn: () => T | Promise<T>,
  context?: Record<string, string>
): T | Promise<T> {
  return Sentry.startSpan(
    {
      name,
      op: 'function',
      attributes: context,
    },
    () => fn()
  );
}

// Database query tracking
export async function trackedQuery<T>(
  name: string,
  queryFn: () => Promise<T>
): Promise<T> {
  return Sentry.startSpan(
    {
      name: `db.${name}``,
      op: 'db.query',
    },
    async (span) => {
      try {
        const result = await queryFn();
        span.setStatus({ code: 1 }); // OK
        return result;
      } catch (error) {
        span.setStatus({ code: 2, message: (error as Error).message }); // ERROR
        throw error;
      }
    }
  );
}

// API route wrapper with performance tracking
export function withPerformanceTracking(
  handler: (req: Request) => Promise<Response>,
  name: string
) {
  return async (req: Request): Promise<Response> => {
    return Sentry.startSpan(
      {
        name: `api.${name}``,
        op: 'http.server',
        attributes: {
          'http.method': req.method,
          'http.url': req.url,
        },
      },
      async (span) => {
        try {
          const response = await handler(req);
          span.setAttribute('http.status_code', response.status);
          return response;
        } catch (error) {
          span.setStatus({ code: 2, message: (error as Error).message });
          throw error;
        }
      }
    );
  };
}
```

## User Feedback Collection

Collect user feedback on errors:

```typescript
// components/ErrorFeedback.tsx
'use client';

import { useState } from 'react';
import * as Sentry from '@sentry/nextjs';

interface ErrorFeedbackProps {
  eventId: string;
  onClose: () => void;
}

export function ErrorFeedback({ eventId, onClose }: ErrorFeedbackProps) {
  const [feedback, setFeedback] = useState('');
  const [email, setEmail] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      const response = await fetch(
        `https://sentry.io/api/0/projects/${process.env.NEXT_PUBLIC_SENTRY_ORG}/${process.env.NEXT_PUBLIC_SENTRY_PROJECT}/user-feedback/`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `DSN ${process.env.NEXT_PUBLIC_SENTRY_DSN}``,
          },
          body: JSON.stringify({
            event_id: eventId,
            email,
            comments: feedback,
          }),
        }
      );

      if (response.ok) {
        setSubmitted(true);
        setTimeout(onClose, 2000);
      }
    } catch (error) {
      console.error('Failed to submit feedback', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div className="feedback-success">
        <p>Thank you for your feedback!</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="error-feedback-form">
      <h3>Help us fix this issue</h3>
      <p>What were you trying to do when this error occurred?</p>
      
      <textarea
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        placeholder="Describe what happened..."
        required
      />
      
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Your email (optional)"
      />
      
      <div className="actions">
        <button type="button" onClick={onClose}>
          Cancel
        </button>
        <button type="submit" disabled={isSubmitting}>
          {isSubmitting ? 'Submitting...' : 'Submit Feedback'}
        </button>
      </div>
    </form>
  );
}
```

## Best Practices

1. **Set meaningful release versions** for deployment tracking
2. **Filter noise** with ignoreErrors and beforeSend
3. **Add user context** for authenticated error tracking
4. **Use breadcrumbs** to track user actions leading to errors
5. **Configure alerts** for critical error thresholds
6. **Sample transactions** appropriately in production
7. **Implement source maps** for readable stack traces