What does an error monitoring system do?

Discover/monitor -> collect -> Store -> Analyze -> Alarm -> Locate -> Finally resolve errors. When an error occurs, we need some auxiliary information to help us locate the error more quickly. Eg: JS Error type, error message, stack, location of the error and related code; Error probability and current device type and version. Based on the above analysis and the actual services (Electron analysis of the main process NodeJS and the underlying kernel library, rendering process TS), select Sentry.

sentry

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 and platforms, and provides a Web to display output errors. Sentry. IO /; (Currently, the salesman has built [Sentry service])

configuration

1. Create the project – select the project type based on the language used, eg: Javascript

2. Generate a key

3. Project reference

// main.js

import * as Sentry from '@sentry/browser';

import * as Integrations from '@sentry/integrations';

// Let sentry report an error in production

process.env.NODE_ENV === "production" && Sentry.init({

dsn: 'https://your dns'.integrations: [ Integrations.BrowserTracing() ]

});
Copy the code

4. An error can be reported after the configuration is complete.

After the above steps, the error has been monitored, but the readability is poor. Because the code is compressed and confused, the error information cannot be accurately located, so we need to upload Sourcemap for verification.

Sourcemap upload

1. Sentry Background authToken configuration

2. Webpck plug-in

To facilitate the project to generate map files and update the automatic configuration, plug-ins are installed under the project

npm i @sentry/webpack-plugin -D
Copy the code

Then create.sentryclirc under the root directory

[defaults]

### Your domain

defaults='your.url'

#The default organization team name is sentry

org=sentry

### Project name

project=your app

#Created in Step 1

[auth]

token=your token
Copy the code

Configure plug-ins in the project

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

if(process.env.NODE_ENV ! = ='development') {

// Note that this is only enabled in the build environment, otherwise NPM run dev will also be uploaded

new SentryWebpackPlugin({

release: Date.now(), // Unique identifier, can use other such as hash

include: './build'.// The folder to upload is called dist

ignore: ['node_modules'.'config-overrides.js'].configFile: '.sentryclirc' });}); }
Copy the code

Otherwise, configure mail

Email notification and nailing machine can be configured as alarm mailBackground configuration file docker-comemage.yml

SENTRY_EMAIL_HOST: 'smtp.baidu.com'

SENTRY_EMAIL_USER: '***@baidu.com'

SENTRY_EMAIL_PASSWORD: '* * * * *'# Fill in your passwordSENTRY_SERVER_EMAIL: '***@baidu.com'

SENTRY_EMAIL_PORT: xxx

SENTRY_EMAIL_USE_TLS: 'true'
Copy the code

Liverpoolfc.tv: docs. Sentry. IO/clients/jar…