React封装自定义Hook捕获所有错误的实现方法-牛翰网

React 中的错误捕获方式

错误边界（Error Boundaries）

错误边界是 React 16 引入的一项特性，用于捕获其子组件树中发生的 JavaScript 错误，记录错误并显示备用 UI，而不是整个组件树崩溃。

错误边界的特点：

只能通过类组件实现。
捕获渲染过程、生命周期方法和构造函数中的错误。
不会捕获事件处理器中的错误或异步代码中的错误。

全局错误监听（Global Error Listeners）

为了捕获那些不被错误边界捕获的错误，如事件处理器中的错误或异步代码中的错误，我们可以使用全局错误监听器，如 window.onerror 和 window.onunhandledrejection。

封装自定义 Hook 捕获所有错误

为了统一管理和捕获 React 应用中的所有错误（包括同步和异步），我们可以封装一个自定义 Hook。该 Hook 将结合错误边界和全局错误监听，实现全面的错误捕获。

步骤概述

创建一个错误上下文（Error Context），用于在应用中传递错误信息。
创建一个错误提供器组件（ErrorProvider），设置错误处理逻辑，并将错误状态提供给应用。
创建一个自定义 Hook（useError），用于在任何组件中触发错误报告。
创建一个错误边界组件（ErrorBoundary），捕获组件树中的错误，并通过上下文传递。
在应用根组件中使用 ErrorProvider 和 ErrorBoundary，确保整个应用都能捕获错误。

实现代码

1. 创建 ErrorContext

import React from 'react';

const ErrorContext = React.createContext({
  error: null,
  setError: () => {},
});

export default ErrorContext;

2. 创建 ErrorProvider 组件

import React, { useState, useEffect } from 'react';
import ErrorContext from '../context/ErrorContext';

function ErrorProvider({ children }) {
  const [error, setError] = useState(null);

  useEffect(() => {
    // 监听全局错误
    const handleError = (event) => {
      setError(event.error || event.reason || event.message);
    };

    window.addEventListener('error', handleError);
    window.addEventListener('unhandledrejection', handleError);

    return () => {
      window.removeEventListener('error', handleError);
      window.removeEventListener('unhandledrejection', handleError);
    };
  }, []);

  return (
    <ErrorContext.Provider value={{ error, setError }}>
      {children}
    </ErrorContext.Provider>
  );
}

export default ErrorProvider;

3. 创建 useError Hook

import { useContext } from 'react';
import ErrorContext from '../context/ErrorContext';

function useError() {
  const { setError } = useContext(ErrorContext);

  const reportError = (error) => {
    setError(error);
    console.error('Captured error:', error);
  };

  return reportError;
}

export default useError;

4. 创建 ErrorBoundary 组件

import React from 'react';
import ErrorContext from '../context/ErrorContext';

