web前端之异常/错误监控

1,046 阅读1分钟

为什么要异常/错误监控

我们都知道有程序难免就会有异常/错误,当我们代码越来越多的时候异常/错误出现的几率也就会多,虽然我们会有测试,但是测试用例并不能覆盖所有可能,所以程序在生产上运行的时候进行异常/错误监控是有必要的。当有用户进行某些操作,出现错误或异常我们就能马上的收到信息,并进行相应处理。如果程序没有这样的监控措施,错误就需要人肉去发现,这种发现效率是很低的。

web的异常/错误分类

运行时错误

比如代码运行有错误

捕获错误的方法通常是下面两种

  1. try...catch
  2. window.onerror = function(e){};

如果script跨域要捕获错误,需要在script上加 crossorigin才能捕获到错误。 上面就是捕获运行时错误的常用方法。

资源错误

比如img、css、js 加载不成功,下面两种方法都可以知道有哪些资源错误

  1. 通过performance.getEntries()可以拿到所有成功加载的资源,拿到成功加载的资源,再和需要加载的资源进行对比就可以知道哪些资源加载错误了。
  2. 资源的错误是不会冒泡,所以我们通过window.onerror = function(e){};是无法得知,但是资源的错误可以被捕获,使用 window.addEventListener("error",function(e){},true) 事件捕获这种方式就可以拿到资源错误的信息。

上报错误的方式

目前上报错误的方式一般是通过img标签来发送一个请求,这样既方便又快速。当然如果你想通过ajax方式也是可以的。