error-resilience-expert

Error & Resilience Expert (2026 Edition)

English | Bahasa Indonesia

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-grade guide for building resilient applications that fail gracefully, recover automatically, and provide actionable error feedback to users and developers. Covers React Error Boundaries, Next.js error handling (error.tsx, global-error.tsx, not-found.tsx), API error response standards (RFC 9457 Problem Details), retry patterns with exponential backoff, circuit breaker patterns, dead letter queues, and Sentry/BugSnag integration.

Trigger Conditions

Activate this skill when:

• Setting up error handling for React/Next.js applications.
• Implementing retry logic for unreliable API calls or third-party services.
• Designing circuit breaker patterns for microservice-to-microservice calls.
• Building fallback UI for degraded service states.
• Integrating error tracking tools (Sentry, BugSnag, LogRocket).
• Handling transaction failures in database operations.
• Designing dead letter queues for failed async jobs.

Core Concepts

Error Handling Philosophy

1. React & Next.js Error Handling

Error Boundaries (React 19)

// components/error-boundary.tsx
'use client';

import { Component, type ErrorInfo, type ReactNode } from 'react';

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

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

export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    this.props.onError?.(error, errorInfo);
    // Report to Sentry/BugSnag
    if (typeof window !== 'undefined' && window.Sentry) {
      window.Sentry.captureException(error, { extra: errorInfo });
    }
  }

  reset = () => this.setState({ hasError: false, error: null });

  render() {
    if (this.state.hasError && this.state.error) {
      const { fallback } = this.props;
      return typeof fallback === 'function'
        ? fallback(this.state.error, this.reset)
        : fallback;
    }
    return this.props.children;
  }
}