网站首页 > 技术文章 正文
前言
最近再写前端监控的系统,写了大概两个月,系统总体能跌跌撞撞跑起来,监控系统通过 sdk获取到http请求 page性能 js报错 上报到服务器。但是js报错让我非常揪心,因为不知道怎么把上报的错误给还原了。
直到我发现了 source-map-js 这个神奇的包!
这张图是我通过sdk抓取到的js报错,并通过source-map-js error-stack-parser还原出的
准备工作
- 先创建一个空的vue项目,然后删掉一些没用的东西。
- 在 App.vue 写入这段代码
export default {
name: "App",
data() {
return {
testNumber: 1,
}
},
created() {
this.testNumber = null;
if (this.testNumber.length > 1) {
console.log("报错了!");
}
}
}
启动项目之后控制台可以看到js的报错,点击下报错的地方我们也能看到具体是哪个位置出错了。
那么打包上线了是否也能看到报错的位置呢?
tips: 这里我用的phpstudy 搭建的内网环境
emmm翻车了?为啥上线了也能看到?
并没有,部署的时候我把source-map也给放到服务器环境了。
source-map 干啥的呢? 一句话:映射源码
大家在部署项目的时候应该很少会部署source-map吧?虽然能还原报错位置,但放上去了项目体积直线上升!
而且 source-map 也不应该被放到服务器上,这玩意扔上去了你的代码简直就是在裸奔,没人愿意自己的代码被”别有用心”的人看到吧?
那么在生产的时候我是怎么还原的js报错呢?
一起还原js错误吧!
- 先在main.js中配置下vue的错误捕获。
Vue.config.errorHandler = (err, vm, info) => {
console.log(err,"err");
console.log(vm, "vm");
console.log(info, "info");
}
js报错不在是红色的了~
- 引入 error-stack-parser 还原js执行堆栈
import ErrorStackParser from "error-stack-parser"
Vue.config.errorHandler = (err, vm, info) => {
const parseError = ErrorStackParser.parse(err);
console.log(parseError,"err");
console.log(vm, "vm");
console.log(info, "info");
}
- source-map 登场还原真·js报错位置
这里一定一定要开启source-map,把项目部署到服务器环境!
这里一定一定要开启source-map,把项目部署到服务器环境!
这里一定一定要开启source-map,把项目部署到服务器环境!
需要先安装axios包,用来获取到咱们的source-map文件
import ErrorStackParser from "error-stack-parser"
import sourceMap from "source-map-js"
import axios from "axios"
const LoadSourceMap = (url) => axios.get(url)
Vue.config.errorHandler = async (err, vm, info) => {
const stackFrame = ErrorStackParser.parse(err);
console.log(stackFrame, "错误堆栈");
findCodeBySourceMap(stackFrame[0])
console.log(vm);
console.log(info);
}
// stackFrame.fileName 就是报错的Js代码,需要根据这个Js 获取到对应的source-map
const findCodeBySourceMap = async (stackFrame) => {
const sourceData = await LoadSourceMap(stackFrame.fileName + ".map")
const fileContent = sourceData.data;
const consumer = await new sourceMap.SourceMapConsumer(fileContent)
// 通过报错位置查找到对应的源文件名称以及报错行数
const lookUpResult = consumer.originalPositionFor({
line: stackFrame.lineNumber,
column: stackFrame.columnNumber
})
// 那么就可以通过 sourceContentFor 这个方法找到报错的源代码
const code = consumer.sourceContentFor(lookUpResult.source)
console.log(code, "还原之后的 code")
// return {
// code,
// line: lookUpResult.line, // 具体的报错行数
// column: lookUpResult.column, // 具体的报错列数
// name: lookUpResult.name
// }
}
…
功能与作用
- ErrorStackParser 解析报错信息ErrorStackParser 解析出来的出来的是一个数组,这个数组每一个元素都可以解析出来,这里我为了演示就不去一一解析了,感兴趣的小伙伴可以自己去尝试下。
- axios 获取到srouce-map文件axios 就是用来获取到咱们的source-map文件的,我不建议你直接将source-map放到服务器,因为”别有用心”的人可以下载你的source-map还原你的代码……这里我是为了 演示 所以放到服务器上,你可以通过input上传获取source-map 内容(下一篇实现)
- source-map-js 还原源代码srouce-map-js 就是用来还原源代码的。只要你有source-map文件都能还原!非常强大!
总结
下一篇文章会带大家用 Koa 实现数据上报,并在前端页面展示出具体的报错位置。
再讲讲如何自建前端监控系统以及这俩月的心路历程……
参考
排名不分先后
- srouce-map-js
- 线上bug追踪之Sentry初步尝试(一)
- 利用SourceMap还原前端代码 这篇文章总感觉是从哪里爬来的,没有找到具体的作者。
- noerror README.md 有两篇文章建议大家可以去看看!
- 上一篇: 如何使用 rmdir 命令删除目录?
- 下一篇: python 列表删除
猜你喜欢
- 2024-11-27 VirtualBox 7.1.2 发布! 带来多项 GUI 更新,无人值守安装已彻底删除
- 2024-11-27 Spring boot+Mybatisplus用AR模式实现逻辑删除操作
- 2024-11-27 碎片时间学编程「127]:从数组中删除元素
- 2024-11-27 JavaScript程序员需要掌握的5个debug技巧
- 2024-11-27 python 列表删除
- 2024-11-27 如何使用 rmdir 命令删除目录?
- 2024-11-27 illustrator插件-常用功能开发-删除所有蒙版-js脚本开发-AI插件
- 2024-11-27 如何在 Ubuntu 22.04 LTS 中添加、删除和授予用户 Sudo 权限
- 2024-11-27 删除此函数式编程技术的 Switch 语句
- 2024-11-27 碎片时间学编程「83]:满足条件时从末尾删除列表元素
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-