React：在应用程序中统一处理错误（react-error-boundary）

React：在应用程序中统一处理错误（react-error-boundary）

引言

在前一篇文章中，我们探讨了如何使用react自带的错误边界机制Error Boundary进行错误处理。Error Boundary是React中用于捕获渲染错误的机制，但它有一些局限性，例如无法处理事件处理程序中的错误或异步操作中的错误。为了解决这些问题，我们将介绍一个名为react-error-boundary的库，它提供了一个更为灵活的错误处理方案，能够轻松捕获组件中的错误、事件处理程序中的错误以及异步操作中的错误。

环境

• 操作系统：Windows 10
• Vite版本：v2.7.2
• Node版本：v19.0.0
• React版本：v19.0.0
• TypeScript版本：v5

react-error-boundary

react-error-boundary是由Facebook的React核心团队成员Brian Vaughn开发的一个库，旨在简化错误处理。它能够处理组件渲染错误、事件处理程序中的错误以及异步操作中的错误，极大地提升了开发者的体验。

安装方法

可以通过以下命令安装react-error-boundary：

npm install react-error-boundary

创建一个没有错误的示例程序

首先，我们将创建一个简单的示例程序，确保其正常运行。后续在这个基础上做错误验证的捕获及备用UI展示的测试。

page.tsx

import App from "./App";

export default function Home() {
  return ;
}

components/App.tsx

import Page1 from "@/components/Page1";
import Page2 from "@/components/Page2";
import Page3 from "@/components/Page3";

import React, { ErrorInfo } from "react";

export default function App() {
  return (
    <>
      
      
      
    
  );
}

components/Page1.tsx

export default function Page1() {
  return (
    

      
Page1
    
  );
}

components/Page2.tsx

export default function Page2() {
  return (
    

      
Page2
    
  );
}

components/Page3.tsx

import Page3Child from "./Page3Child";

export default function Page3() {
  return (
    

      
Page3
      
    
  );
}

components/Page3Child.tsx

export default function Page3Child() {
  const title = "Page3Child";
  return (
    

      
{title}
    
  );
}

基本用法

首先&#x