preface

As a programmer, every time I test myself enough after development, I still get wire exceptions. How do you quickly detect or monitor these exceptions in advance? Is an error monitoring system needed?

research

An error-monitoring system should do these things

More specifically, monitor errors -> collect errors -> Store errors -> analyze errors -> alarm errors -> Locate errors -> Resolve errors

When the error occurs, we need some auxiliary information to help us locate the error faster, such as JS error type, JS error message, JS error stack, JS error location and the relevant position of the code; JS error probability, browser type, version number, device model and other auxiliary information

Technical solution

  • Since the research
  • Fundebug, sentry, bat…
  • Since there are less than 10 people in front of us and we don’t have too much energy to conduct gay self-research, the general companies that pay for it will not be willing to spend money (you understand), so we choose the foreign mature scheme Sentry [1]

sentry

  1. There’s a paid version of the free version, the free version. The paid version is similar to the free version, the free version is enough for us to use, the paid version is it does everything for you, you just need to install the SDK on the line
  2. Sentry is a real-time event logging and aggregation platform. It is designed to monitor errors and extract all the information needed to perform appropriate after-the-fact actions without any of the hassle of using a standard user feedback loop.

Sentry is a logging platform, divided into client and server. The client (currently Python, PHP,C#, Ruby, etc.) is embedded in the middle of your application. When the application fails, it sends a message to the server, which logs the message to the database and provides a web program for viewing. Sentry is written in Python and is open source with excellent performance and easy to extend. Its current famous users include Disqus, Path, Mozilla, Pinterest, etc

What are the functions

project

Configure multiple projects as shown below

Reported problems

This is all the exceptions in your application

  1. The total number of problems is the number of different problems, and the number of times the same problem occurs is shown at the end
  2. The administrator can then check this question and assign it to other members
  3. Some problems can be ignored or resolved and will not appear in your list
  4. There are also custom searches: most, last, first page, and so on

  1. The URL at which the current error occurred
  2. Name, version, and UA of the browser
  3. The user’s device information such as XiaoMi MI MAX 3 Android10.0 IPXXX
  4. Basic user information, such as name and userID, needs to be configured by yourself
  5. If the page has XHR information, the request information response status code will be displayed
  6. Draw focus – when encountered js error will call stack, error type, error occurrence article print out, if matched with sourcemap can be compressed before the confusion of the code clearly located to which line

visualization

  1. Built-in data visualization for various dimensions
  2. If not, it also provides some apis and similarGitlab and Github will provide the same API for secondary development

Call the police

Additional plugins can be installed, such as pin bots and email alerts

Installation and Deployment

installation

  • Python
  • Docker here uses Docker installation is a little easier

The environment

MIN_DOCKER_VERSION='1.10.0' //docker -v
MIN_COMPOSE_VERSION='1.17.0' //docker-compose -v
MIN_RAM=3072 # MB // You have at least 3 gigabytes of memory
Copy the code

process

A key generation

The authorities provided one-click generation of scripts in nineteen nineteen. The repository is here onpremise[2]

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

If Docker is not configured with a domestic mirror, it will probably be slow

If so, ignore it
mkdir /etc/docker 
## No direct execution
vim /etc/docker/daemon.json
{
 "registry-mirrors" : [  "https://mirror.ccs.tencentyun.com". "http://registry.docker-cn.com". "http://docker.mirrors.ustc.edu.cn". "http://hub-mirror.c.163.com" ]..} Copy the code

There will be a process for you to configure the administrator account password after downloading

docker-comose up -d
Copy the code

After the configuration basically the entire installation process should not have what big problem, the problem is estimated to be the network problem

Manual installation

To prepare

  • Docker-ce
  • Docker-compose

Mirror pull

docker pull sentry
docker pull redis
docker pull postgres
Copy the code

Start the

docker run -d --name sentry-redis --restart=always redis   ### guarantee, abnormal automatically pull up
docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry --restart=always postgres
Copy the code

Generate a unique secret key

docker run --rm sentry config generate-secret-key
12345  ### print the secret-keys, it's best to copy them here, we'll use them later
Copy the code

Initialize and create Admin

docker run -it --rm -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade
Copy the code

Start three services

# # # the web service
docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY='12345' --link sentry-redis:redis --link sentry-postgres:postgres --restart=always sentry
# # # cropn service
docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron
# # # work service
docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker Copy the code

The password for opening the account is the password of the administrator created earlier

Configure the background address, early warning email address, and other functions

Front end access

Create a project

So let’s call this javascript project myApp

Then sentry added a project in the background and introduced it in our front end project like this

// Script import
<script
  src="https://browser.sentry-cdn.com/5.22.3/bundle.tracing.min.js"
  integrity="sha384-HfEJlGrJtFM0B01Wt4sGzTbxWqLMcMeGAXCbyQyB+iK9BhnDmNAtIGovhekIQOa2"
  crossorigin="anonymous"
></script> // npm  import * as Sentry from '@sentry/browser'; import { Integrations } from '@sentry/tracing';  Sentry.init({  dsn: 'xxxx'. integrations: [  new Integrations.BrowserTracing(), ]. tracesSampleRate: 1.0.}); Copy the code

So the whole process is working and ready to go

Sourcemap upload

It is well known that our online code is obfuscated by compression. So even if you get the error message, you can only guess, so you need to work with SoureMap to accurately locate the error message

To prepare

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

  1. Download the WebPack plug-in
npm i @sentry/webpack-plugin -D
Copy the code

Then create.sentryclirc under the root directory

[defaults]
### your domain
defaults.url='http://localhost:9000'
### The default organization team name is sentry
org=sentry
### Project name project=myapp ### Created in Step 1 [auth] token=1234 Copy the code

Configure the plug-in

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
 ignoreFile: '.sentrycliignore'./ / don't  ignore: ['node_modules'.'config-overrides.js']. configFile: '.sentryclirc' // The default is the same. If not, use the Node path module to handle it  });  } Copy the code

Then run NPM run build

Creating an optimized production build...
> Found 10 release files
> Analyzing 10 sources
> Rewriting sources
> Adding source map references
> Bundled 10 files for upload > Uploaded release files to Sentry > File upload complete Copy the code

Congratulations on your successful configuration

Other common apis

Take the initiative to report

Sentry.captureMessage('Hello, world! '); // Report information
Sentry.captureException(new Error('Good bye')); // An exception is reported
Sentry.captureEvent({ // Report the event
  message: 'Manual'.  stacktrace: [
 // ... ].}); Copy the code

Configuring User Information

Sentry.configureScope((scope) = > {
        scope.setUser({
. data.userInfo,          time: new Date().toLocaleString()
        });
 }); Copy the code

other

  • mail
  • The nailing machine can download some plug-in configurations itself

The last

After looking at other big companies’ own solutions, we found that sentry can be extended into buried point + performance monitoring. Sentry still has some limitations, but it is enough for ordinary companies

The resources

[1]

sentry: https://sentry.io/welcome/


[2]

onpremise: https://github.com/getsentry/onpremise

This article is formatted using MDNICE