首頁 >web前端 >js教程 >掌握Next.js錯誤處理應用程序路由器

掌握Next.js錯誤處理應用程序路由器

Lisa Kudrow原創: 2025-02-09 12:27:151033瀏覽

Next.js 13.4 App Router 的錯誤處理指南

本文將介紹如何在 Next.js 的 App Router 中使用新的錯誤文件約定來處理錯誤。

錯誤處理是任何 Web 應用程序開發的關鍵方面。過去，Next.js 通過自定義錯誤頁面（如 404 和 500 頁面）來幫助開發者處理錯誤。但是，這些頁面在 Pages Router 中存在局限性，例如對特定 UI 集成的支持有限、對 React 錯誤邊界支持過時以及發生錯誤時應用程序功能有限。

Next.js 13.4 版本發布後，新的 App Router 已正式投入生產使用。 App Router 增強了對錯誤處理和其他 Web 應用程序構建基本部分的支持和開發人員體驗。

關鍵要點

Next.js 13.4 版本引入了 App Router，它增強了對錯誤處理以及構建 Web 應用程序其他重要部分的支持和開發人員體驗。
app 目錄中的 error.tsx 文件創建了一個 React 錯誤邊界，防止應用程序在發生錯誤時崩潰。它還可以充當回退組件，在邊界內拋出錯誤時呈現。
可以創建自定義異常來跨應用程序中的多個路由抽象錯誤消息。例如，可以使用自定義 AuthRequiredError 來處理各種路由中的身份驗證錯誤。
錯誤可能發生在 Next.js 應用程序的任何位置。它們會冒泡到最近的父錯誤邊界。對於根佈局或模板錯誤，應使用 global-error.tsx 文件。如果錯誤發生在服務器組件中或在數據獲取期間，Next.js 將把相應的 Error 對象轉發到最近的 error.tsx 邊界。

場景和設置

為了便於理解新的錯誤處理 API，我們將探討它在 Next.js 用戶身份驗證應用程序中的實現。

用戶身份驗證容易出現許多錯誤，因此在構建其他應用程序時，學習如何在這種情況下去處理錯誤將對您大有裨益。

在開始之前，請通過克隆此處鏈接的倉庫（主分支）來獲取我們將在此文中使用的演示應用程序的代碼。運行應用程序後，您應該會看到下圖所示的錯誤。

Mastering Next.js Error Handling with the App Router

在此演示應用程序中，主頁面（顯示表格）只能由已登錄的用戶訪問，但發生了一些錯誤（在這種情況下是人為製造的，但它也可能合法地發生），導致會話變量被賦值為null。

注意：為簡單起見，演示應用程序中不會實現身份驗證。

這當然會導致錯誤，現在，應用程序完全崩潰了，因為它不知道如何處理錯誤！

現在，我們將學習如何處理該錯誤以防止我們的應用程序崩潰，從而顯著提高應用程序的用戶體驗。

創建錯誤頁面

為了防止應用程序崩潰，在 app/ 目錄中，創建一個 error.tsx 文件。創建此文件會自動創建一個 React 錯誤邊界，該邊界將包裝主頁面。然後，在 error.tsx 文件中，導出以下函數：

<code class="language-typescript">"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>
  );
}</code>

注意：錯誤組件必須是客戶端組件！請務必將它們標記為客戶端組件。

導出的函數將充當回退組件。如果在邊界內拋出錯誤，則會捕獲該錯誤並呈現回退組件，該組件應如下所示。

Mastering Next.js Error Handling with the App Router

發生錯誤時，會將兩個 props 傳遞給錯誤回退組件——錯誤對象本身以及嘗試從錯誤中恢復的函數（通常稱為 reset）：

<code class="language-typescript">"use client";

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

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

我們現在可以通過 error prop 訪問錯誤消息，並將其顯示在屏幕上，如下所示：

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

當調用該函數時，reset 函數將嘗試重新渲染由錯誤邊界包圍的原始內容。如果成功，則回退錯誤組件將被重新渲染的內容替換。

我們可以使用 onClick 處理程序在我們的按鈕中實現 reset 函數調用：

<code class="language-typescript"><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></code>

這樣，我們就成功地處理了我們的錯誤！

抽象錯誤消息

在一個實際的用戶身份驗證應用程序中，可能會有許多必須受保護的路由，如果發生身份驗證錯誤，則需要在多個實例中使用相同的身份驗證錯誤消息。

為了抽象錯誤消息（並且不重複編寫），我們可以輕鬆地創建一個與身份驗證相關的自定義異常。

為此，創建一個名為 lib 的目錄，並在該目錄中創建一個名為 exceptions.ts 的文件。在此文件中，我們可以創建和導出自定義身份驗證錯誤異常，如下所示：

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

現在，我們可以在主頁面上拋出這個新的自定義 AuthRequiredError，而不是常規的 Error：

<code class="language-typescript">export default function Home() {
  if (!session) throw new AuthRequiredError();
  // ...
}</code>

該錯誤將給我們提供構造函數中傳遞的默認消息，或者我們以後可能需要傳遞的更具體的錯誤。

結論和後續步驟

儘管許多開發人員認為實現錯誤處理很麻煩，但它是應用程序的重要組成部分，成功實現錯誤處理將顯著提高應用程序的用戶體驗。

借助 App Router 和 error.tsx 文件約定，Next.js 使此操作變得非常簡單。

您可以查閱 Next.js 關於錯誤處理的文檔，以了解有關錯誤處理的更多信息，您也可以在 GitHub 上查看本文的完成代碼。

關於使用 App Router 在 Next.js 中掌握錯誤處理的常見問題解答

（此處省略了FAQs 部分，因為原文的FAQs 部分與文章內容重複度較高，且部分問題與App Router 的錯誤處理機制關聯性較弱。如果需要，可以根據原文補充。）

以上是掌握Next.js錯誤處理應用程序路由器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

NULL 构造函数 Error JS 对象 github ui router

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用Puppeteer和無服務器功能構建鏈接預覽器下一篇：使用Puppeteer和無服務器功能構建鏈接預覽器

看更多

掌握Next.js錯誤處理應用程序路由器

關鍵要點

場景和設置

創建錯誤頁面

抽象錯誤消息

更多關於錯誤處理的信息

佈局中的錯誤

服務器錯誤

結論和後續步驟

關於使用 App Router 在 Next.js 中掌握錯誤處理的常見問題解答

相關文章