当前页面的脚本发生错误如何解决win7 javascript 异常处理的一些经验

Provide context with exceptions

提供异常上下文

异常一旦发生了，一般都会有异常信息（message）和栈跟踪（stack trace）信息还有文件名之类的来定位发生错误的现场，但哪怕是这样在定位起来还是比较困难，所以一般建议去丰富异常信息让我们定位问题更加的快速。可以是在捕获到异常的地方解释我们的意图，同时这些额外的信息也都应该只是面向我们开发者用以定位问题，不需要让使用者去感知这些异常上下文，不在用户界面中进行体现。

结合上一条的自定义错误，我们还要为这些自定义错误提供更加丰富个上下文。

React中的建议

局部UI的JS Error不应该导致整个应用崩溃白屏，我们应该把他的影响范围控制在最小，这是一个容易形成共识的结论，于是React 16引入了错误边界（Error Boundaries）的概念。

React Error Boundaries 官方文档[2] 里提到：

错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI当前页面的脚本发生错误如何解决win7，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。

ProComponents[3]的很多组件应该都有使用Error Boundaries比如ProTable，用以异常发生时只对局部UI产生影响当前页面的脚本发生错误如何解决win7，查看@ant-design/pro-utils中的源码可以看到和官网的处理别无二致，更多的信息查看官网有非常详细的介绍：

import { Result } from 'antd';
import type { ErrorInfo } from 'react';
import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-types
class ErrorBoundary extends React.Component<
  { children?: React.ReactNode },
  { hasError: boolean; errorInfo: string }
> {
  state = { hasError: false, errorInfo: '' };
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, errorInfo: error.message };
  }
  componentDidCatch(error: any, errorInfo: ErrorInfo) {
    // You can also log the error to an error reporting service
    // eslint-disable-next-line no-console
    console.log(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return ;
    }
    return this.props.children;
  }
}
export { ErrorBoundary };