Set up the sentry front-end exception log monitoring environment

Authors: Swallow falcon, white dove

What can Sentry do

It can monitor the running status of the system in the production environment in real time. Once an exception occurs, it will immediately notify us of the detailed information such as the routing path of the error, the file where the error occurs, and quickly locate the problem to be dealt with by using the stack trace of the error information.

Advantages:

Supports almost all major development languages (JS/Java/Python/ PHP) and platforms, and provides a Web interface to display output errors. Sentry is divided into server and client SDK. The former can directly use the online services provided by its home, or can be built locally. The latter provides support for many major languages and frameworks, including React, Angular, Node, Django, RoR, PHP, Laravel, Android,.NET, JAVA, and more. It also offers solutions to integrate with other popular services, such as GitHub, GitLab, Bitbuck, Heroku, Slack, Trello, and more.

SourceMap is supported and can be viewed in a production environment

Website:

Liverpoolfc.tv: sentry. IO /

Installation environment requirements:

  • The Docker 19.03.6 +

  • Compose 1.24.1 +

  • 4 CPU Cores

  • 8 GB RAM

  • 20 GB Free Disk Space

Develop. Sentry. dev/self-hosted…

2. MAC setup procedure

1. Docker installation

MAC address mirrors.aliyun.com/docker-tool installation…

1. Use the official git repository address to create (Github.com/getsentry/o…

git clone https://github.com/getsentry/onpremise.git
cd onpremise
./install.sh
Copy the code

3. The intermediate process is very slow, and the pits encountered during the process are placed below

Configure the account and password of the client and run the following command to complete the configuration

docker-comose up -d
Copy the code

4. Open the local address

http://localhost:9000. Log in to the client using the configured account and password

Set up a VUE project

1. Create a VUE project

2. Download dependencies in the development vUE project

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

Then import it in main.js

import Vue from 'vue' import * as Sentry from '@sentry/browser'; import * as Integrations from '@sentry/integrations'; Sentry.init({DSN: ' ',// DSN Integrations generated by Sentry: [new Integrations.vue ({Vue, attachProps: true})], logErrors: True, release: '// version});Copy the code

The error log is now visible in the development environment.

3. Sentry.captureException can be used to actively trigger an error

(www.npmjs.com/package/@se…

// Try {doSomething(a[0])} catch (e) {sentry.captureException (e)} window.onError Window.onerror = function(e) {sentry.captureException (e)} // Vue.config.errorHandler hook to catch vue.config. errorHandler = (err, VM, info) => {sentry. captureException(err)} Can achieve the request in the global intercept axios. Interceptors. Response. Use (null, error => { console.error(error) Sentry.captureException(error) return Promise.reject(error) })Copy the code

4. Production environment uploads using Sourcemap

1. Sentry background configuration authToken is used to upload sourcemap. Check it in the following figure

2. Download the WebPack plugin

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

Then create.sentryclirc under the root directory

[defaults] ### your domain defaults.url='http://localhost:9000/' ### # organization team name default is sentry org=sentry ### project=vue ### [auth] token= Configured tokenCopy the code

3. Configure the plug-in

const SentryWebpackPlugin = require('@sentry/webpack-plugin'); if (process.env.NODE_ENV ! == 'development') {// NPM run dev will also upload new SentryWebpackPlugin({release: Date.now(), dist ignoreFile (dist ignoreFile, dist ignoreFile, dist ignoreFile) '.sentrycliignore', // Ignore: ['node_modules', 'config-overrides. '.sentryclirc' // defaults to the same level, if not the same need to use node path module}); }Copy the code

Then run NPM run build and the configuration succeeds

Four, installation encountered pit

1. When you run the./install.sh command to install the latest version of the official website, a _lib.sh file problem is reported.

/install.sh FAIL: Expected minimum RAM available to Docker to be 2400 MB but found 1989 MB

It’s not the Sentry, it’s the RAM that needs to be allocated to run the Sentry project.

If there is any Fetching and updating Docker images when running./install.sh, you can Fetching and updating Docker images if there is any Fetching and updating Docker images when running

Cr.console.aliyun.com/cn-hangzhou…

Search docker

Configure the mirror