一：方式

1：ErrorBoundary组件

监听所有下级组件报错，可降级展示UI

只监听组件渲染时报错，不监听DOM事件错误、异步错误

只在production环境生效，dev会直接抛出错误

只能监听组件开始渲染到成功报错，之后无效

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

  componentDidCatch(error, errorInfo) {
    // 在捕获到错误后，可以进行一些处理，例如记录错误日志或显示错误信息
    console.error(error);
    console.error(errorInfo);
    
    // 更新状态，用于显示错误信息
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 如果发生错误，则渲染自定义的错误提示信息
      return <div>Something went wrong.</div>;
    }

    // 如果没有错误，则正常渲染子组件
    return this.props.children;
  }
}


<ErrorBoundary>
  <YourComponent />
</ErrorBoundary>

2：window.onerror，全局事件，会捕获整个页面中的报错

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

function App() {
  const handleGlobalError = (message, source, lineno, colno, error) => {
    // 在全局错误事件中处理错误，例如记录错误日志或显示错误信息
    console.error(error);
  };

  React.useEffect(() => {
    window.onerror = handleGlobalError;
    return () => {
      window.onerror = null; // 清除事件处理器
    };
  }, []);

  return (
    <ErrorBoundary>
      <YourRootComponent />
    </ErrorBoundary>
  );
}

export default App;

3：try catch，代码块捕获错误

const handleClick = () => {
    try {
      // 在这里放置可能会出错的代码
      throw new Error('Something went wrong!');
    } catch (error) {
      // 在 catch 语句块中处理错误
      console.error(error);
      // 可以执行一些错误处理的逻辑，例如显示错误提示或记录错误日志
    }
  };

二：总结

1：ErrorBoundary监听组件渲染报错

2：事件报错使用try catch或window.onerror

3：异步报错使用window.onerror