class ErrorBoundary extends React.Component {
  static contextType = ErrorContext;

  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    if (this.context && this.context.setError) {
      this.context.setError(error);
    }
    console.error('ErrorBoundary caught an error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>出现了错误。</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

5. 使用自定义 Hook 和 ErrorBoundary

import React from 'react';
import ErrorProvider from './providers/ErrorProvider';
import ErrorBoundary from './components/ErrorBoundary';
import ExampleComponent from './components/ExampleComponent';
import ErrorDisplay from './components/ErrorDisplay';

function App() {
  return (
    <ErrorProvider>
      <ErrorBoundary>
        <ExampleComponent />
      </ErrorBoundary>
      <ErrorDisplay />
    </ErrorProvider>
  );
}

export default App;

详细代码讲解

下面将逐步讲解上述代码的实现细节。

1. ErrorContext.js

定义一个错误上下文，用于在组件树中传递错误状态。

import React from 'react';

const ErrorContext = React.createContext({
  error: null,
  setError: () => {},
});

export default ErrorContext;

使用 React.createContext 创建上下文，初始值包含 error 和 setError 方法。
上下文允许在组件树中任何位置访问和更新错误状态。

2. ErrorProvider.js

创建一个错误提供器组件，设置全局错误监听，并提供错误状态。

import React, { useState, useEffect } from 'react';
import ErrorContext from '../context/ErrorContext';

function ErrorProvider({ children }) {
  const [error, setError] = useState(null);

  useEffect(() => {
    // 监听全局错误
    const handleError = (event) => {
      setError(event.error || event.reason || event.message);
    };

    window.addEventListener('error', handleError);
    window.addEventListener('unhandledrejection', handleError);

    return () => {
      window.removeEventListener('error', handleError);
      window.removeEventListener('unhandledrejection', handleError);
    };
  }, []);

  return (
    <ErrorContext.Provider value={{ error, setError }}>
      {children}
    </ErrorContext.Provider>
  );
}

export default ErrorProvider;

使用 useState 管理 error 状态。
使用 useEffect 添加全局错误监听器：
- window.onerror 捕获同步错误。
- window.onunhandledrejection 捕获未处理的 Promise 错误。
在组件卸载时移除监听器，避免内存泄漏。
使用 ErrorContext.Provider 将 error 和 setError 提供给子组件。

3. useError.js

创建一个自定义 Hook，用于在组件中报告错误。

import { useContext } from 'react';
import ErrorContext from '../context/ErrorContext';

function useError() {
  const { setError } = useContext(ErrorContext);

  const reportError = (error) => {
    setError(error);
    console.error('Captured error:', error);
  };

  return reportError;
}

export default useError;

使用 useContext 获取 setError 方法。
定义 reportError 函数，用于手动报告错误。
在报告错误的同时，将错误信息输出到控制台。

4. ErrorBoundary.js

创建一个类组件错误边界，用于捕获渲染过程中发生的错误。

import React from 'react';
import ErrorContext from '../context/ErrorContext';

class ErrorBoundary extends React.Component {
  static contextType = ErrorContext;

  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    if (this.context && this.context.setError) {
      this.context.setError(error);
    }
    console.error('ErrorBoundary caught an error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>出现了错误。</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

继承自 React.Component，实现错误边界。
使用 static contextType 获取上下文。
在 componentDidCatch 方法中：
- 更新本地状态 hasError。
- 通过上下文的 setError 方法报告错误。
- 将错误信息输出到控制台。
如果发生错误，渲染备用 UI。

5. App.js

在应用的根组件中使用 ErrorProvider 和 ErrorBoundary，确保整个应用能够捕获错误。

import React from 'react';
import ErrorProvider from './providers/ErrorProvider';
import ErrorBoundary from './components/ErrorBoundary';
import ExampleComponent from './components/ExampleComponent';
import ErrorDisplay from './components/ErrorDisplay';

function App() {
  return (
    <ErrorProvider>
      <ErrorBoundary>
        <ExampleComponent />
      </ErrorBoundary>
      <ErrorDisplay />
    </ErrorProvider>
  );
}

export default App;

ErrorProvider 包裹整个应用，提供错误状态。
ErrorBoundary 包裹具体的业务组件，如 ExampleComponent。
ErrorDisplay 组件用于展示错误信息。

6. ExampleComponent.js

一个示例组件，用于触发同步和异步错误，测试错误捕获机制。

import React from 'react';
import useError from '../hooks/useError';

function ExampleComponent() {
  const reportError = useError();

  const handleSyncError = () => {
    throw new Error('同步错误示例');
  };

  const handleAsyncError = async () => {
    try {
      await Promise.reject(new Error('异步错误示例'));
    } catch (error) {
      reportError(error);
    }
  };

  return (
    <div>
      <h2>示例组件</h2>
      <button onClick={handleSyncError}>触发同步错误</button>
      <button onClick={handleAsyncError}>触发异步错误</button>
    </div>
  );
}

export default ExampleComponent;

提供两个按钮，分别触发同步和异步错误。
同步错误通过直接抛出 Error 实现。
异步错误通过返回被拒绝的 Promise，并在 catch 中使用 reportError 报告错误。

7. ErrorDisplay.js

一个组件，用于显示当前捕获的错误信息。

import React, { useContext } from 'react';
import ErrorContext from '../context/ErrorContext';

function ErrorDisplay() {
  const { error } = useContext(ErrorContext);

  if (!error) return null;

  return (
    <div style={{ background: 'red', color: 'white', padding: '10px' }}>
      <h3>全局错误捕获：</h3>
      <p>{error.toString()}</p>
    </div>
  );
}

export default ErrorDisplay;