作为前端经常遇到线上报错却无法复现的情况，要是这个时候有错误监控能快速帮我们定位问题所在，再查找错误监控的相关资料尝试去实现一个自己的sdk。下面我以 错误监控 和 设备信息 两方面作为关注点去实现。 完整代码
错误监控
运行时报错
window.onerror = (msg,url,lineNo,columnNo,e) => {
// ...上报错误
}
复制代码
promise reject 未被处理
window.addEventListener('unhandledrejection',(event) => {
// 报错原因，当前路径，报错时间
const { message,config:{method,url} } = event.reason
// ...上报错误
})
复制代码
重写原生的监听事件
// 保存原生的 addEventListener 事件
const originAddEventListener = EventTarget.prototype.addEventListener
// 重写原生的监听事件
EventTarget.prototype.addEventListener = (type,listener,options) => {
const wrappedListenner = (...args) => {
try {
return listener.apply(this,args)
} catch (error) {
const { name,message } = error
// ...上报错误
throw error
}
}
return originAddEventListener.call(this,type,wrappedListenner,options)
}
复制代码
劫持 Vue.config.errorHandler
const vueErrorHandler = Vue.config.errorHandler
const wrapErrorHandler = function(err,vm,info) {
const componentRouteInfo = vm.{className};id-${id}`,
nodeName
}
}
// 获取该元素下嵌套的子元素的中第一个元素的文字
function searchBottomNestChild(dom:any) {
let current = dom
while (current.firstChild) {
current = current.firstChild
}
return current.nodeValue
}
复制代码
设备相关信息
const pageLog = () => {
const userAgent = navigator.userAgent
let webview = ''
if (userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)) {
webview = 'ios'
}
if (userAgent.match(/MicroMessenger/([^\s]+)/)) {
webview = 'weixin'
}
if (userAgent.match(/QQ/([\d.]+)/)) {
webview = 'qq'
}
// 获取网络相关的信息
const connection = navigator.connection
return {
logType:LogType.page,
path:location.href,
platform:navigator.platform,
webview,
connection
}
}
复制代码
发送数据
通过 new Image 方式创建的元素，只需要赋值 src 属性即可发送请求，无需插入文档中。
需要注意在拼接参数的时候，需要使用 encodeURIComponent 对值进行转移否则将 location.href 这类url作为值时会造成错误。
function parseJsonToString(dataJson) {
if (!dataJson ) { dataJson = {} }
var dataArr = Object.keys(dataJson).map(function(key) { return key + '=' + encodeURIComponent(dataJson[key]) })
return dataArr.join('&')
}
const logGif = (params) => { const upload = parseJsonToString(params) const img = new Image(1,1) img.src = 'https://view-error?' + upload } 复制代码 打包sdk文件 完成了基本的错误监控功能后，我们可以把这些文件打包成一个js文件，其他项目需要应用的时候通过 script 引入的方式直接使用即可。
webpack.config.js 的配置会比我们项目中的少很多，由于我是使用的 typescript + vue 的方式，配置如下：
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
entry:{
// sdk文件的主入口
'view-error':resolve('../src/utils/index.ts')
},
output:{
path:resolve('../dist')
},
resolve: {
extensions:['.ts','.js']
},
module: {
rules:[
// 处理 .ts 结尾的文件
{
test: /.tsx?{query}')`)
// 图片作为返回
const file = fs.readFileSync('upload/icon-image.gif')
ctx.type = 'image/gif'
ctx.body = file
}
复制代码
疑问和待优化
问题
目前是通过 vue-router 来监听页面跳转的。我试了下 window.addEventListener('popstate',()=>{}) 和 window.addEventListener('hashchange',()=>{}) 都监听不到 vue 页面路由的变化。js原生能否监听路由变化？
想记录单个用户的操作链路，如何将用户链路关联起来，通过同ip关联吗，
服务端存储的时候该怎么归类存储查询比较方便快捷，服务端这块不是很熟悉。
待优化
1前端发送数据的时候统一格式，将请求分为几类或者相应的等级。
2优化客户端采集的信息，以及一些报错信息的捕获。
3服务端相同信息归类存储，优化存储空间。
