手摸手教你搭建前端异常处理系统(下)

Z时代
2024-01-10
分类：技术分享

前言

电梯：手摸手教你搭建前端异常处理" title="异常处理">异常处理系统(上)

上回说到，上传了sourseMap后还存在一些问题，比如开发调试的时候，报错也会被收集，那么多错，我看的岂不是头都大了，同时开发时报错不会再显示，就会为开发造成困扰，这次我们着重解决这些问题。

正式环境与测试环境区分

在main.js中sentry初始化时区分环境，如果不是正式环境就不在初始化就好;

    process.env.NODE_ENV === "production" &&Sentry.init({
dsn: 'https://32ad19d9b80448f593f1df2833256d23@o406425.ingest.sentry.io/xxx',
integrations: [new VueIntegration({Vue, attachProps: true})],
release: process.env.RELEASE_VERSION,
logErrors: true//设置为true,错误不但会发给平台，也会在页面正常显示，方便调试（文档有）
});

同时在打包的时候，比如在测试环境，我不需要sourseMap，也不需要把代码上传到服务器（免得服务器上代码太乱），所以在webpack上也要最对应的修改：

vue.config.js：

let plugins =[];
if(process.env.NODE_ENV === 'production'){
plugins.push(
new SentryCliPlugin({
include: "./dist/", // 作用的文件夹
release: process.env.RELEASE_VERSION, // 一致的版本号
configFile: "sentry.properties", // 不用改
ignore: ['node_modules', 'webpack.config.js'],
urlPrefix: "~/",
})
)
}
module.exports={
configureWebpack:{
plugins: plugins
}
}

至此我们就已经做到了只有正式环境会生成.map文件并上传至服务器上。但此时有一个问题，你这样正式环境的包中也有.map文件，那别人不就可以轻松搞到你的网站源码了？

当然笨办法就是在发布前，手动删除.map文件（好像有点蠢，但是确实有效）。

换个思路就是你的运维写个脚本，发布之后执行，去删掉你的.map文件，不过把这要你和你的运维关系不错，没事一起撒个尿啥的，万一和运维关系不好或者直接没有运维。。。拉闸

求人不如求自己。找了很多办法，也找了很多webpack插件，最终在别人的文章里发现了宝藏 zip-webpack-plugin

原理

将dist文件打包到一个zip文件中，忽略.map文件。说做就做：

vue.config.js：

if(process.env.NODE_ENV === 'production'){
plugins.push({
new SentryCliPlugin({
include: "./dist/js", // 作用的文件夹，只需要js文件
release: process.env.RELEASE_VERSION, // 一致的版本号
configFile: "sentry.properties", // 不用改
ignore: ['node_modules', 'webpack.config.js','dist.zip'],//上传代码无视打包后的zip
urlPrefix: "~/",
})
})
plugins.push(
new ZipPlugin({
path: path.join(__dirname, 'dist'),
filename: 'dist.zip',
exclude: [/.map$/]//排除.map文件
}),
)