TypeScript-React-Starter错误边界实现：优雅处理React应用崩溃

舒莲菲Peace

367人浏览 · 2025-10-17 04:04:27

舒莲菲Peace · 2025-10-17 04:04:27 发布

TypeScript-React-Starter错误边界实现：优雅处理React应用崩溃

【免费下载链接】TypeScript-React-Starter A starter template for TypeScript and React with a detailed README describing how to use the two together. 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-React-Starter

为什么需要错误边界？

你是否遇到过React应用因一个组件错误导致整个页面崩溃的情况？在src/components/Hello.tsx中，当enthusiasmLevel小于等于0时会抛出错误：throw new Error('You could be a little more enthusiastic. :D');。这种未捕获的异常会导致整个应用崩溃，严重影响用户体验。错误边界（Error Boundary）是React提供的一种机制，能在组件树中捕获JavaScript错误，防止错误向上传播导致应用崩溃。

实现错误边界组件

创建ErrorBoundary.tsx

在项目中创建错误边界组件src/components/ErrorBoundary.tsx，代码如下：

import * as React from 'react';

interface ErrorBoundaryProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error?: Error;
}

class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  public state: ErrorBoundaryState = {
    hasError: false
  };

  public static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error };
  }

  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error('Error caught by boundary:', error, errorInfo);
    // 实际应用中可添加错误日志上报逻辑
  }

  public render(): React.ReactNode {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="error-boundary">
          <h2>发生错误</h2>
          <p>抱歉，当前组件发生错误。</p>
          <button onClick={() => this.setState({ hasError: false })}>
            尝试恢复
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

核心方法解析

getDerivedStateFromError：静态方法，当子组件抛出错误时调用，返回新的state以更新UI。
componentDidCatch：捕获错误后调用，可用于日志记录或错误上报。
render：根据错误状态渲染子组件或错误 fallback 界面。

在应用中集成错误边界

修改App组件

编辑src/App.tsx，引入并使用ErrorBoundary组件包裹可能出错的Hello组件：

import * as React from 'react';
import './App.css';
import Hello from './components/Hello';
import ErrorBoundary from './components/ErrorBoundary';

const logo = require('./logo.svg');

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Welcome to React</h2>
      </div>
      <p className="App-intro">
        To get started, edit <code>src/App.tsx</code> and save to reload.
      </p>
      <ErrorBoundary>
        <Hello name="TypeScript" />
      </ErrorBoundary>
    </div>
  );
}

export default App;

测试错误边界

运行应用：执行npm start启动开发服务器
触发错误：在src/components/Hello.tsx中，当enthusiasmLevel减至0时会抛出错误，此时错误边界会捕获并显示友好的错误提示。

高级用法：自定义错误界面

可以为不同组件提供自定义的错误 fallback 界面：

<ErrorBoundary fallback={
  <div className="custom-error">
    <h3>自定义错误提示</h3>
    <p>Hello组件加载失败，请稍后重试</p>
  </div>
}>
  <Hello name="TypeScript" />
</ErrorBoundary>