php中嵌入js报错技巧_soucemapjs Vue 还原生成情形报错让JS报错无所遁形

直到我创造了 source-map-js 这个神奇的包！

这张图是我通过sdk抓取到的js报错，并通过source-map-js error-stack-parser还原出的

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报错呢？

Vue.config.errorHandler = (err, vm, info) => { console.log(err,"err"); console.log(vm, "vm"); console.log(info, "info"); }

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，把项目支配到做事器环境！

这里一定一定要开启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-mapconst 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 // }}…

下一篇文章会带大家用 Koa 实现数据上报，并在前端页面展示出详细的报错位置。

再讲讲如何自建前端监控系统以及这俩月的心途经程……

排名不分先后