资讯专栏INFORMATION COLUMN

前端错误日志采集上报

AZmake / 3295人阅读

摘要:前端错误日志采集上报上报给后端分析错误日主要用于移动端各手机类型错误日志的收集分析业务背景在开发移动端项目,运营同学反馈了一个客户手机上页面白屏的问题此时说第一句话是,在我的手机上是正产的啊,可是问题就是存在,生产环境啊,需要怎么处

js-log-report

前端错误日志采集上报、上报给后端分析错误日、主要用于移动端各手机类型错误日志的收集分析

GitHub:
js-log-report

业务背景
在开发Vue移动端项目,运营同学反馈了一个客户手机上页面白屏的问题、此时说第一句话是,在我的手机上是正产的啊,可是问题就是存在,生产环境啊,需要怎么处理呢? "vconsole"也只能在外测上使用、在生产上找问题,而且不知道是在什么手机上才会有这个问题、如何重现bug 是面临的第一个问题。
为何要做错误日志追踪上报

前端JS代码错误,浏览器都都会在控制台输出错误信息,以及出错的文件,行号,堆栈信息,这些错误很容易导致页面代码不执行,并且考虑到手机类型五花八门,浏览器内核以及版本的差异性,前端代码机型兼容性问题,并不能将所有的手机都拿来适配,前端错误日志上报是一个较好的解决方案

日志上报哪些数据

1.通过 wiindow.onerror 可以获取 msg, url, line, col, error等错误信息,JS 的错误行号、url错误地址,
2.通过 window.navigator.userAgent 获取 设备浏览器的信息集合
如:

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

os_version 系统版本号

browser 浏览器类型 Opera FF Chrome Safari IE

 var defaults = {
    ua: window.navigator.userAgent,
    browser: "",
    os: "",
    osVersion: "",
    errUrl: window.location.href,
    msg: "", // 错误的具体信息
    url: "", // 错误所在的url
    line: "", // 错误所在的行
    col: "", // 错误所在的列
    error: "" // 具体的error对象
  }

具体上报字段可查看表结构

如何实现错误上报

1.实现错误日志收集 收集onerror 错误参数,以及自定义的参数
2.核心window.onerror,重写该方法、在此中捕获异常错误信息、并且将错误信息发送至服务器接口
大致代码如下

window.onerror = function (msg, url, line, col, error) {
  ajax({
    url: "xxx/api/sendError", // 请求地址
    type: "POST", // 请求方式
    data: data, // 请求参数
    dataType: "json",
    success: function (response, xml) {
      // success
    },
    fail: function (status) {
      // error
    }
  })
}
如何使用
使用如index.html所示,导入以下代码在页面head中,并且优先于其他JS文件加载

    
数据上报表结构
DROP TABLE IF EXISTS `j_log`;
CREATE TABLE `j_log` (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT "id号",
  `os_version` char(10) DEFAULT NULL COMMENT "系统版本号",
  `msg` varchar(255) DEFAULT NULL COMMENT "错误信息",
  `error_url` varchar(255) DEFAULT NULL COMMENT "错误所在的url",
  `line` int(10) DEFAULT NULL COMMENT "错误所在的行",
  `col` int(10) DEFAULT NULL COMMENT "错误所在的列",
  `error` varchar(255) DEFAULT NULL COMMENT "具体的error对象",
  `url` varchar(255) DEFAULT NULL,
  `browser` varchar(255) DEFAULT NULL COMMENT "浏览器类型",
  `product_name` char(255) CHARACTER SET utf8 DEFAULT "" COMMENT "产品名称",
  `error_time` char(20) DEFAULT NULL COMMENT "时间戳",
  `os` char(10) DEFAULT NULL COMMENT "系统类型",
  `extend` varchar(255) DEFAULT NULL COMMENT "业务扩展字段、保存JSON字符串",
  `ua` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=55 DEFAULT CHARSET=utf8;
缺点

对于压缩的代码,报错信息没法定位到具体是什么地方报错了,这里没有去详细研究,阮一峰老师有篇相关文章
JavaScript Source Map 详解,有时间再去研究一下

源代码

js-log-report

原文地址:
https://code.it919.cn/2018/06...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95606.html

相关文章

  • 前端监控数据采集更高效

    摘要:如何在新的技术背景下让前端数据采集工作更加完善高效,是本文讨论的重点。具体来说,我们对前端的数据采集具体主要分为路由切换性能资源错误日志上报路由切换等前端技术的快速发展使单页面应用盛行。 随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受。因此,对于前端的监控不容忽视。 搭建一...

    Half 评论0 收藏0
  • 前端代码的错误日志收集了解一下

    摘要:前言开发应用程序过程中的一种常见的做法就是集中保存错误日志以便查找重要错误的原因就像数据库和服务器都会定期写入日志一样在复杂的应用程序中我们同样推荐你把错误也回写到服务器换句话再说我们也可以将这些错误写入到保存服务器端错误的地方只不过标明他 前言 开发web应用程序过程中的一种常见的做法,就是集中保存错误日志,以便查找重要错误的原因. 就像数据库和服务器都会定期写入日志一样,在复杂的...

    changfeng1050 评论0 收藏0
  • 前端性能与异常上报

    摘要:回过头来发现,我们的项目,虽然在服务端层面做好了日志和性能统计,但在前端对异常的监控和性能的统计。对于前端的性能与异常上报的可行性探索是有必要的。这是我们页面加载性能优化需求中主要上报的相关信息。 概述 对于后台开发来说,记录日志是一种非常常见的开发习惯,通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用,也会记录下每次接口调用的时间消耗,以便我们监控服务器接口...

    gggggggbong 评论0 收藏0
  • 如何优雅处理前端的异常?

    摘要:二需要处理哪些异常对于前端来说,我们可做的异常捕获还真不少。总结一下,大概如下语法错误代码异常请求异常静态资源加载异常异常异常跨域崩溃和卡顿下面我会针对每种具体情况来说明如何处理这些异常。 前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。一、为什么要处理异常?异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事...

    zoomdong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<