前端监控代码开发

最新推荐文章于 2022-06-03 00:28:43 发布

luckybing~

最新推荐文章于 2022-06-03 00:28:43 发布

阅读量373

点赞数

分类专栏：前端报警监控文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/112131726

版权

前端报警监控专栏收录该内容

15 篇文章 4 订阅

订阅专栏

（一）监控的错误类型以及定义的字段

基本分为以下 3 种error

（1）js Error：js 执行过程中的error

（2）PromiseError：Ajax 请求中的error

（3）resourceError：资源加载过程中的error

错误捕获上报数据结构：

{
  title: '前端监控系统', // 页面标题
  url: 'http://localhost:8080/', // 页面url
  timestamp: 1609638799357, // 错误产生时间戳
  // 用户设备类型
  userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
  errorType: 'error', // 错误类型
  message: 'Uncaught ReferenceError: a is not defined', // 错误描述
  filename: '/Users/zhoufangbing/Desktop/test/content.js', // 错误产生文件 
  position: '0:0' // 行列信息
}

（二）捕获错误产生

window.addEventListener('error', function (e) {
  console.log(e)
})

当错误发生时，输出如下

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="content">
    <button id='js'>Js Error</button>
  </div>
  <!-- 引入前端监控文件 -->
  <script src='./monitor.js'></script>

  <script>
    // 模拟错误触发
    var jsButton = document.getElementById('js')
    jsButton.onclick = function () {
      console.log(a)
    }
  </script>
</body>
</html>

JS:

function getTarget () {
  return new Promise((resolve, reject) => {
    let eventType = ['click', 'mousedown', 'mouseup', 'keydown', 'keyup', 'mouseover']
    eventType.forEach((event) => {
      window.addEventListener(event, (e) => {
        let targetPath = ''
        let targetArr =  e.path.reverse()
        targetArr.forEach((item) => {
          var currentParth = ''
          if (item.nodeName) {
            currentParth += item.nodeName.toLowerCase()
          }
          if (item.className) {
            currentParth += `.${item.className}`
          }
          if (item.id) {
            currentParth += `#${item.id}`
          }
          targetPath += ` ${currentParth}`
        })
        resolve(targetPath)
      }, false) // 事件冒泡
    })
  })
}

window.addEventListener('error', async function (e) {
  // 获取点击事件dom路径
  let targetPath = await getTarget()
  let log = {
    title: '前端监控系统', // 页面标题
    // 用户设备类型
    userAgent: navigator.userAgent,
    errorType: 'jsError', // 错误类型
    message: e.message, // 错误描述
    filename: e.filename, // 错误产生文件 
    position: `${e.lineno}:${e.colno}`, // 行列信息
    target: targetPath
  }
  console.log(log)
})

下面是 e.path 这个数组～

输出结果：

target 也很ok

然后上面的结果可以上传到服务器进行监控收集与报警

luckybing~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端监控代码开发

（一）监控的错误类型以及定义的字段基本分为以下 3 种error（1）js Error：js 执行过程中的error（2）PromiseError：Ajax 请求中的error（3）resourceError：资源加载过程中的error错误捕获上报数据结构：{ title: '前端监控系统', // 页面标题 url: 'http://localhost:8080/', // 页面url timestamp: 1609638799357, // 错误产生时间戳 //
复制链接

扫一扫

专栏目录