前端错误监控之用户行为回放

异常定位(1)--生产环境通过SourceMap还原压缩后JavaScript错误，快速定位异常

有时候错误上报完成解析具体行号后，并不能立马判断出是什么问题，我们可能需要知道用户当时操作的流程，比如在 Android 是点击了某个 button，然后发起了一个 Ajax 请求，控制台打印了某些日志，有点击某个 button 然后出错了，这个时候会触发错误上报，要是能把当之前用户的操作也记录下来就好了所以我们需要做全局事件例如 click,mousemove等等监听，代理下 console, 代理 XhttpRequest，具体可以看 raven-js 具体实现，看上篇的上报数据

{
  "stack": {
    "project": "xxx",
    "logger": "javascript",
    "platform": "javascript",
    "request": {
      "headers": {
        "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36"
      },
      "url": "http://localhost:8080/"
    },
    "exception": {
      "values": [
        {
          "type": "Error",
          "value": "手动触发异常",
          "stacktrace": {
            "frames": [
              {
                "filename": "http://localhost:8080/js/chunk-vendors.f3f154f7.js",
                "lineno": 7,
                "colno": 85724,
                "function": "HTMLButtonElement.o",
                "in_app": true
              },
              {
                "filename": "http://localhost:8080/js/chunk-vendors.f3f154f7.js",
                "lineno": 7,
                "colno": 51758,
                "function": "HTMLButtonElement.Qo.i._wrapper",
                "in_app": true
              },
              {
                "filename": "http://localhost:8080/js/chunk-vendors.f3f154f7.js",
                "lineno": 7,
                "colno": 13484,
                "function": "HTMLButtonElement.n",
                "in_app": true
              },
              {
                "filename": "http://localhost:8080/js/chunk-vendors.f3f154f7.js",
                "lineno": 7,
                "colno": 11664,
                "function": "ne",
                "in_app": true
              },
              {
                "filename": "http://localhost:8080/js/main.d41a5444.js",
                "lineno": 1,
                "colno": 2356,
                "function": "a.makeError",
                "in_app": true
              }
            ]
          }
        }
      ],
      "mechanism": {
        "type": "generic",
        "handled": true
      }
    },
    "transaction": "http://localhost:8080/js/main.d41a5444.js",
    "trimHeadFrames": 0,
    "extra": {
      "componentName": "component <app>",
      "lifecycleHook": "v-on handler",
      "session:duration": 99540
    },
    "breadcrumbs": {
      "values": [
        {
          "timestamp": 1587858857.627,
          "category": "ui.click",
          "message": "body > div#app > button"
        },
        {
          "timestamp": 1587858857.627,
          "message": "before make error",
          "level": "log",
          "category": "console"
        }
      ]
    },
    "release": "staging@2.0.0",
    "event_id": "6df36620747042ccb71161de4c82e207"
  },
  "msg": "Error:手动触发异常"
}

这里面的 User-Agent, breadcrumbs 就是我们需要的，User-Agent标记当前环境，breadcrumbs 标记用户操作行为，这样在判断错误的时候就能做到很好的辅助如果是在要做的更加详细，基本就是增加上报信息了，在app里面可以通过桥接获取更多信息，辅助判断，但基本逻辑就是这样

最后就是下面这个样子

结合这个就能很好的找到报错之前用户的操作日志

用户浏览快照上报，类似视频回放

用的人觉得这个还不够直观，希望直接类似看视频的方式，过看到用户操作，这个也可以实现首先录屏肯定是不现实的，但是浏览器有个神奇的API叫 MutationObserver,通过它来记录 dom 树随着时间的变化，通过 diff，存到一个数组里，上报上去，错误展示界面通过解析这个 dom 树来实现用户行为的回放，就跟看视频是一个效果，之前 vue 的教学站实现点击视频，直接编辑 demo 那种效果，实际上就是这个原理，我们看到的不是视频，是在绘制 dom 树社区有这个库rrweb，就是实现这个功能的，很好用，国内的一个团队做的

这个功能看起来非常骚，但是上报的数据量也非常大，如果是面向 c 端的业务，而且用户量还特别大，建议谨慎使用，不然你们大数据部门会打爆你的头

但是如果你的场景是面向 B 端，比如特别是那种内网部署，出了bug，电话沟通一大堆，还是不能重现问题，你又不能登录客户的账号，来复现问题，就可以通过这个功能来处理