Background: How to ensure the normal operation of the project after it is launched, and find the mistakes in the first time when there are problems, and solve them according to the mistakes, so as to provide customers with guaranteed services?

Why Sentry

We need a mature monitoring system, and Sentry is one such tool.

Sentry – Just like its name “Sentry”, can monitor the system running status in the production environment in real time. Once an exception occurs, Sentry immediately sends us the detailed information such as the routing path of the error, the file where the error occurs, and uses the stack trace of the error information to quickly locate the problem that needs to be dealt with.

Sentry was chosen as the front-end monitoring system for the following reasons:

  • Open source
  • Friendly support for various front-end frameworks (Vue, React, Angular)
  • Support SourceMap

The preparatory work

  • Docker download and install

Let’s use docker as an example to create a Sentry service locally from scratch

Environment set up

Sentry can be built using Python2.7 or deployed directly using Docker, so xiaobian can build directly using Python2.7.

The following is the Sentry setup process, please make sure that each step is correct.

  • 1. Start a Redis container
$ docker run -d --name sentry-redis redis
Copy the code
  • 2. Start a Postgres container
$ docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry postgres
Copy the code
  • 3. Generate a key that is used to shake hands between all subsequent Sentry containers
$ docker run --rm sentry config generate-secret-key
Copy the code
  • 4. Connect Redis, Postgres, and Sentry, and the system automatically initializes them
$ docker run -it --rm -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade
Copy the code

You need to create a local user during the initialization operation.

  • 5. Start the Sentry Server and add a port mapping. The Sentry port is 9000. You can use -p 9000:9000 to access the Sentry web management page by visiting http://localhost:9000 or http://host-ip:9000
$ docker run -d --name my-sentry -p 9000:9000 -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-redis:redis --link sentry-postgres:postgres sentry
Copy the code
  • Default configuration requires Celery, so start a Celery main node and worker node if necessary.
$ docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron
Copy the code
$ docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='<secret-key>' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker
Copy the code

The use of the Sentry

  • The login

    Log in to the Sentry management page by connecting to http://localhost:9000 and use the configured email address and password to log in to the account

  • Follow the numeric prompts to create the project

  • After the previous step is complete, you need to configure front-end projects to report errors

    • Install it first
    $ yarn add @sentry/browser
$ yarn add @sentry/integrations
Copy the code
    • Next, configure the code
    import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'http://170d6b79e8d24984b73b3b2cf8834327@localhost:9000/1',
  integrations: [new Integrations.Vue({Vue, attachProps: true})]});Copy the code

    • Error checking

      Sentry statistics contain the following points:

      • Error count activity
      • Information about the browser version and header
      • Error time, file, and error information are reported
      • .

      In this way, we can solve users’ problems more efficiently and bring users a better experience through visual page analysis.