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 ein Overlay angezeigt. Dabei handelt es sich um ein Modal, das die Webseite überlagert. Es ist nur 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 Fehler 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 wrappen. Diese Komponente ist verantwortlich für:

• Das Rendern einer Fallback-UI nach einem aufgetretenen Fehler
• Die Bereitstellung einer Möglichkeit, den Anwendungszustand zurückzusetzen
• Die Protokollierung von Fehlerinformationen

Sie können eine ErrorBoundary-Klassenkomponente erstellen, indem Sie React.Component erweitern. 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, damit das nächste Rendering die Fallback-UI zeigt
    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>
      )
    }

    // Kindkomponenten zurückgeben, 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 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-seitige Fehler zu überwachen, können Sie Dienste wie Sentry, Bugsnag oder Datadog verwenden.