preface

As a front end, how often do you get situations like this:

Client: : Why can’t I see the data on this page? Me :(hurriedly open the website), my data show normal! Guest: No! I can’t see from here! Me :(incoherent) but I… Customer: BALABALA

I believe that you front-end ER often encounter such problems, it is clear that everything is normal when you open the machine, but there are a lot of problems when you reach the customer, and you can not locate the problem at all. You can not ask the customer to open the F12 console to see what errors! Therefore, this article mainly describes how to combine vUE and Sentry to achieve real-time monitoring and collecting error logs.

I don’t knowsentry? Read my last articleRemember the Sentry deployment process

Preliminary combination of Vue and Sentry

After the Sentry is set up, click create project and select Browser -> Vue. After the Sentry is created, you can follow the instructions in it or the tutorial on the official website to operate. The steps are as follows:

// Install the official library
yarn add @sentry/browser
yarn add @sentry/integrations
Copy the code

Add the following code to the main.js file

import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'

Sentry.init({
    dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>'.integrations: [
    new Integrations.Vue({
        Vue,
        attachProps: true})]})// I have introduced DSN in the last article
Copy the code

After that, let’s go to NPM run dev and make an error in any component

Then let’s open it and see if the error log has been collected. If successful, it should look like the following picture

This indicates that the error we just triggered has been successfully caught by Sentry. You can click there to see the details

Aa is not a function, so we have initially succeeded in combining vue and sentry

Sourcemap combination

Above, we have successfully integrated Sentry in vUE and caught the error, but we did not find a problem, although we know the error content, but we do not know which line in which component. In order to accurately locate the error, we need to upload a copy of sourcemap for Sentry to parse. Here are two ways to view the information in the official website

sentry-cli

@sentry/webpack-plugin

In this case, I chose sentry-cli. @sentry/webpack-plugin is mainly used to upload sourcemap to Sentry when webPack is packaged

Install @sentry/ CLI globally

npm i -g @sentry/cli
Copy the code

After the installation is complete, enter the website to generate Auth token. The specific steps are as follows:

Go to Account ->API Keys and click Create New Token

Make sure to check Project: Releases and Project: Write as shown below

After the token is generated, go to the root directory of the project and execute

sentry-cli --url http://xxx.xxx.xxx.xxx:9000 login
Copy the code

Since we have successfully generated the auth token above, you will be prompted to enter the token after typing n, and the configuration is complete

Next we need to set a version number for your project in Sentry so it knows where to look for sourcemap to parse

#Sentry -cli releases -o Organization name -p Project name new Version numberSentry -cli releases -o sentry -p vue new [email protected]#Created the release at [email protected].
Copy the code

The organization name can be seen in your account, so that a new version has been created, we can open the website to have a look, we have just created the version number

Then we need to modify our configuration in the main.js file

Sentry.init({
    dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>'.release: '[email protected]'.// The new +
    integrations: [
    new Integrations.Vue({
        Vue,
        attachProps: true})]})Copy the code

Once the configuration is complete, the NPM run build package is executed, and the next step is to upload sourcemap to sentry

Sentry -cli releases -o Organization name -p Project name files Version number upload-sourcemaps Js directory after packaging --url-prefix Js access address on the line sentry-cli releases -o Sentry -p vue files [email protected] upload-sourcemaps dist\static\js --url-prefix ~/static/jsCopy the code

Special attention!! , this — – the prefix url is your online access to the js file path, ~ is the root of your site, static files such as my site is http://192.168.144.163:8080/static/js/xxxx.js, then according to the example above fill in is correct, Root directory because my website is http://192.168.144.163:8080, after the success of the upload can be in the Releases – > see just uploaded files in the Artifacts

If you do not have access to Sourcemap in the dev environment, you will have to test it in the Prod environment. If you do not have access to sourcemap in the dev environment, you will have to test it in the Prod environment

In this way, we can successfully locate the problem on which line in which file, and delete the map file

Sentry -cli releases -o organization name -p Project name files Version number delete --all sentry-cli releases -o sentry -p vue files [email protected] delete --allCopy the code

The plugin @sentry/webpack-plugin is a plugin that allows you to upload the sourcemap file manually for each release. Upload to Sentry while packing.

Possible problems

One of the problems that can take a long time is that when uploading the sourcemap file, the –url-prefix value must be accurate and not be enclosed in quotes. Note that if the file is successfully uploaded but still does not show a specific line, The sourcemap file may not be accessible because of the incorrect sourcemap address, so it cannot be parsed.

summary

After completing, once we can collect real-time when there is an error, and can see specific details of the error, analysis and screening questions, for some incidental BUG is very useful, of course, sentry can do it just to find you the problem with the code for the error in business or by other ways to record!

Questions are welcome to comment below, try to answer. Also welcome to point out the error in the article!