前端异常捕获

前端异常的分类

1. 语法错误 SyntaxError

触发场景：(1)变量名错误 (2)缺少括号
影响会影响页面加载，

var 1a; //(1)
console.log'hello'); //(2)

2.ReferenceError(引用错误)

触发场景：(1)引用不存在变量时发生错误 (2)将值分配给无法分配的对象

aaa; //(1)
this = 1; //(2)

3. RangeError(范围错误)

值超出有效范围时发生错误

new Array(-1);
(1234).toExponential(121);

4. TypeError(类型错误)

变量或参数不是预期类型时发生错误

new 123;
var obj = {};
obj.getA();

5. URIError(URI错误)

与URI相关函数参数不正确时发生错误，主要涉及
encodeURI()、
decodeURI()、
encodeURIComponent()、
decodeURIComponent()、
escape()和unescape()这六个函数。

decodeURI('%2')

6. EvalError(eval错误)

eval函数没有被正确执行，ES5中不再出现

7. 其他

Script error

页面中跨域引用脚本文件时，如果外部脚本中出现异常，在同源策略的限制下，本页面不能获取到报错信息，只能获取到 Script error 的信息。

Unexpected token

通常发生在缺少括号或分号时,或者其他
其他
资源加载失败，404错误

以上 7 中错误类型为JavaScript的标准错误类型

8. 根据业务需求自定义错误类型

resourceError

资源加载错误，目前只用于图片资源的加载失败、错误等错误

httpError

1. 用于接口请求status非200，例如：500，404等等
2. 接口请求 status为200，但是服务端业务异常，code码不为0

异常代码产生的结果

• 出错
  页面呈现与预期不符，例如数据错误，界面错位，跳转至错误页面等，产品本身仍可使用
• 呆滞
  页面操作没有反应，例如点击没有效果，提示成功没有进入后续操作。产品局部不可用
• 损坏
  页面出现无法实现操作目的，例如点击不能进入目标页面。产品部分功能无法正常使用
• 假死
  页面卡顿，无法对任何功能进行使用，例如某个遮罩层没有正确关闭导致无法对页面进行操作，用户无法正常登陆导致不能使用某功能。这类异常可能会导致用户退出应用
• 崩溃
  经常出现自动退出、无法操作的现象，例如网页无法正常加载或者加载后无发进行任何操作。

JS捕获异常的方法

• try…catch
  只能捕获运行时异常，不能捕获到语法错误和异步错误
• window.onerror
  onerror是全局的，最好写在所有 JS 脚本的前面，如果写在后面，前面的js发生错误的话，不会被 onerror 捕获到。
  另外 onerror 是无法捕获到网络异常的错误。
• window.addEventListener(‘error’, fn, true)
  第三个参数为true时，能捕获到js执行错误，也能捕获加载错误。
  第三个参数为false时，能捕获到js执行错误，但不能捕获加载错误。
  资源加载失败是不能通过冒泡到达window的，但在捕获阶段拿到，但是还是没有办法判断HTTP的状态。
  另外，这个方法捕获不到 Promise 的错误。
• unhandledrejection
  unhandledrejection 是 Promise全局捕获异常事件。如果 Promise 没有写上 catch 函数，可以通过unhandledrejection进行捕获。
• 对于跨域资源的异常捕获
  在引用js的script的标签上添加 crossOrigin，另外还需要在给后台的响应头中加上 Access-Control-Allow-Origin。
  JSONP 跨域获取脚本文件执行，也可以用 crossOrigin的方法。
• iframe中异常捕获
  iframe与主站同域名，给iframe直接添加onerror事件，iframe是自己可控的，可以将异常抛给主站接收。具体可以看第二篇博客

异常上报

• ajax上报
• 利用image对象上报
• 其他

1. 定位异常位置：压缩的代码可以通过 sourcemap 进行定位。
2. 信息量过多：设置采集率。

MVVM框架的的异常采集

vue 和 react 自身提供异常捕获，vue 框架通过 Vue.config.errorHandler 进行全局配置，

Vue.config.errorHandler = function (err, vm, info) {  
    console.error('抛出全局异常');  
    console.error(vm);  
    console.error(error);  
    // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
    // 只在 2.2.0+ 可用
}

在React中，可以使用ErrorBoundary组件包括业务组件的方式进行异常捕获，配合React 16.0+新出的componentDidCatch API，可以实现统一的异常捕获和日志上报。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}