error.js
Eine error-Datei ermöglicht es Ihnen, unerwartete Laufzeitfehler zu behandeln und alternative Benutzeroberfläche anzuzeigen.
'use client' // Fehlergrenzen müssen Client-Komponenten sein
import { useEffect } from 'react'
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
useEffect(() => {
// Fehler an einen Fehlerberichterstattungsdienst protokollieren
console.error(error)
}, [error])
return (
<div>
<h2>Etwas ist schiefgelaufen!</h2>
<button
onClick={
// Versuch, durch erneutes Rendern des Segments zu beheben
() => reset()
}
>
Erneut versuchen
</button>
</div>
)
}Wie error.js funktioniert
error.js umschließt ein Routensegment und seine verschachtelten untergeordneten Elemente in einer React-Fehlergrenze. Wenn ein Fehler innerhalb der Grenze auftritt, wird die error-Komponente als alternative Benutzeroberfläche angezeigt.
Hinweis:
- Mit den React DevTools können Sie Fehlergrenzen umschalten, um Fehlerzustände zu testen.
Props
error
Eine Instanz eines Error-Objekts, das an die error.js-Client-Komponente weitergeleitet wird.
Hinweis: Während der Entwicklung wird das an den Client weitergeleitete
Error-Objekt serialisiert und enthält diemessagedes ursprünglichen Fehlers für einfachere Fehlersuche. Das Verhalten ist jedoch in der Produktion anders, um möglicherweise sensible Details zu vermeiden.
error.message
- Fehler von Client-Komponenten zeigen die ursprüngliche
Error-Nachricht. - Fehler von Server-Komponenten zeigen eine generische Nachricht mit einem Bezeichner. Dies verhindert das Durchsickern sensibler Details. Sie können den Bezeichner unter
errors.digestverwenden, um die entsprechenden serverseitigen Protokolle zu finden.
error.digest
Ein automatisch generierter Hash des geworfenen Fehlers. Er kann verwendet werden, um den entsprechenden Fehler in serverseitigen Protokollen zu finden.
reset
Die Ursache eines Fehlers kann manchmal vorübergehend sein. In diesen Fällen kann ein erneuter Versuch das Problem möglicherweise lösen.
Eine Fehlerkomponente kann die reset()-Funktion verwenden, um den Benutzer aufzufordern, den Fehler zu beheben. Bei Ausführung versucht die Funktion, den Inhalt der Fehlergrenze erneut zu rendern. Bei Erfolg wird die alternative Fehlerkomponente durch das Ergebnis des erneuten Renderns ersetzt.
'use client' // Fehlergrenzen müssen Client-Komponenten sein
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
<div>
<h2>Etwas ist schiefgelaufen!</h2>
<button onClick={() => reset()}>Erneut versuchen</button>
</div>
)
}global-error.js
Seltener kann man Fehler im Root-Layout oder -Template mithilfe von app/global-error.js im Root-App-Verzeichnis behandeln, selbst bei Verwendung von Internationalisierung. Die globale Fehler-UI muss eigene <html>- und <body>-Tags definieren. Diese Datei ersetzt das Root-Layout oder -Template, wenn sie aktiv ist.
'use client' // Fehlergrenzen müssen Client-Komponenten sein
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
// global-error muss html- und body-Tags enthalten
<html>
<body>
<h2>Etwas ist schiefgelaufen!</h2>
<button onClick={() => reset()}>Erneut versuchen</button>
</body>
</html>
)
}Hinweis:
global-error.jsist nur in der Produktion aktiviert. In der Entwicklung wird stattdessen unser Fehler-Overlay angezeigt.
not-found.js
Die not-found-Datei zeigt eine Benutzeroberfläche an, wenn die notFound()-Funktion innerhalb eines Routensegments aufgerufen wird.
Versionshistorie
| Version | Änderungen |
|---|---|
v13.1.0 | global-error eingeführt. |
v13.0.0 | error eingeführt. |