Mastering Next.js Fehlerbehandlung mit dem App -Router

next.js 13.4 Fehlerbehandlungshandbuch für App Router

In diesem Artikel wird erläutert, wie die neue Fehlerdateikonvention verwendet wird, um Fehler im App -Router in Next.js.

Fehlerbehandlung ist ein wichtiger Aspekt jeder Webanwendungsentwicklung. In der Vergangenheit half die Entwickler in der Vergangenheit bei der nächsten. Diese Seiten haben jedoch Einschränkungen im Seitenrouter, z.

Nach der Veröffentlichung von Next.js Version 13.4 wurde der neue App -Router offiziell in die Produktion gebracht. App Router verbessert die Support- und Entwicklererfahrung für Fehlerbehandlungen und andere grundlegende Teile des Webanwendungsgebäudes.

Schlüsselpunkte

• Next.js Version 13.4 führt den App -Router vor, der die Unterstützung und Entwicklererfahrung für die Fehlerbehandlung und andere wichtige Teile Ihrer Webanwendung verbessert.
Die
• app -Datei im Verzeichnis error.tsx erstellt eine React -Fehlergrenze, um zu verhindern, dass die Anwendung beim Auftreten eines Fehlers abstürzt. Es kann auch als Fallback -Komponente wirken und rendern, wenn ein Fehler in die Grenze geworfen wird.
• benutzerdefinierte Ausnahmen können für abstrakte Fehlermeldungen über mehrere Routen in Ihrer Anwendung erstellt werden. Beispielsweise können Sie ein benutzerdefiniertes AuthRequiredError verwenden, um Authentifizierungsfehler in verschiedenen Routen zu behandeln.
• Fehler können überall in der nächsten.js -Anwendung auftreten. Sie sprudeln zur nächstgelegenen übergeordneten Fehlergrenze. Für Root -Layout- oder Vorlagenfehler sollte die global-error.tsx -Datei verwendet werden. Wenn in der Serverkomponente oder während der Datenerfassung ein Fehler auftritt, leitet sie das entsprechende Fehlerobjekt an die nächste error.tsx Grenze weiter.

Szenen und Einstellungen

Um das Verständnis der neuen API für Fehlerbehandlungen zu erleichtern, werden wir die Implementierung in der NEXT.JS -Benutzerauthentifizierungsanwendung untersuchen.

Benutzerauthentifizierung ist anfällig für viele Fehler. Wenn Sie also andere Anwendungen erstellen, ist es von großem Nutzen zu lernen, wie man in dieser Situation Fehler umgeht.

Erhalten Sie vor dem Start den Code für die Demo -Anwendung, die wir in diesem Artikel verwenden, indem Sie das hier verknüpfte Repository (Hauptzweig) klonen. Nach dem Ausführen der Anwendung sollten Sie den in dem Bild unten angegebenen Fehler sehen.

In dieser Demo -Anwendung kann auf die Hauptseite (Anzeige des Formulars) nur vom angemeldeten Benutzer zugegriffen werden, aber einige Fehler sind aufgetreten (in diesem Fall ist sie künstlich, kann aber auch legal vorkommen), verursacht die Sitzung, die Sitzung, die Sitzung, die Sitzung, die Sitzung verursacht, verursacht die Sitzung, verursacht die Sitzung, verursacht jedoch auch die Sitzung, die Sitzung auftritt Variable zugewiesen werden NULL.

Hinweis: Zur Einfachheit wird die Authentifizierung in der Demo -Anwendung nicht implementiert.

Dies führt natürlich zu einem Fehler, und jetzt stürzt die Anwendung vollständig ab, da sie nicht weiß, wie man mit dem Fehler umgeht!

Jetzt werden wir lernen, wie wir mit diesem Fehler umgehen können, um zu verhindern, dass unsere Anwendung abstürzt, wodurch die Benutzererfahrung der Anwendung erheblich verbessert wird.

Erstellen Sie eine Fehlerseite

Um zu verhindern, dass die Anwendung stürzt, erstellen Sie im Verzeichnis app/ eine error.tsx -Datei. Das Erstellen dieser Datei erstellt automatisch eine React -Fehlergrenze, die die Hauptseite umhüllt. Exportieren Sie dann in der Datei error.tsx die folgende Funktion:

"use client";

export default function Error() {
  return (
    <div className="grid h-screen px-4 bg-white place-content-center">
      <div className="text-center">
        <h1 className="font-black text-gray-200 text-9xl">401</h1>
        <p className="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          未授权！
        </p>
        <p className="mt-4 text-gray-500">
          您必须登录才能访问此页面
        </p>
        <button
          type="button"
          className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring"
        >
          重试
        </button>
      </div>
    </div>
  );
}

Hinweis: Die Fehlerkomponente muss eine Client -Komponente sein! Stellen Sie sicher, dass Sie sie als Clientkomponenten markieren.

exportierte Funktionen fungieren als Fallback -Komponenten. Wenn ein Fehler in die Grenze geworfen wird, wird der Fehler gefangen und die Fallback -Komponente wird wie unten aussehen.

