javascript / intermediate
Snippet
Laufzeitfehler mit error.tsx behandeln
In Next.js fungiert die Datei error.tsx als React Error Boundary. Sie fängt unerwartete Fehler in ihrem Segment und ihren Untersegmenten ab und ermöglicht es Ihnen, eine Fallback-UI anzuzeigen, anstatt die gesamte App zum Absturz zu bringen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use client';import { useEffect } from 'react';export default function Error({ error, reset }: { error: Error; reset: () => void }) {useEffect(() => {console.error(error);}, [error]);return (<div><h2>Something went wrong!</h2><button onClick={() => reset()}>Try again</button></div>);}
nextjs
Erklärung
1
'use client';
Error Boundaries müssen Client-Komponenten sein, da sie mit den Fehler-Events des Browsers interagieren.
2
reset: () => void
Eine Funktion, die das Segment auffordert, das Rendering erneut zu versuchen, was temporäre Probleme lösen kann.