roedyrustam Error & Resilience Expert (2026 Edition)
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
| Principle | Description |
|---|---|
| Fail Fast | Detect and report errors early; don't let invalid state propagate |
| Fail Gracefully | Show useful fallback UI, not blank screens or raw stack traces |
| Retry Intelligently | Use exponential backoff + jitter; never retry non-idempotent operations blindly |
| Isolate Failures | A failing component shouldn't crash the entire page |
| Track Everything | Every unhandled error must reach your monitoring system |
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;
}
}
Next.js App Router Error Files
// app/error.tsx — Route-level error handler
'use client';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<div role="alert" className="error-container">
<h2>Something went wrong</h2>
<p>{error.message}</p>
{error.digest && <p className="text-muted">Error ID: {error.digest}</p>}
<button again</button>
</div>
);
}
// app/not-found.tsx — 404 handler
export default function NotFound() {
return (
<div>
<h2>Page Not Found</h2>
<p>The page you are looking for does not exist.</p>
</div>
);
}
// app/global-error.tsx — Root layout error handler (catches layout errors)
'use client';
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button again</button>
</body>
</html>
);
}
2. API Error Response Standards (RFC 9457)
// lib/api-error.ts
export class ApiError extends Error {
constructor(
public readonly status: number,
public readonly code: string,
message: string,
public readonly details?: Record<string, unknown>,
) {
super(message);
this.name = 'ApiError';
}
/** RFC 9457 Problem Details JSON response */
toJSON() {
return {
type: `https://api.example.com/errors/${this.code}`,
title: this.code.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
status: this.status,
detail: this.message,
...(this.details && { extensions: this.details }),
};
}
}
// Usage in API route
export async function POST(request: Request) {
try {
const body = await request.json();
const parsed = createUserSchema.safeParse(body);
if (!parsed.success) {
throw new ApiError(422, 'validation_error', 'Invalid request body', {
errors: parsed.error.flatten().fieldErrors,
});
}
// ...business logic
} catch (error) {
if (error instanceof ApiError) {
return Response.json(error.toJSON(), { status: error.status });
}
// Unexpected error — log and return generic 500
console.error('Unhandled error:', error);
return Response.json(
{ type: 'about:blank', title: 'Internal Server Error', status: 500 },
{ status: 500 },
);
}
}
3. Retry Patterns with Exponential Backoff
// lib/retry.ts
interface RetryOptions {
maxRetries?: number;
baseDelayMs?: number;
maxDelayMs?: number;
/** Only retry if this returns true */
retryIf?: (error: unknown) => boolean;
onRetry?: (attempt: number, error: unknown) => void;
}
export async function withRetry<T>(
fn: () => Promise<T>,
options: RetryOptions = {},
): Promise<T> {
const {
maxRetries = 3,
baseDelayMs = 500,
maxDelayMs = 30_000,
retryIf = isRetryable,
onRetry,
} = options;
let lastError: unknown;
for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
return await fn();
} catch (error) {
lastError = error;
if (attempt === maxRetries || !retryIf(error)) {
throw error;
}
// Exponential backoff with jitter
const delay = Math.min(
baseDelayMs * 2 ** attempt + Math.random() * baseDelayMs,
maxDelayMs,
);
onRetry?.(attempt + 1, error);
await sleep(delay);
}
}
throw lastError;
}
function isRetryable(error: unknown): boolean {
if (error instanceof ApiError) {
// Retry 429 (rate limit), 502/503/504 (server errors)
return [429, 502, 503, 504].includes(error.status);
}
// Retry network errors
if (error instanceof TypeError && error.message.includes('fetch')) return true;
return false;
}
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
4. Circuit Breaker Pattern
// lib/circuit-breaker.ts
type CircuitState = 'CLOSED' | 'OPEN' | 'HALF_OPEN';
interface CircuitBreakerOptions {
failureThreshold?: number;
resetTimeoutMs?: number;
halfOpenMaxAttempts?: number;
}
export class CircuitBreaker {
private state: CircuitState = 'CLOSED';
private failureCount = 0;
private lastFailureTime = 0;
private halfOpenAttempts = 0;
constructor(
private readonly name: string,
private readonly options: CircuitBreakerOptions = {},
) {}
private get failureThreshold() { return this.options.failureThreshold ?? 5; }
private get resetTimeoutMs() { return this.options.resetTimeoutMs ?? 60_000; }
async execute<T>(fn: () => Promise<T>): Promise<T> {
if (this.state === 'OPEN') {
if (Date.now() - this.lastFailureTime >= this.resetTimeoutMs) {
this.state = 'HALF_OPEN';
this.halfOpenAttempts = 0;
} else {
throw new Error(`Circuit breaker "${this.name}" is OPEN`);
}
}
try {
const result = await fn();
this.onSuccess();
return result;
} catch (error) {
this.onFailure();
throw error;
}
}
private onSuccess() {
this.failureCount = 0;
this.state = 'CLOSED';
}
private onFailure() {
this.failureCount++;
this.lastFailureTime = Date.now();
if (this.failureCount >= this.failureThreshold) {
this.state = 'OPEN';
}
}
getState(): CircuitState { return this.state; }
}
// Usage
const paymentCircuit = new CircuitBreaker('stripe-api', {
failureThreshold: 3,
resetTimeoutMs: 30_000,
});
const charge = await paymentCircuit.execute(() =>
stripe.paymentIntents.create({ amount: 1000, currency: 'usd' })
);
5. Graceful Degradation & Fallback UI
// components/resilient-data.tsx
'use client';
import { useSuspenseQuery } from '@tanstack/react-query';
import { Suspense } from 'react';
import { ErrorBoundary } from './error-boundary';
// Pattern: Wrap data-dependent UI with ErrorBoundary + Suspense
export function ResilientDataSection() {
return (
<ErrorBoundary
fallback={(error, reset) => (
<div className="degraded-state">
<p>Unable to load latest data. Showing cached version.</p>
<button
</div>
)}
>
<Suspense fallback={<DataSkeleton />}>
<LiveDataSection />
</Suspense>
</ErrorBoundary>
);
}
6. Dead Letter Queue for Failed Jobs
// queues/dead-letter.ts
import { Queue, Worker } from 'bullmq';
const mainQueue = new Queue('email-send', { connection: redis });
const deadLetterQueue = new Queue('email-send-dlq', { connection: redis });
const worker = new Worker('email-send', async (job) => {
await sendEmail(job.data);
}, {
connection: redis,
settings: {
backoffStrategy: (attemptsMade) => {
// Exponential backoff: 1s, 4s, 16s, 64s
return Math.min(1000 * 4 ** attemptsMade, 120_000);
},
},
});
worker.on('failed', async (job, err) => {
if (job && job.attemptsMade >= (job.opts.attempts ?? 3)) {
// Move to dead letter queue for manual investigation
await deadLetterQueue.add('failed-email', {
originalJobId: job.id,
data: job.data,
error: err.message,
failedAt: new Date().toISOString(),
});
}
});
Common Pitfalls to Avoid
| Anti-Pattern | Problem | Correct Approach |
|---|---|---|
Catching errors silently (catch (e) {}) |
Errors disappear, bugs hide | Always log or re-throw with context |
| Retrying non-idempotent operations | Duplicate charges, double inserts | Only retry reads and idempotent writes |
| No timeout on external calls | Thread/connection pool exhaustion | Set AbortSignal.timeout() on all fetch calls |
| Generic "Something went wrong" for all errors | Users can't self-resolve | Show actionable messages (retry, contact support, check input) |
Using try/catch around every single line |
Code becomes unreadable | Use error boundaries and middleware for batch handling |
Integration with Other Skills
js-backend-expert— API middleware error handling and response formattingsenior-frontend— React Error Boundaries and Suspense patternsdatabase-orm-expert— Transaction error handling and rollback patternslogging-error-tracking-expert— Sentry/BugSnag integration and structured error loggingasync-queue-temporal-expert— Dead letter queues and retry strategies for background jobsproduction-ready-hardener— Pre-launch error handling audit checklistapi-design-expert— RFC 9457 error response specification
Bahasa Indonesia
Integrasi Orkestrasi
Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, dan project-context-mapper untuk memastikan eksekusi yang kohesif.
Deskripsi
Panduan tingkat produksi untuk membangun aplikasi yang tahan banting — gagal secara anggun, pulih otomatis, dan memberikan umpan balik error yang dapat ditindaklanjuti kepada pengguna maupun developer. Mencakup React Error Boundaries, penanganan error Next.js (error.tsx, global-error.tsx, not-found.tsx), standar respons error API (RFC 9457 Problem Details), pola retry dengan exponential backoff, pola circuit breaker, dead letter queues, dan integrasi Sentry/BugSnag.
Kondisi Pemicu
Aktifkan skill ini ketika:
- Menyiapkan penanganan error untuk aplikasi React/Next.js.
- Mengimplementasikan logika retry untuk panggilan API yang tidak stabil atau layanan pihak ketiga.
- Merancang pola circuit breaker untuk panggilan antar-microservice.
- Membangun UI fallback untuk kondisi layanan terdegradasi.
- Mengintegrasikan alat pelacak error (Sentry, BugSnag, LogRocket).
- Menangani kegagalan transaksi pada operasi database.
- Merancang dead letter queue untuk job asinkron yang gagal.
Konsep Inti
Filosofi Penanganan Error
| Prinsip | Deskripsi |
|---|---|
| Gagal Cepat | Deteksi dan laporkan error sedini mungkin; jangan biarkan state invalid menyebar |
| Gagal dengan Anggun | Tampilkan UI fallback yang berguna, bukan layar kosong atau stack trace mentah |
| Retry dengan Cerdas | Gunakan exponential backoff + jitter; jangan retry operasi non-idempoten secara membabi buta |
| Isolasi Kegagalan | Komponen yang gagal tidak boleh menghancurkan seluruh halaman |
| Lacak Semuanya | Setiap error yang tidak tertangani harus sampai ke sistem monitoring |
Kesalahan Umum yang Harus Dihindari
| Anti-Pola | Masalah | Pendekatan yang Benar |
|---|---|---|
Menangkap error diam-diam (catch (e) {}) |
Error menghilang, bug tersembunyi | Selalu log atau lempar ulang dengan konteks |
| Retry operasi non-idempoten | Charge ganda, insert duplikat | Hanya retry operasi baca dan write idempoten |
| Tidak ada timeout pada panggilan eksternal | Thread/pool koneksi habis | Pasang AbortSignal.timeout() pada semua panggilan fetch |
| Pesan generik "Terjadi kesalahan" untuk semua error | Pengguna tidak bisa menyelesaikan sendiri | Tampilkan pesan yang actionable (retry, hubungi support, periksa input) |
Integrasi dengan Skill Lain
js-backend-expert— Middleware penanganan error API dan pemformatan responssenior-frontend— React Error Boundaries dan pola Suspensedatabase-orm-expert— Penanganan error transaksi dan pola rollbacklogging-error-tracking-expert— Integrasi Sentry/BugSnag dan logging error terstrukturasync-queue-temporal-expert— Dead letter queue dan strategi retry untuk background jobproduction-ready-hardener— Checklist audit penanganan error sebelum peluncuranapi-design-expert— Spesifikasi respons error RFC 9457