LinHuijuan's Blog

异常监控

# 异常监控

参考教程：前端性能与异常上报 (opens new window)

[TOC]

# 一、异常捕获

# 1.1 全局捕获

# 1.1.1 window.onerror(DOM0)

  • 当JavaScript运行时错误（包括语法错误）发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()。
window.onerror = function(message, source, lineno, colno, error) { ... }
1
  1. message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
  2. source：发生错误的脚本URL（字符串）
  3. lineno：发生错误的行号（数字）
  4. colno：发生错误的列号（数字）
  5. error：[Error对象]（对象）new Error([message[, fileName[, lineNumber]]])
  6. 若该函数返回true，则阻止执行默认事件处理函数。
  • 不足之处
    • 无法捕获资源加载错误，原因是：资源加载错误，并不会向上冒泡，object.onerror捕获后就会终止（不会冒泡给window）。
    • 无法捕获跨域的js运行错误。跨域之后window.onerror根本捕获不到正确的异常信息，而是统一返回一个Script error。

# 1.1.2 window.addEventListener("error", fn)

# 1.2 跨域JS捕获

在window.onerror基础之上，做如下操作：

  1. 服务端：设置js资源响应头Acess-Control-Allow-Origin:*

在b.js文件里，加入如下 response header，表示允许跨域：（或者直接给静态资源b.js加这个 response header）

Access-Control-Allow-Origin: *
1
  1. 客户端：在script标签添加crossorigin属性。

引入第三方的文件b.js时，在<script>标签中增加crossorigin属性。

<script src="http://cdn.xxx.com/index.js" crossorigin="anonymous"></script>
1

# 1.3 资源加载错误捕获

# 1.3.1 object.onerror

img标签、script标签等节点都可以添加onerror事件，用来捕获资源加载的错误。

# 1.3.2 performance.getEntries（间接捕获）

可以获取所有已加载资源的加载时长，通过这种方式，可以间接的拿到没有加载的资源错误。

举例：

浏览器打开一个网站，在Console控制台下，输入：

performance.getEntries().forEach(function(item){console.log(item.name)})
1

或者输入：

performance.getEntries().forEach(item=>{console.log(item.name)})
1

上面这个api，返回的是数组。打印出来的资源就是已经成功加载的资源。

再输入document.getElementsByTagName('img')，就会显示出所有需要加载的的img集合。

于是，document.getElementsByTagName('img')获取的资源数组减去通过performance.getEntries()获取的资源数组，剩下的就是没有成功加载的，间接捕获到资源加载错误。

# 1.3.3 Error事件捕获

资源源加载错误，虽然会阻止冒泡，但是不会阻止捕获。我们可以在捕获阶段绑定error事件。

# 二、性能监控

# 三、日志上报

Git