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 Ihnen ein Overlay angezeigt. Dabei handelt es sich um ein Modal, 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 stellt standardmäßig eine statische 500-Seite bereit, um Server-seitige Fehler in Ihrer Anwendung zu behandeln. Sie können diese Seite 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 das Bereitstellen einer benutzerdefinierten Fallback-Komponente und sogar das Protokollieren 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 wrappen. Diese Komponente ist verantwortlich für:

Das Rendern einer Fallback-UI nach einem aufgetretenen Fehler
Das Zurücksetzen des Anwendungszustands
Das Protokollieren 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() {
    // Überprüfen, ob ein Fehler aufgetreten ist
    if (this.state.hasError) {
      // Benutzerdefinierte Fallback-UI rendern
      return (
        <div>
          <h2>Hoppla, ein Fehler ist aufgetreten!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Erneut versuchen?
          </button>
        </div>
      )
    }

    // Kindkomponenten rendern, wenn kein Fehler vorliegt

    return this.props.children
  }
}

export default ErrorBoundary

Die ErrorBoundary-Komponente verfolgt einen hasError-Zustand. Der Wert dieser Zustandsvariablen ist ein Boolean. Wenn der Wert von hasError true ist, rendert die ErrorBoundary-Komponente eine Fallback-UI. Andernfalls werden die Kindkomponenten 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 zu wrappen.

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

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

export default MyApp

Mehr über Error Boundaries erfahren Sie in der React-Dokumentation.

Fehlerberichterstattung

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