javascript / expert
Snippet
Fehlergrenzen-Wiederherstellung mit startTransition in Next.js error.tsx
Next.js App Router Fehlergrenzen (`error.tsx`) erhalten eine `reset`-Funktion für den erneuten Renderversuch des Segments. Das Einbetten von `reset()` in Reacts `startTransition` stellt sicher, dass die Zustandswiederherstellung nebenläufig erfolgt, ohne laufende Client-Interaktionen zu blockieren.
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
Erklärung
1
startTransition(() => { reset(); });
Ummantelt den Reset-Callback der Fehlergrenze in einer blockierungsfreien React-Transition.
2
<h2>{error.digest ? `Error ID: ${error.digest}` : 'An unexpected error occurred'}</h2>
Rendert vom Server bereitgestellte bereinigte Fehler-Digest-Hashes für die Produktionsdiagnose.