Introduction to the

There are many front-end anomaly monitoring systems on the market. Why did we choose Sentry? Because it supports more projects of current mainstream languages and frameworks, it is more mature and stable. And open source, and github also has docker integrated sentry installation environment. Currently, most companies use the open source Sentry for front-end exception monitoring.

Vue project practice

configuration

For the front-end project based on VUE, we follow the following steps:

  • 1. First create a vUE project on the sentry system set up.
  • 2. Then we need to introduce the Sentry SDK of vue framework. Sentry /browser: By including and configuring sentry, the SDK will automatically attach global handlers to catch uncaught exceptions and unhandled rejections. Sentry/Integrations: Captures the name and props status of the Vue active component that raised the error. This is reported via Vue’s config.errorHandler hook.

npm install @sentry/browser.

npm install @sentry/integrations.

  • 3. Import the plug-in and related configuration in main.js of the vue project
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
// sentry config
  Sentry.init({
    dsn: 'https://<key>@sentry.io/<project>', // Project DNS Integrations: [new Integrations.Vue({Vue, attachProps:true/ /}})])Copy the code

sourcemap

The above configuration has enabled our exception to be reported to the Sentry system, but the location of the exception is a Webpack compressed JS file, and it is difficult to identify which component in the project is which line of code. To enable reported exceptions to be quickly located to the code location, we introduce sourcemap parsing. We need to introduce a component @sentry/webpack-plugin in the vue project where vue.config.js is configured as follows

Const SentryPlugin = require('@sentry/webpack-plugin')
module.exports = { 
	configureWebpack: config => {
	    config.plugins.push(
	      new SentryPlugin({
	        project: 'project-name', // Project name apiKey: token, // Sentry API token suppressErrors:true// Upload failure does not prevent WebPack from continuing release:'version'// The release version on the Sentry project include:'. 'FilenameTransform: filename => {return` ~ /${filename}'// Directory interface for importing resources on the corresponding Web page for uploading files}}))}, productionSourceMap:true
}
Copy the code

The configuration for main.js to add release is the same as in vue.config.js

  Sentry.init({
    dsn: 'https://<key>@sentry.io/<project>', // Project DNS Integrations: [new Integrations.Vue({Vue, attachProps:true})], release:'version'// Release version on sentry project})}Copy the code

Once the above configuration is complete, we can see on the Sentry system that the error is matched to source.map.js, and the specific line of code in the Vue component that reported the error.

Note: The introduction of the webpack-plugin turns on the sourcemap for the project. During the construction of Webpack, the compressed JS chunk file will generate the corresponding map.js file. In order to prevent the source code leakage of the project, we manually deleted the map.js file after the construction was completed in the production environment.

find . -name “*.js.map” | xargs rm -rf

There is also a way to upload the project’s map.js file without plug-ins. After the project build is completed, traverse the files under JS, call the upload interface provided by Sentry, and upload the files to the corresponding release. Creating a new project Release is also done by calling the API provided by Sentry. I won’t go into details here.