说说你在react项目中是如何捕获错误的？ -岩石教程

1. 使用Error Boundaries（错误边界）

React 16及以上版本引入了错误边界，它是专门用于捕获子组件树中错误的React组件。

Error Boundary的实现

Error Boundary组件必须实现componentDidCatch生命周期方法或使用static getDerivedStateFromError方法。

示例

// ErrorBoundary.js
import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新状态以显示降级UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可以将错误日志发送到服务端
    console.log('Error:', error);
    console.log('Error Info:', errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

在应用中使用Error Boundary组件：

// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import SomeComponent from './SomeComponent';

function App() {
  return (
    <ErrorBoundary>
      <SomeComponent />
    </ErrorBoundary>
  );
}

export default App;

2. 使用`try-catch`语句

对于在事件处理函数或异步代码中捕获错误，可以使用try-catch语句。

示例

function handleClick() {
  try {
    // 可能会抛出错误的代码
    someFunctionThatMightThrow();
  } catch (error) {
    // 处理错误
    console.error('Error caught:', error);
  }
}

3. 使用`Error`对象

在组件内部，你可以手动抛出和捕获错误，通常用于调试或处理特定条件下的错误。

示例

function SomeComponent() {
  const handleClick = () => {
    try {
      if (someCondition) {
        throw new Error('Something went wrong');
      }
    } catch (error) {
      console.error('Error caught:', error);
    }
  };

  return <button onClick={handleClick}>Click Me</button>;
}

4. 使用`componentDidCatch`生命周期方法

对于类组件，可以直接在组件中实现componentDidCatch方法。

示例

class SomeComponent extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 处理错误
    console.log('Error:', error);
    console.log('Error Info:', errorInfo);
  }

  render() {
    // 渲染逻辑
  }
}

5. 使用第三方库

React Error Boundary库

React Error Boundary库提供了一些高级功能，如自动错误报告和错误恢复。

示例

// 安装库
// npm install react-error-boundary

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // 重置逻辑
      }}
    >
      <SomeComponent />
    </ErrorBoundary>
  );
}

6. 全局错误处理

对于全局错误处理，可以使用window.onerror和window.onunhandledrejection来捕获未处理的错误和未捕获的Promise拒绝。

示例

window.onerror = function (message, source, lineno, colno, error) {
  console.error('Global Error:', { message, source, lineno, colno, error });
};

window.onunhandledrejection = function (event) {
  console.error('Unhandled Rejection:', event.reason);
};

总结

Error Boundaries：用于捕获React组件树中的渲染错误。
try-catch语句：用于捕获事件处理函数和异步代码中的错误。
Error对象：用于手动抛出和捕获错误。
componentDidCatch方法：用于类组件中的错误捕获。
第三方库：如React Error Boundary库，提供高级错误处理功能。
全局错误处理：通过window.onerror和window.onunhandledrejection捕获全局错误。

根据不同的错误捕获需求，选择合适的方式可以提高应用的稳定性和用户体验。

说说你在react项目中是如何捕获错误的？