21

这是我的错误边界文件 -

class ErrorHandling extends Component {
    state = { hasError: false }

    componentDidCatch() {
        this.setState({ hasError: true })
    }

    render() {
        // debugger
        if (this.state.hasError) {
            return <div>Error in Component</div>
        }
        return this.props.children
    }
}

另一个文件是 -

import React, { Component } from 'react';

// Intentionally I have added syntax error below 'd'

function Intermediate(props) {
    return <h1>hi</h1>;d
}
export default Intermediate

在我的 App.js 中

<ErrorHandling>
  <Intermediate />
</ErrorHandling>

它导致应用程序在没有捕获错误的情况下中断。这是在浏览器屏幕上看到的错误

在此处输入图像描述

更详细的版本在这里 - https://codepen.io/meghana1991/pen/abojydj?editors=0010

当我在本地使用与上面列出的多个文件相同的代码时，它不起作用

4

2 回答 2

29

您无法捕获编译时错误，错误边界用于 UI 中的运行时错误。

请参阅编译时与运行时错误。

此外，您必须使用getDerivedStateFromError才能在回退 UI 上添加额外的渲染：

class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
    error: { message: '', stack: '' },
    info: { componentStack: '' }
  };

  static getDerivedStateFromError = error => {
    return { hasError: true };
  };

  componentDidCatch = (error, info) => {
    this.setState({ error, info });
  };

  render() {
    const { hasError, error, info } = this.state;
    const { children } = this.props;

    return hasError ? <ErrorComponent/> : children;
  }
}

要检查您的，请从组件树中的可访问ErrorBoundary部分抛出错误，该部分不是：

  • 事件处理程序
  • 异步代码（例如 setTimeout 或 requestAnimationFrame 回调）
  • 服务器端渲染
  • 在错误边界本身（而不是其子项）中引发的错误
const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

注意：在开发环境中，您将始终看到错误覆盖，除非您将其关闭或使用 X 按钮关闭它。

完整示例：

const ErrorComponent = () => {
  return <h1>Something went wrong</h1>;
};

class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
    error: { message: "", stack: "" },
    info: { componentStack: "" }
  };

  static getDerivedStateFromError = error => {
    return { hasError: true };
  };

  componentDidCatch = (error, info) => {
    this.setState({ error, info });
  };

  render() {
    const { hasError, error, info } = this.state;
    console.log(error, info);
    const { children } = this.props;

    return hasError ? <ErrorComponent /> : children;
  }
}

const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <ButtonComponent />
    </ErrorBoundary>
  );
};

编辑错误边界示例

于 2019-09-15T10:21:53.477 回答
1

问题是：你可以在 React 文档示例中看到的漂亮的后备 UI 只出现在 production 中。所以你必须运行create-react-app（id you use it）建议的命令：

npm run build
# wait for it to finish
serve -s build

然后localhost:5000在您的浏览器中打开（如果您在提到的终端中看到此地址）。这样，React 文档示例就可以正常工作。

于 2021-07-08T12:59:15.110 回答