Vue project Sentry access

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. Sentry. IO /

Sentry installed

Sentry is an open source tool that you can build yourself. There are two officially supported methods for installing and running Sentry servers, Docker and Python. Docker is recommended. Of course, students who are new to Sentry can also directly use the free services provided by the government, but there are some restrictions. Here’s how to use Sentry in a front-end project using the official free service.

How to use Sentry in a project

1. The first step is to register an account on sentry’s website. After registering, choose to create a new project. Sentry supports a variety of frameworks in which to select VUE to create a project. I created a project called Test.

   

2. The Create project page automatically redirects to the How to Configure the VUE project page. Then follow the instructions to introduce Sentry into the VUE code. Can be imported through CDN or NPM. We use NPM introduction. When introduced, you need to pass a DSN argument to the init function. This parameter uniquely specifies the project we just created, which is generated automatically when the project is created. If this parameter is not passed, sentry will not send an error.

// main.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations'; // Make sentry report error in production environment process.env.node_env ==="production" && Sentry.init({
  dsn: 'https://[email protected]/1447145',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,})]});Copy the code

Add the. Sentryclirc file in the project and directory, where the tokens can be obtained from API keys in the upper left corner.

[auth]
token="your token"

[defaults]
url = https://sentry.io
org = "your org"
project = test
Copy the code

Then we make an error in our code that sentry can catch. How do you simulate local access to files under DIST in an online environment? To install an HTTP-server, start an HTTP service in the dist folder.

npm i http-server 
cd dist
http-server -p 8888
Copy the code

Note: Errors caught by Sentry are not printed in the console.

As you can see from the network, Sentry sends an error request with the following parameters:

You will see the error message in the background and sentry will send an error message to your email address.

Error Message Viewing

If you go to our test project in the background and click on it, you’ll see an error message.

source-map

Upload the source – the map

There are many ways to upload. You can upload source-map from the command line through sentry-CLI, but upload it manually. You can also use the webpack-plugin, which automatically uploads source-Map at the same time you build. This paper adopts the automatic upload policy.

Project Configuration:

// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
    new SentryCliPlugin({
        include: "./dist",
        release: process.env.RELEASE_VERSION,
        configFile: "sentry.properties"})]Copy the code

// main.js
Sentry.init({
    dsn: "https://[email protected]/1447158",
    integrations: [
        new Integrations.Vue({
            Vue,
            attachProps: true
        }),
        new Integrations.RewriteFrames()
    ],
    release: process.env.RELEASE_VERSION
});
Copy the code

// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
    NODE_ENV: '"production"',
    RELEASE_VERSION: `"${release}"`};Copy the code

Make sure that the release numbers in both plugins and sentry. init configurations are the same so that Sentry can match source-Map files. After modification, we will rebuild the project. The build process is slow:

Then when we go to the background, we can see that there is a test-1 version in the version, which is the version we just uploaded.

source-map

At this point, we can re-trigger the error and see the exact location of the error.

Sentry associated making

In Settings -> Integration, you can set sentry to associate with various services, such as Github, Jira, etc. After associating with Github, you can directly create an issue for the exception.

sentry

Open Github, under the sentry warehouse, we found an extra issue, which we created just now.

When we commit to Github with an exception id, for example:

git commit -m 'Fixes TEST-3'
Copy the code

When the next build is released, sentry automatically changes the exception status from Unresolved to Resolved and gives the diff address for this commit.

Set up the Sentry service

There are two ways to build your own Sentry:

• python
• docker

Docker is recommended. Here’s how to build a Sentry with Docker.

First you need to download the docker MAC desktop address: hub.docker.com/editions/co…

Docker command line and Docker-compose have been integrated.

You need to go to Github to install Sentry on-premise, which is a repository for installing A Sentry using Docker.

Steps to create a service:

cdOnpremise // Create a local database docker volume create --name=sentry-data && docker volume create --name=sentry-postgres // Create an environment profile Cp - n. env. Example. Env / / build docker service docker - compose builds / / secret key, use it as a SENTRY_SECRET_KEY join. Env / / create the database file, Generate administrator account docker-compose run --rm web upgrade // start all services docker-compose up with interactive prompts-d 
Copy the code

If all is well, go to localhost:9000 and you will now see the Sentry login page, using the administrator account password you just generated.

Matters needing attention

1. When creating a project with a locally built sentry, the DSN column is empty and the system does not generate it automatically. You need to splice the DSN yourself. It consists of protocol, public key, private key, host, path (usually empty), and project ID.

'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'/ / like this, put it in the sentry. The init the DSN. http://4cf10206ef27409bbb64f68b:a67a0eb5513e43ab883af3f3@localhost:9000/2Copy the code