之前项目一直是裸奔状态，没有异常告警，没有性能监控。前一段时间好好研究了一番，补上了异常告警和性能监控。

这篇文章主要是介绍前端项目的各类指标监控，包括业务的数据埋点上报，性能上的数据监控，线上异常的监控，以及内存泄露的排查等。

性能监控

Preformance API

数据上报

调接口接入上报系统，结合 Intersection Observer API 动态埋点

异常监控

• 异常捕获

  捕获异常的方式有很多种，比如 window.onerror，addEventListener("error", cb)，try catch，unhandledrejection 等

  其中 onerror 不能捕获资源加载的错误，比如图片挂了等。而 try catch 不能捕获 promise 的错误

  比较好的处理方式是，用，addEventListener("unhandledrejection", cb) 来捕获异步错误。并且统一抛出 new Error，然后统一监听 error 事件

  对于 vue，react 之类的框架错误，需要用框架内的错误捕获方法抛出异常

  window.addEventListener("unhandledrejection", e => {throw e.reason})
  window.addEventListener("error", args => {console.log("handler your error", args)
  
      return true
  
  }, true)
  
  // 针对 vue 框架级的错误
  
  Vue.config.errorHandler = function(err, vm, info) => {console.log("vue error", err)
  
  }
  

• 异常上报

  上报可以利用 img 标签的 src。不过需要注意的是，构建完的代码都是压缩后的代码，需要同时上报 sourceMap 文件。上报 sourceMap 的操作可以交给 webpack 的插件去完成。构建结束后自动上报即可 sourceMap 即可

  后端拿到上报的数据后，还要根据 sourceMap 解析 errorStack。可以利用 error-stack-parser 这个库来做反解析

内存泄漏

当创建了引用类型的数据结构，js 会在内存开辟堆空间。内存泄漏指的是某些空间已经不需要用了，但由于种种原因导致引用的指针不为空，或者作用域还在执行栈中未弹出，导致垃圾回收却没有收回空间

一般闪退，崩溃之类的都是内存泄漏所导致的

导致内存泄漏的原因：

1. 闭包引用并且保存了外部变量指针
2. 没有用声明关键字，导致变量声明在了全局
3. 定时器没有清除
4. 事件绑定没有清除

要定位内存泄漏可以通过拍内存快照的方式，找到没用了缺仍有引用的变量