阻止白屏死亡：精通 Next.js 错误边界 🛡️

Source: Dev.to

React 树的脆弱性

React 应用最危险的行为之一是它对未处理的 JavaScript 异常的处理方式。默认情况下，如果单个组件抛出错误（例如，对未定义的 API 响应调用 .map()），React 会立即卸载整个组件树。对于查看复杂仪表盘的 B2B SaaS 用户来说，天气小部件出错会导致整个屏幕完全空白——这就是令人恐惧的 白屏死亡（White Screen of Death）。

在 Smart Tech Devs，我们为前端架构设计了弹性。非关键组件的故障绝不应导致核心应用崩溃。我们通过在 Next.js App Router 中利用 错误边界（Error Boundaries） 来实现这一点。

使用 error.tsx 构建隔离

Next.js 13+ 引入了基于文件系统的路由约定，使错误边界的实现变得极其优雅。只需在特定路由段创建一个 error.tsx 文件，就会自动为该段及其子组件包裹一个 React 错误边界。

步骤 1：创建细粒度错误边界

如果发票小部件出错，我们只想让发票部分显示错误状态。侧边栏、页眉和其他小部件必须保持正常。

// app/dashboard/invoices/error.tsx
"use client"; // Error components MUST be Client Components

import { useEffect } from "react";

export default function InvoicesError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an external service like Sentry
    console.error("Invoice Widget Failed:", error);
  }, [error]);

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold">Failed to load invoices.</h2>
      <p>We encountered a network issue.</p>

      {/* The 'reset' function attempts to re‑render the failed segment */}
      <button
        onClick={() => reset()}
        className="bg-red-600 text-white px-4 py-2 rounded shadow"
      >
        Try Again
      </button>
    </div>
  );
}

回退层级

App Router 的美妙之处在于它的嵌套层级。如果 app/dashboard/invoices/page.tsx 中出现错误，Next.js 会寻找最近的 error.tsx 文件。如果在 invoices 文件夹中找到，它只会用错误 UI 替换该页面组件。

对于全局、灾难性的故障，你应始终在根 app/ 目录下放置一个 global-error.tsx 文件。这相当于最后一道防线，确保即使根布局崩溃，用户也会看到带有品牌标识的专业 “Something went wrong” 页面，而不是原始的浏览器错误。

结论

在企业软件中，故障是不可避免的，但灾难性的 UI 崩溃是可以避免的。通过在复杂或风险较高的数据获取组件周围有策略地放置 Next.js 错误边界，你可以将错误隔离，保护用户体验，并构建一个在压力下能够优雅降级的 SaaS 平台。