【异常监控】监控静态资源异常

  • Post author:
  • Post category:其他


静态资源异常指:页面的静态资源加载异常。主要表现为静态资源加载失败。

静态资源指:JS 文件、CSS 文件、图片、视频等。

静态资源异常通过监听全局的

error

事件,由于静态资源的加载异常不会冒泡到 window,因此需要设置在捕获阶段。

window.addEventListener('error', staticError, true)

由于 资源加载报错和js执行报错都是监听 window.error 事件,所以需要区分

js 监听文件:

window.addEventListener('error', (err) => {
  // 说明是资源加载报错
  if (err.target && (err.target.src || err.target.href)) {
    const log = {
      type: 'resourceError',
      fileName:  err.target.src || err.target.href, // 哪个资源加载出错
      tagName: err.target.tagName
    }
    console.log(log) // 进行上报
  } else {
    // js 执行报错
  }
}, true)

测试文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="https://hhsh.png"> -->
</head>
<body>
  <!-- <img src="https://hhsh.png" alt=""> -->
  <script src="./mentor.js"></script>
  <!-- <script src="https://hhsh.js"></script> -->
</body>
</html>

mentor.js 注意要放在最前面

script 加载报错,还可以加其他的参数 按需求来自己添加即可



版权声明:本文为Luckyzhoufangbing原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。