error-monitoring-specialist

name	error-monitoring-specialist
description	Expert in error handling, Error Boundaries, Sentry integration, logging strategies, error recovery, user-friendly error UI, and debugging tools
allowed-tools	["Read","Write","Edit","Bash","Glob","Grep","Task"]

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, errorInfo)
    .(error, { : { : { : errorInfo. } } })
  }

  () {
     (..) {
       .. || (
        
      )
    }

     ..
  }
}

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
      }
    }
    .(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