preface
Elevator:Teach you to build front-end exception Handling System (PART 1)
As mentioned last time, there are still some problems after uploading sourseMap, for example, when developing and debugging, errors will be collected, so I see too many errors, and at the same time, developers will not display errors, which will cause problems for development, this time we will focus on solving these problems.
Formal environments are distinguished from test environments
In main.js, sentry is initialized to distinguish the environment, if not the formal environment is not initialized;
process.env.NODE_ENV === "production" &&Sentry.init({
dsn: 'https://[email protected]/xxx'.integrations: [new VueIntegration({Vue, attachProps: true})].release: process.env.RELEASE_VERSION,
logErrors: true// If set to true, errors are not only sent to the platform, but also displayed on the page.
});
Copy the codeAlso for packaging purposes, such as in test environments, I don’t need sourseMap and I don’t need to upload the code to the server (so it won’t be too messy on the server), so IN Webpack I need the most appropriate modification: vue.config.js:
let plugins =[];
if(process.env.NODE_ENV === 'production'){
plugins.push(
new SentryCliPlugin({
include: "./dist/".// The folder of the function
release: process.env.RELEASE_VERSION, // Consistent version number
configFile: "sentry.properties"./ / don't have to change
ignore: ['node_modules'.'webpack.config.js'].urlPrefix: "~ /",}}))module.exports={
configureWebpack: {plugins: plugins
}
}
Copy the codeSo far we’ve done that and only the formal environment will generate a.map file and upload it to the server. There is a problem, however. If you have a.map file in a formal environment, then others can easily obtain the source code of your website. Of course, the stupid way to do this is to manually delete the.map file before publishing it (this may seem silly, but it works). Another way to think about it is for your operations to write a script, publish it and then execute it to delete your.map file, but it requires that you have a good relationship with your operations, so you can pee together, in case you have a bad relationship with operations or there is no operation. Better to seek oneself than to seek others. After a lot of searching and searching for webpack plugins, I finally found a treasure trove of zip-webpack-plugin in someone else’s article
The principle of
Package the dist file into a ZIP file and ignore the.map file. Vue. Config.js:
if(process.env.NODE_ENV === 'production'){
plugins.push({
new SentryCliPlugin({
include: "./dist/js".// Function folder, only need js file
release: process.env.RELEASE_VERSION, // Consistent version number
configFile: "sentry.properties"./ / don't have to change
ignore: ['node_modules'.'webpack.config.js'.'dist.zip'].// Upload code ignores the packaged zip
urlPrefix: "~ /",
})
})
plugins.push(
new ZipPlugin({
path: path.join(__dirname, 'dist'),
filename: 'dist.zip'.exclude: [/\.map$/]// Exclude.map files}),)Copy the codeLet’s do some packing
Some supplement
At this point, sentry deployment is over, and users can see an error on the management side whenever they encounter a problem, but there are still some issues that need to be resolved
- 1. The code is uploaded in the same version. After the code is changed, for example, after the hot update, the two codes are physically merged together, that is, it will not delete the last code, resulting in a large number of warehouse files, such as:
The current solution is to change RELEASE_VERSION, generate a new version, and then manually delete the previous version, which I personally feel is not smart enough
- 2. Since the website of the management platform is an external network, it is slow to open and has the risk of hanging, so you can build the management platform on your own server (the tutorial is on the official website).
