Start using Sentry

Sentry profile

Sentry is an open source bug-tracking tool that helps developers monitor and fix bugs in their systems in real time. It focuses on error monitoring and extracting all the information needed for post-processing; Supports almost all major development languages (JS/Java/Python/ PHP) and platforms, and provides web to display output errors. The sentry’s official website: sentry. IO/document address: docs. Sentry. IO/platforms /

Sentry installed

• Official recommendation:Docker& Python
• Official platform: sentry. IO /

Use Sentry in Vue projects

• Create a new VUE project

• Install in the project@sentry/browser @sentry/integrationsAnd configure it in main.js.The official documentation

$ npm install @sentry/browser
$ npm install @sentry/integrations
Copy the code

// main.js
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

process.env.NODE_ENV === "production" &&  Sentry.init({
  dsn: 'https://[email protected]/18726'.integrations: [new Integrations.Vue({Vue, attachProps: true})]});Copy the code

(Be careful to distinguish between environments; generally we only care about errors in production environments.)

Now when something goes wrong in our code, Sentry will automatically catch it, send you an email, and then it’s up to you to fill in the holes.

Upload sourcemap

• Reason: We can basically locate the error through the above steps, but in a production environment where the code is confused and compressed, there is no point in exposing the Bug, so we need to upload the sourcemap file of the project to the Sentry server when we build the project, so that we can quickly and accurately locate the error.

• Create a new. Sentryclirc file in your project

  [defaults]
  url = 'https://sentry.io/'
  org = 'bignox'
  project = 'test'
  [auth]
  token = cvbfdhb343h54h54546b5hn76
  Copy the code

  The Token field can be seen in the project Setting. Notice When creating the token, select the Project Write permission in addition to the default permission

• Use @sentry/webpack-plugin to automatically upload sourcemap files during build time.

  const SentryWebpackPlugin = require('@sentry/webpack-plugin');
  
  module.exports = {
  	...
    configureWebpack: config= > {
      // Production and test environment
  		let pluginsPro = [
        new SentryWebpackPlugin({
          include: './dist'.ignoreFile: '.sentrycliignore'.ignore: ['node_modules'.'webpack.config.js'].configFile: 'sentry.properties'.release: 'ssp' + process.env.VERSION // Just the name of sourcemap})];// Development environment
  		let pluginsDev = [];
  		if(process.env.ENV === 'production') {
  			config.plugins = [...config.plugins, ...pluginsPro];
  		} else {
  			// Modify the configuration for the development environment...config.plugins = [...config.plugins, ...pluginsDev]; }}};Copy the code

  Note that the release field must be the same as the release field in main.js so that it matches.

  // main.js
  import Vue from 'vue'
  import * as Sentry from '@sentry/browser';
  import * as Integrations from '@sentry/integrations';
  
  process.env.NODE_ENV === "production" &&  Sentry.init({
    dsn: 'https://[email protected]/1806'.integrations: [new Integrations.Vue({Vue, attachProps: true})].release: 'ssp' + process.env.VERSION
  });
  Copy the code

• Once configured, start building and try it out.

Once the build is complete, the Releases record can be seen in the background

Click in, you can see the uploaded map file

• Once deployed online, when an error is caught, we can locate it directly at the source 🐂🍺

Error trapping

• Catch errors or accidents

  In JS, you can catch an error object as an event object by passing it to _captureException()_.

  try {
    aFunctionThatMightFail();
  } catch (err) {
    Sentry.captureException(err);
  }
  Copy the code

• Automatically capture