Connect sentry to Vue project

Sentry technology stack was recently plugged into the company’s internal Vue project to track runtime errors. For this matter to share, incomplete or wrong place welcome to exchange. github

Sentry error log collection framework

Stop hoping your users will report errors

Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience.

If your project allows it, you can apply for a free account at Sentry to manage runtime errors in your project uploads. You can also set up a Sentry in your company. Setting up a Sentry is irrelevant to this article.

1. Principle of Sentry (personal opinion)

(1) Sentry is a framework for collecting project runtime error logs. This framework is divided into service platform and client.

Service platform: it can be built by itself, or it can use the (free, paid) client of the official website: it can be understood from its starting point is to monitor the project code, which needs to be embedded in the project. As a front-end, the first thing that comes to mind is plug-ins.Copy the code

(2) The diversity of languages. The development of languages is diverse, so Sentry supports more languages

(3) Collection method of error log. How to upload error logs generated in code to the Sentry service platform.

When you complete the Sentry configuration, you will get a value called "DSN", which looks like a standard URL. The Sentry service supports multi-user, multi-team, multi-application management, with a PROJECT_ID for each application and PUBLIC_KEY and SECRET_KEY for authentication. Thus, a DSN like this is formed:'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'PROTOCOL is usually HTTP or HTTPS, HOST is the HOST name and port of the Sentry service, and PATH is usually empty.Copy the code

Sentry service platform configuration

1. Create a project

Obtain SENTRY_DSN (also called Client Keys)

To send data to Sentry you will need to configure an SDK with a client key (usually referred to as the SENTRY_DSN value). For more information on integrating Sentry with your application take a look at our documentation.

Sentry ‘{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}’ PROTOCOL is usually HTTP or HTTPS, HOST is the HOST name and port of the Sentry service, and PATH is usually empty. You can check the details in “Project Setting” of your Project

3. Client Settings

Access in the client side is simple, just need to configure the plug-in. Note, however, that this must be done before the Vue configuration. The configuration of each client platform can be found on the official website.

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('https://[email protected]/242345')
    .addPlugin(RavenVue, Vue)
    .install();Copy the code

Iv. After reporting an error

Click in to view the details, and the error message will be sent to the registered mailbox by default.

SourceMap release version upload

At present, front-end projects will basically use tools for compilation, packaging, compression, etc. (Webpack). Then, such code after the release of the error returned source code you may be hard to find where the specific location.

detailed

Connect sentry to Vue project