博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端错误日志采集上报
阅读量:5953 次
发布时间:2019-06-19

本文共 2337 字,大约阅读时间需要 7 分钟。

js-log-report

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

GitHub:

业务背景

在开发
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
  1. os_version 系统版本号
  2. 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;

缺点

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

,有时间再去研究一下

源代码

原文地址:

转载地址:http://nioxx.baihongyu.com/

你可能感兴趣的文章
[React Native Android 安利系列]样式与布局的书写
查看>>
利用dxflib读写cad文件
查看>>
服务器迁移小记
查看>>
FastDFS存储服务器部署
查看>>
Android — 创建和修改 Fragment 的方法及相关注意事项
查看>>
流程控制: jQ Deferred 与 ES6 Promise 使用新手向入坑!
查看>>
swift基础之_swift调用OC/OC调用swift
查看>>
Devexpress 15.1.8 Breaking Changes
查看>>
推荐JS插件:imagesLoaded,监测图片加载情况并提供相应的事件(加载成功/失败)...
查看>>
Java B2B2C多用户商城 springcloud架构- common-service 项目构建过程(七)
查看>>
杨老师课堂之ArrayList集合常用方法解析
查看>>
ElasticSearch Client详解
查看>>
新零售讲堂之时代下的传统零售业,何去何从?
查看>>
c++读取和写入TXT文件的整理
查看>>
深入动态人脸识别小场景应用,2019年或将迎来爆发期
查看>>
Ionic2 下处理 Android 设备下返回按钮的事件
查看>>
linux基础--grep以及模式正则表达式
查看>>
Spark入门实战系列--7.Spark Streaming(上)--实时流计算Spark Streaming原理介绍
查看>>
linux安全问答(1)
查看>>
微软已停止对Vista RTM(SP0)的服务支持
查看>>