error.js

Eine error-Datei definiert eine Fehler-UI-Grenze (Error Boundary) für ein Routensegment.

Sie ist nützlich, um unerwartete Fehler abzufangen, die in Server-Komponenten und Client-Komponenten auftreten, und eine Fallback-UI anzuzeigen.

'use client' // Error-Komponenten 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 Fehlerreporting-Service senden
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Etwas ist schiefgelaufen!</h2>
      <button
        onClick={
          // Versuch, durch erneutes Rendern des Segments wiederherzustellen
          () => reset()
        }
      >
        Erneut versuchen
      </button>
    </div>
  )
}

'use client' // Error-Komponenten müssen Client-Komponenten sein

import { useEffect } from 'react'

export default function Error({ error, reset }) {
  useEffect(() => {
    // Fehler an einen Fehlerreporting-Service senden
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Etwas ist schiefgelaufen!</h2>
      <button
        onClick={
          // Versuch, durch erneutes Rendern des Segments wiederherzustellen
          () => reset()
        }
      >
        Erneut versuchen
      </button>
    </div>
  )
}

Props

`error`

Eine Instanz eines Error-Objekts, das an die error.js Client-Komponente weitergeleitet wird.

`error.message`

Die Fehlermeldung.

Für Fehler aus Client-Komponenten entspricht dies der ursprünglichen Fehlermeldung.
Für Fehler aus Server-Komponenten ist dies eine generische Fehlermeldung, um sensible Details zu vermeiden. error.digest kann verwendet werden, um den entsprechenden Fehler in Server-Logs zu finden.

`error.digest`

Ein automatisch generierter Hash des in einer Server-Komponente aufgetretenen Fehlers. Kann verwendet werden, um den entsprechenden Fehler in Server-Logs zu identifizieren.

Eine Funktion zum Zurücksetzen der Error Boundary. Bei Ausführung versucht die Funktion, die Inhalte der Error Boundary neu zu rendern. Bei Erfolg wird die Fallback-Fehlerkomponente durch das Ergebnis des Neu-Renderings ersetzt.

Kann verwendet werden, um Benutzer aufzufordern, sich vom Fehler zu erholen.

Wissenswert:

error.js-Grenzen müssen Client-Komponenten sein.

In Produktions-Builds werden Fehler aus Server-Komponenten von spezifischen Fehlerdetails bereinigt, um sensible Informationen zu schützen.

Eine error.js-Grenze behandelt keine Fehler, die in einer layout.js-Komponente im selben Segment auftreten, da die Error Boundary innerhalb dieser Layout-Komponente verschachtelt ist.

Um Fehler für ein bestimmtes Layout zu behandeln, platzieren Sie eine error.js-Datei im übergeordneten Segment des Layouts.

Für Fehlerbehandlung im Root-Layout oder Template verwenden Sie eine Variante von error.js namens app/global-error.js.

`global-error.js`

Um speziell Fehler im Root-layout.js zu behandeln, verwenden Sie eine Variante von error.js namens app/global-error.js im Root-app-Verzeichnis.

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>Etwas ist schiefgelaufen!</h2>
        <button onClick={() => reset()}>Erneut versuchen</button>
      </body>
    </html>
  )
}

'use client'

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>Etwas ist schiefgelaufen!</h2>
        <button onClick={() => reset()}>Erneut versuchen</button>
      </body>
    </html>
  )
}

Wissenswert:

global-error.js ersetzt das Root-layout.js im aktiven Zustand und muss daher eigene <html>- und <body>-Tags definieren.

Beim Design der Fehler-UI kann es hilfreich sein, die React Developer Tools zu verwenden, um Error Boundaries manuell zu steuern.

not-found.js

Die not-found-Datei wird verwendet, um UI anzuzeigen, wenn die notFound()-Funktion innerhalb eines Routensegments aufgerufen wird.

Versionsverlauf

Version	Änderungen
`v13.1.0`	`global-error` eingeführt.
`v13.0.0`	`error` eingeführt.