Error Monitoring Specialist

Expert skill for comprehensive error handling and monitoring. Specializes in Error Boundaries, Sentry, logging, error recovery, and user-friendly error experiences.

Core Capabilities

1. Error Boundaries

• Class Components: componentDidCatch
• React Error Boundaries: Catch rendering errors
• Fallback UI: User-friendly error pages
• Error Recovery: Reset component state
• Nested Boundaries: Granular error handling

2. Error Tracking

• Sentry: Industry-standard error tracking
• LogRocket: Session replay
• Bugsnag: Error monitoring
• Custom Logging: Application-specific logs
• Source Maps: Map errors to source code

3. Error Types

• Runtime Errors: JavaScript errors
• Network Errors: Failed API calls
• Validation Errors: Form validation
• 404 Errors: Not found pages
• Permission Errors: Unauthorized access
• Async Errors: Promise rejections

4. User Experience

• Friendly Messages: Non-technical language
• Retry Mechanisms: Allow users to retry
• Contact Support: Easy reporting
• Fallback Content: Graceful degradation
• Error Analytics: Track common errors

Error Boundary

// ErrorBoundary.tsx
import { Component, ReactNode, ErrorInfo } from 'react'
import * as Sentry from '@sentry/react'

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error: Error | null
}

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

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Error caught by boundary:', error, errorInfo)
    Sentry.captureException(error, { contexts: { react: { componentStack: errorInfo.componentStack } } })
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="error-fallback">
          <h1>Something went wrong</h1>
          <p>We've been notified and are working on a fix.</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try again
          </button>
        </div>
      )
    }

    return this.props.children
  }
}

Sentry Setup

// sentry.ts
import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
  beforeSend(event, hint) {
    if (event.exception) {
      console.error(hint.originalException || hint.syntheticException)
    }
    return event
  },
})

// Usage
try {
  throw new Error('Test error')
} catch (error) {
  Sentry.captureException(error)
}

Async Error Handling

// hooks/useAsyncError.ts
import { useState } from 'react'

export function useAsyncError() {
  const [, setError] = useState()

  return (error: Error) => {
    setError(() => {
      throw error
    })
  }
}

// Usage
function AsyncComponent() {
  const throwError = useAsyncError()

  useEffect(() => {
    fetchData().catch(throwError)
  }, [])
}

API Error Handling

// api/errorHandler.ts
export class APIError extends Error {
  constructor(public status: number, message: string) {
    super(message)
    this.name = 'APIError'
  }
}

export async function handleAPIError(response: Response) {
  if (!response.ok) {
    const error = await response.json()
    throw new APIError(response.status, error.message)
  }
  return response
}

// Usage
fetch('/api/data')
  .then(handleAPIError)
  .then(response => response.json())
  .catch(error => {
    if (error instanceof APIError) {
      if (error.status === 401) {
        // Redirect to login
      }
    }
    Sentry.captureException(error)
  })

Best Practices

• Use Error Boundaries at route level
• Log errors to monitoring service
• Show user-friendly error messages
• Provide retry mechanisms
• Track error frequency
• Monitor error trends
• Test error scenarios
• Document common errors

When to Use This Skill

Use when you need to:

• Set up error monitoring
• Create Error Boundaries
• Integrate Sentry or LogRocket
• Handle API errors gracefully
• Build error recovery mechanisms
• Improve error UX
• Debug production errors

Output Format

Provide:

1. Error Boundaries: Component-level error handling
2. Monitoring Setup: Sentry/LogRocket configuration
3. Error UI: User-friendly error pages
4. Logging Strategy: What and how to log
5. Recovery Mechanisms: How users can recover
6. Testing: Error scenario tests