Wenn ein Fehler auftritt, werden zwei Props an die Fehlerfallenkomponente übergeben - das Fehlerobjekt selbst und eine Funktion (normalerweise zurückgesetzt), die versucht, sich von dem Fehler wiederherzustellen:

"use client";

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  // ...
}

Wir können jetzt über die Fehlerquelle auf die Fehlermeldung zugreifen und sie auf dem Bildschirm wie folgt anzeigen:

<p className="mt-4 text-gray-500">
  {error.message || "您必须登录才能访问此页面"}
</p>

Wenn diese Funktion aufgerufen wird, versucht die Reset -Funktion, den von der Fehlergrenze umgebenen ursprünglichen Inhalt umgeben. Bei Erfolg wird die Fallback-Fehlerkomponente durch den neu geführten Inhalt ersetzt.

Wir können die Funktionsaufrufe der Reset -Funktionen in unserer Schaltfläche mit dem Onclick -Handler implementieren:

<button
  type="button"
  onClick={() => reset()}
  className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring cursor-pointer"
>
  重试
</button>

Auf diese Weise haben wir unsere Fehler erfolgreich behandelt!

abstrakte Fehlermeldung

In einer tatsächlichen Benutzerauthentifizierungsanwendung können viele Routen geschützt werden, und wenn ein Authentifizierungsfehler auftritt, müssen Sie in mehreren Instanzen dieselbe Authentifizierungsfehlermeldung verwenden.

Zu abstrakten Fehlermeldungen (und nicht wiederholt geschrieben) können wir problemlos eine benutzerdefinierte Ausnahme in Bezug auf die Authentifizierung erstellen.

Erstellen Sie dazu ein Verzeichnis namens lib und erstellen Sie eine Datei namens exceptions.ts in diesem Verzeichnis. In dieser Datei können wir die Ausnahmen für benutzerdefinierte Authentifizierungsfehler wie folgt erstellen und exportieren:

export class AuthRequiredError extends Error {
  constructor(message = "需要身份验证才能访问此页面") {
    super(message);
    this.name = "AuthRequiredError";
  }
}

Jetzt können wir diesen neuen benutzerdefinierten AuthRequiredError auf die Hauptseite anstelle des regulären Error:

werfen

export default function Home() {
  if (!session) throw new AuthRequiredError();
  // ...
}

Dieser Fehler gibt uns die im Konstruktor übergebene Standardnachricht oder einen spezifischeren Fehler, den wir möglicherweise später übergeben müssen.

Weitere Informationen zum Fehlerhandling

Schauen wir uns schließlich einige Extras für Layout- und Serverfehler an.

Fehler in Layout

Fehler können überall in der Anwendung (nicht nur page.tsx Dateien) auftreten, und das von Next.js verwendete Dateirouting -System beeinflusst, wie error.tsx Grenzen in verschachtelten Routing und Layouts funktionieren.

Fehler werden an die nächstgelegene übergeordnete Fehlergrenze sprudeln, die im Bild unten zu sehen ist.

Die Art dieses Fehlers bedeutet, dass die error.tsx -Gengrenze Fehler in der Layout -Datei im selben Abschnitt nicht erfasst, da die Fehlergrenze die Layout -Datei einbackt.

Wenn ein Fehler in der Stammlayout oder im Stammlayout oder in der Vorlage auftritt, verwenden Sie die Datei global-error.tsx wie in der folgenden Abbildung gezeigt.

global-error.tsx Grenzen wickeln Sie die gesamte Anwendung ein. Fügen Sie daher Ihre eigene eindeutige und -Tags hinzu, wenn Sie diese Datei verwenden. Diese Fehlergrenze fängt alle Fehler fest, dass andere verschachtelte error.tsx -Gengrenze nicht gefangen werden, sodass sie nicht häufig aktiviert wird.

Server -Fehler

Wenn in der Serverkomponente oder während der Datenerfassung ein Fehler auftritt, leitet sie das entsprechende Fehlerobjekt an die nächste error.tsx Grenze weiter.

Schlussfolgerung und nächste Schritte

Obwohl viele Entwickler der Meinung sind, dass es umständlich ist, Fehlerbehandlungen zu implementieren, ist es ein wichtiger Bestandteil der Anwendung und die erfolgreiche Implementierung der Fehlerbehandlung wird die Benutzererfahrung der Anwendung erheblich verbessern.

Next.js macht dies mit dem App -Router und error.tsx Dateikonventionen sehr einfach.

Sie können die Dokumentation von Next.JS zum Fehler zur Fehlerbehandlung für weitere Informationen zur Fehlerbehandlung konsultieren, und Sie können auch den Abschlusscode für diesen Artikel auf GitHub anzeigen.

FAQs beim Mastering -Fehlerbehandlungen in Next.js mit App Router

(Der FAQS -Teil wird hier weggelassen, da der FAQs -Teil des Originaltextes ein hohes Maß an Duplikation mit dem Artikelinhalt aufweist und einige Probleme schwach mit dem Fehlerbehandlungsmechanismus des App -Routers korrelieren. Bei Bedarf können Sie bei Bedarf hinzufügen, können Sie hinzufügen es nach dem ursprünglichen Text.)

Das obige ist der detaillierte Inhalt vonMastering Next.js Fehlerbehandlung mit dem App -Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!