Sentry系列二——Sentry报错类型

SyntaxError 语法错误#

• SyntaxError: Unexpected token ’<’

  Syntax/ˈsɪntæks/语法， 编译阶段的异常，可以通过配置编辑器校验工具，避免这类报错

ReferenceError 引用错误#

• ReferenceError: $ is not defined

TypeError 类型错误#

• TypeError: Cannot read property ‘length’ of undefined

  对值进行不合理操作时会发生，引用null、undefined等

RangeError 范围错误#

• RangeError: Invalid array length
• RangeError: Maximum call stack size exceeded

第一种发生在调用数组长度不足，第二中共常发生在递归

Error 与自定义异常#

Error是所有错误的积累，其他错误继承该类型，所有错误类型都包含

• Error.prototype.message: 错误消息
• Error.prototype.name: 错误名称
• Error.prototype.stack: 堆栈信息

通过继承Error实现自定义的错误类型，像React、Vue、Axios等框架都会封装一些自定义异常

1
class MyError extends Error {
2
  constructor(message) {
3
    super();
4
    this.name = 'MyError';
5
    this.message = message;
6
  }
7
}

其他Error#

• Unable to find node on an unmounted component

  react issue

  react和react-dom版本不统一，可能时某个插件的依赖导致

• ResizeObserver loop limit exceeded

  antd-design issue

  该报错Ant Design官方处理方式是忽略，重新渲染反应期间可能会触发ResizeObserver loop limit exceeded（多发于组件第一次注册和动态元素)

• 开启忽略

  1
  Sentry.init({
  2
    ignoreErrors: [
  3
      "ResizeObserver loop limit exceeded"
  4
    ],
  5
  });

• [React Intl] Could not find required intl object. <IntlProvider> needs to exist in the component ancestry.issue

  antd Modal组件<IntlProvider>未包裹， <FormattedMessage>是在Modal render的时候才求值的，而formatMessage() API是在组件执行就开始求值

• ChunkLoadError：Loading Chunk Fail

  1. 异步加载组件，资源不会一下子全加载，而是你点到哪个界面就加载那个界面的资源。
  2. 重新打包发布后hash值不一样，找不到旧的资源。
     解决：

  1
  useEffect(() => {
  2
    const handleLoadingChunkError = (error) => {
  3
      // Loading chunk报错重新加载
  4
      const loadFailed = new RegExp(/Loading chunk (\d)+ failed/g)
  5
      if (error && error.message && error.message.match(loadFailed)) {
  6
        let loadingChunkNum = ss.getItem('loadingChunkNum');
  7
        loadingChunkNum = isNumber(loadingChunkNum) ? loadingChunkNum + 1 : 0;
  8
        // 刷新一次后不再刷新
  9
        if (loadingChunkNum > 1) {
  10
          // 重置次数
  11
          ss.setItem('loadingChunkNum', 0);
  12
        } else {
  13
          ss.setItem('loadingChunkNum', loadingChunkNum);
  14
          window.location.reload()
  15
        }
  16
      }
  17
    }
  18
    window.addEventListener('error', handleLoadingChunkError);
  19
    return () => {
  20
      window.removeEventListener('error', handleLoadingChunkError);
  21
    }
  22
  }, [])

  展开收起

  注意 window.onError不能捕获到资源加载失败，必须使用window.addEventListener(‘error’)捕获资源加载失败情况

• UnKnown

  Non-Error promise rejection captured with keys: errorFields, outOfDate, values
  Sentry自定义错误，使用Promise发生错误没有catch的时候，Sentry中通过unhandledrejection进行捕获

• InternalError

  网络错误

• URIError

  decodeURI, decodeURIComponent, encodeURI, encodeURIComponent四种方法传参错误时会产生这种异常，参考这篇文章