React 中的错误捕获方式及自定义 Hook 实现

在 React 开发中，错误处理是确保应用稳定性和用户体验的重要部分。React 提供了多种错误捕获方式，包括错误边界（Error Boundaries）、**全局错误监听（Global Error Listeners）**等。本文将详细介绍这些方法，并展示如何封装一个能够捕获所有同步和异步错误的自定义 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;

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;

在组件卸载时移除监听器，避免内存泄漏。使用 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;

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;

如果发生错误，渲染备用 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;

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;

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;

总结

本文详细介绍了在 React 中捕获错误的多种方式，包括错误边界和全局错误监听，并展示了如何封装一个自定义 Hook 来统一管理和捕获所有同步和异步错误。这种集中式的错误处理机制有助于提高应用的稳定性和维护性，使开发者能够更方便地监控和处理错误，提升用户体验。

通过上述实现，开发者可以在 React 应用中轻松捕获和处理各种错误，无论它们发生在渲染过程中、生命周期方法中，还是在异步操作中。这为构建健壮、可靠的 React 应用提供了有力支持。