#稳定性-异常上报 前端异常埋点系统初探

复制代码

sourcemap

生产环境下所有的报错的代码行数都在第一行了，为什么呢？

通常在该环境下的代码是经过webpack打包后压缩混淆的代码，否则源代码泄漏易造成安全问题，在生产环境下，我们的代码被压缩成了一行。而保留了sourcemap文件就可以利用webpack打包后的生成的一份.map的脚本文件就可以让浏览器对错误位置进行追踪了，但这种做法并不可取，更为推荐的是在服务端使用Node.js对接收到的日志信息时使用source-map解析，以避免源代码的泄露造成风险

image.png

vue.config.js配置里通过属性productionSourceMap: true可以控制webpack是否生成map文件

webpack自定义插件实现sourcemap自动上传

为了我们每一次构建服务端能拿到最新的map文件，我们编写一个插件让webpack在打包完成后触发一个钩子实现文件上传，在vue.config.js中进行配置

调整 webpack 配置

//vue.config.js

let SourceMapUploader = require(“./source-map-upload”);

module.exports = {

configureWebpack: {

resolve: {

alias: {

“@”: resolve(“src”),

},

},

plugins: [

new SourceMapUploader({url: “http://localhost:3000/upload”})

],

}

//   chainWebpack: (config) => {},

}

复制代码

//source-map-upload.js

const fs = require(“fs”);

const http = require(“http”);

const path = require(“path”);

class SourceMapUploader {

constructor(options) {

this.options = options;

}

/**

* 用到了hooks，done表示在打包完成之后

* status.compilation.outputOptions就是打包的dist文件

*/

apply(compiler) {

if (process.env.NODE_ENV == “production”) {

compiler.hooks.done.tap(“sourcemap-uploader”, async (status) => {

// console.log(status.compilation.outputOptions.path);

// 读取目录下的map后缀的文件

let dir = path.join(status.compilation.outputOptions.path, “/js/”);

let chunks = fs.readdirSync(dir);

let map_file = chunks.filter((item) => {

return item.match(/.js.map$/) !== null;

});

// 上传sourcemap

while (map_file.length > 0) {

let file = map_file.shift();

await this.upload(this.options.url, path.join(dir, file));

}

});

}

}

//调用upload接口，上传文件

upload(url, file) {

return new Promise((resolve) => {

let req = http.request(${url}?name=${path.basename(file)}, {

method: “POST”,

headers: {

“Content-Type”: “application/octet-stream”,

Connection: “keep-alive”,

},

});

let