javascript / expert
Snippet
Error Boundary State Recovery with startTransition in Next.js error.tsx
Next.js App Router error boundaries (`error.tsx`) receive a `reset` function to attempt re-rendering the segment. Wrapping `reset()` inside React's `startTransition` ensures that state recovery happens concurrently, allowing background re-evaluations without blocking ongoing client transitions or UI interactions.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use client';import { startTransition } from 'react';export default function ErrorBoundary({ error, reset }) {const handleReset = () => {startTransition(() => {reset();});};return (<div role="alert"><h2>{error.digest ? `Error ID: ${error.digest}` : 'An unexpected error occurred'}</h2><button onClick={handleReset}>Try again</button></div>);}
nextjs
Breakdown
1
startTransition(() => { reset(); });
Wraps the error boundary reset callback inside a non-blocking React transition.
2
<h2>{error.digest ? `Error ID: ${error.digest}` : 'An unexpected error occurred'}</h2>
Renders server-provided sanitized error digest hashes for production diagnostics.