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

11/27 23:14:35 来源网站:辅助卡盟网

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 };

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