前端异常监控

实现思路

前端

js报错事件监听+上报错误信息

后端
  1. 提供接口收集报错
  2. 根据前端提供的sourcemap文件解析前端上传报错
  3. 整理存储数据,通过邮箱即时把错误信息发送至前端同事
利用window.onerror方法
//如果之前其他代码有绑定onerror,需要替换执行一下,如果没有定义window.error===null。
var oldError = window.onerror;
window.onerror = function (msg, fileUrl, lineNo, columnNo, error) {//最后两个参数有些部分浏览器拿不到,依然需要记录

    var args = Array.prototype.slice.call(arguments);
    
    if (oldError) {
      oldError.apply(window, args)
    }
  var stack = null;
    if(error && error.stack) stack = error.stack;
    var json = {
        msg: msg || null,
        fileUrl: fileUrl || null,
        lineNo: lineNo || null,
        columnNo: columnNo || null,
        error: stack
    }
    var userAgent = navigator.userAgent;
    if(XMLHttpRequest){
        var xhr = new XMLHttpRequest();
        xhr.open('post', 'urlxxx', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send("message="+JSON.stringify(json)+"&userAgent="+encodeURIComponent(userAgent))
    }
}

可能存在跨域问题,不同域下的js需要配置script属性 crossorigin="anonymous" 和后端配置 Access-Control-Allow-Origin.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了。 我自己打开页面并没有报错,最后发现报错...
    子慕大诗人阅读 806评论 1 3
  • 背景 最近,刚到新公司,对公司产品进行前端重构;在来公司近一个月中,发现以前产品问题很多,尤其兼容性问题等;在以前...
    e_payne阅读 2,654评论 0 6
  • 为了定位线上问题,前端和客户端很类似,需要进行一些异常收集工作。 通过定位到错误的位置以及错误出现的上下文,可以解...
    狐尼克朱迪阅读 8,680评论 0 2
  • 1. 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScri...
    cbw100阅读 6,405评论 2 86
  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 1,761评论 0 6