Fehlerbehandlung

Diese Dokumentation erklärt, wie Sie Entwicklungs-, Server-seitige und Client-seitige Fehler behandeln können.

Fehlerbehandlung während der Entwicklung

Wenn während der Entwicklungsphase Ihrer Next.js-Anwendung ein Laufzeitfehler auftritt, wird eine Overlay-Meldung angezeigt. Dabei handelt es sich um ein modales Fenster, das die Webseite überlagert. Es ist ausschließlich sichtbar, wenn der Entwicklungsserver mit next dev über pnpm dev, npm run dev, yarn dev oder bun dev läuft und wird in der Produktionsumgebung nicht angezeigt. Das Beheben des Fehlers schließt das Overlay automatisch.

Hier ein Beispiel für ein Overlay:

Server-seitige Fehlerbehandlung

Next.js bietet standardmäßig eine statische 500-Seite zur Behandlung von Server-seitigen Fehlern in Ihrer Anwendung. Sie können diese Seite auch anpassen, indem Sie eine pages/500.js-Datei erstellen.

Eine 500-Seite in Ihrer Anwendung zeigt dem Benutzer keine spezifischen Fehlermeldungen an.

Sie können auch eine 404-Seite verwenden, um bestimmte Laufzeitfehler wie Datei nicht gefunden zu behandeln.

Client-seitige Fehlerbehandlung

React Error Boundaries bieten eine elegante Möglichkeit, JavaScript-Fehler auf dem Client zu behandeln, sodass die anderen Teile der Anwendung weiterhin funktionieren. Neben der Vermeidung von Seitenabstürzen ermöglichen sie die Bereitstellung einer benutzerdefinierten Fallback-Komponente und sogar die Protokollierung von Fehlerinformationen.

Um Error Boundaries in Ihrer Next.js-Anwendung zu verwenden, müssen Sie eine Klassenkomponente ErrorBoundary erstellen und die Component-Prop in der pages/_app.js-Datei damit umschließen. Diese Komponente ist verantwortlich für:

• Anzeige einer Fallback-UI nach einem aufgetretenen Fehler
• Bereitstellung einer Möglichkeit zum Zurücksetzen des Anwendungszustands
• Protokollierung von Fehlerinformationen

Sie können eine ErrorBoundary-Klassenkomponente durch Erweitern von React.Component erstellen. Beispiel:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)

    // Zustandsvariable zur Verfolgung von Fehlern definieren
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Zustand aktualisieren, um die Fallback-UI anzuzeigen

    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // Hier können Sie Ihren eigenen Fehlerprotokollierungsdienst verwenden
    console.log({ error, errorInfo })
  }
  render() {
    // Prüfen, ob ein Fehler aufgetreten ist
    if (this.state.hasError) {
      // Benutzerdefinierte Fallback-UI rendern
      return (
        <div>
          <h2>Ups, ein Fehler ist aufgetreten!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Erneut versuchen?
          </button>
        </div>
      )
    }

    // Kinderkomponenten rendern, wenn kein Fehler vorliegt

    return this.props.children
  }
}

export default ErrorBoundary

Die ErrorBoundary-Komponente verwaltet einen hasError-Zustand. Der Wert dieser Zustandsvariable ist ein Boolean. Wenn der Wert von hasError true ist, rendert die ErrorBoundary-Komponente eine Fallback-UI. Andernfalls werden die Kinderkomponenten gerendert.

Nach der Erstellung einer ErrorBoundary-Komponente importieren Sie sie in der pages/_app.js-Datei, um die Component-Prop in Ihrer Next.js-Anwendung damit zu umschließen.

// ErrorBoundary-Komponente importieren
import ErrorBoundary from '../components/ErrorBoundary'

function MyApp({ Component, pageProps }) {
  return (
    // Component-Prop mit ErrorBoundary-Komponente umschließen
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

export default MyApp

Weitere Informationen zu Error Boundaries finden Sie in der React-Dokumentation.

Fehlerberichterstattung

Um Client-seitige Fehler zu überwachen, können Sie Dienste wie Sentry, Bugsnag oder Datadog verwenden.