Fehlerbehandlung

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

Fehler in der Entwicklungsphase behandeln

Wenn während der Entwicklungsphase Ihrer Next.js-Anwendung ein Laufzeitfehler auftritt, erhalten Sie ein Overlay. Es handelt sich um ein Modal, das die Webseite abdeckt. 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 Produktion nicht angezeigt. Das Beheben des Fehlers wird das Overlay automatisch schließen.

Hier ist ein Beispiel für ein Overlay:

Server-Fehler behandeln

Next.js bietet standardmäßig eine statische 500-Seite zur Behandlung von serverseitigen Fehlern in Ihrer Anwendung. 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 Fehler an.

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

Client-Fehler behandeln

React Error Boundaries ist eine elegante Möglichkeit, einen JavaScript-Fehler auf der Client-Seite zu behandeln, sodass andere Teile der Anwendung weiterhin funktionieren. Zusätzlich zum Verhindern des Seitenabsturzes können Sie eine benutzerdefinierte Fallback-Komponente bereitstellen und sogar Fehlerinformationen protokollieren.

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

• Rendern einer Fallback-Benutzeroberfläche nach dem Auftreten eines Fehlers
• Bereitstellen einer Möglichkeit zum Zurücksetzen des Anwendungszustands
• Protokollieren von Fehlerinformationen

Sie können eine ErrorBoundary-Klassen-Komponente erstellen, indem Sie React.Component erweitern. Zum Beispiel:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
 
    // Definieren einer Zustandsvariable zur Verfolgung eines Fehlers
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Zustand aktualisieren, damit beim nächsten Rendern die Fallback-Benutzeroberfläche angezeigt wird
 
    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // Sie können hier Ihren eigenen Fehlerprotokollierungsdienst verwenden
    console.log({ error, errorInfo })
  }
  render() {
    // Prüfen, ob ein Fehler aufgetreten ist
    if (this.state.hasError) {
      // Sie können eine benutzerdefinierte Fallback-Benutzeroberfläche rendern
      return (
        <div>
          <h2>Ups, es ist ein Fehler aufgetreten!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Erneut versuchen?
          </button>
        </div>
      )
    }
 
    // Kindkomponenten zurückgeben, falls kein Fehler vorliegt
 
    return this.props.children
  }
}
 
export default ErrorBoundary

Die ErrorBoundary-Komponente verfolgt einen hasError-Zustand. Der Wert dieser Zustandsvariable ist ein boolescher Wert. Wenn der Wert von hasError true ist, rendert die ErrorBoundary-Komponente eine Fallback-Benutzeroberfläche. Andernfalls rendert sie die Kindkomponenten.

Nachdem Sie eine ErrorBoundary-Komponente erstellt haben, importieren Sie sie in die pages/_app.js-Datei, um die Component-Prop in Ihrer Next.js-Anwendung 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

Sie können mehr über Error Boundaries in der React-Dokumentation erfahren.

Fehler melden

Um Client-Fehler zu überwachen, verwenden Sie einen Dienst wie Sentry, Bugsnag oder Datadog.