error.js

Eine error-Datei definiert eine Fehler-UI-Grenze 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 Fehlerberichtsdienst 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 Fehlerberichtsdienst 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, die von Client-Komponenten weitergeleitet werden, ist dies die ursprüngliche Fehlermeldung.
Für Fehler, die von Server-Komponenten weitergeleitet werden, ist dies eine generische Fehlermeldung, um sensible Details zu vermeiden. errors.digest kann verwendet werden, um den entsprechenden Fehler in serverseitigen Logs zu finden.

`error.digest`

Ein automatisch generierter Hash des in einer Server-Komponente ausgelösten Fehlers. Er kann verwendet werden, um den entsprechenden Fehler in serverseitigen Logs zu finden.

Eine Funktion zum Zurücksetzen der Fehlergrenze. Bei Ausführung versucht die Funktion, die Inhalte der Error-Grenze erneut zu rendern. Wenn erfolgreich, wird die Fallback-Fehlerkomponente durch das Ergebnis des erneuten Renderings ersetzt.

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

Wissenswert:

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

In Produktions-Builds werden Fehler, die von Server-Komponenten weitergeleitet werden, 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 ausgelöst werden, da die Fehlergrenze 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.

Um Fehler innerhalb des Root-Layouts oder Templates zu behandeln, 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, wenn aktiv, und muss daher seine eigenen <html>- und <body>-Tags definieren.

Beim Entwerfen der Fehler-UI kann es hilfreich sein, die React Developer Tools zu verwenden, um Error-Grenzen manuell umzuschalten.

not-found.js

Die not-found-Datei wird verwendet, um die UI zu rendern, wenn die notFound()-Funktion innerhalb eines Routensegments ausgelöst wird.

Versionsverlauf

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