React Error Boundary 使用通用错误消息间歇性地屏蔽错误

Question

我们正在应用程序中测试React 错误边界。目前，我们看到 React 错误边界间歇性地用以下内容掩盖错误：

“在你的一个组件中抛出了一个错误，但 React 不知道它是什么。这可能是由于浏览器不稳定造成的。React 尽力保留 DevTools 的“异常暂停”行为，这需要一些 DEV -mode only 技巧。这些可能在您的浏览器中不起作用。尝试在生产模式下触发错误，或切换到现代浏览器。如果您怀疑这实际上是 React 的问题，请提交问题。at对象.invokeGuardedCallbackImpl”

错误边界确实成功捕获了堆栈跟踪；但是，如果没有错误消息，我们只能了解失败原因的一半。

以前有人遇到过这种行为吗？或者对于使用 React 的错误边界捕获完整错误有什么建议吗？

我们期待的不是上面的错误消息，而是类似“无法读取未定义的属性（读取'toString'）”的错误消息。

环境

• 我们正在使用 React 16.12.0。
• 我们正在使用生产版本进行测试。

示例代码

export class ReactErrorBoundary extends React.Component<
  {},
  ReactErrorBoundaryState
> {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static contextType = CpqTelemetryContext;

  static getDerivedStateFromError(error: TypeError): ReactErrorBoundaryState {
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo): void {
    const telemetryProvider: ILoggerService = this.context;
    telemetryProvider.logException("App.ErrorBoundary", error, errorInfo);
  }

  render(): JSX.Element {
    if (this.state.hasError) {
      return (
        <div style={{ margin: "5%", maxWidth: "900px" }}>
          <h1>
            Something went wrong in the react project..
          </h1>
          {/* Likely want to add a support email here. */}
          <div>
            <b>Message: </b>
            <p>{this.state.error && this.state.error.message}</p>
          </div>
          <div>
            <b>Stack: </b>
            <p>{this.state.error && this.state.error.stack}</p>
          </div>
        </div>
      );
    }

    return <div>{this.props.children}</div>;
  }
}

Answer 1

以前有人遇到过这种行为吗？或者对于使用 React 的错误边界捕获完整错误有什么建议吗？

我从未使用react-error-boundary遇到过这种行为，并且我发现它们对错误边界的实现与您提供的示例代码不同。

也许您可以尝试react-error-boundary，如果它有效，请尝试他们在实现中所做的不同之处？