preface

The document describes the process and precautions for uploading sourcemap to Sentry.

purpose

It is convenient to locate errors and exceptions in the source code and solve online problems quickly, so as to achieve the purpose of reducing costs and improving profits.

process

1. Configure the task named jsmin in gulp

This task compresses the script and generates the sourcemap of the script. There is also a bit of a problem with the configuration, which keeps generating incomplete sourcemap files. After careful review of gulp 4 documentation and validation, experience was gained (be sure to write tasks well, either using cb or gulp.src).

Gulp source code:

.pipe(sourcemap.init ()) // Other operations.pipe (sourcemap.write ('./')).pipe(gulp.dest(distpath.js))Copy the code

2. Install Sentry-CLI

There are two ways:

The first:

curl -sL https://sentry.io/get-cli/ | bash
Copy the code

The second:

npm install @sentry/cli
Copy the code

Here we choose the second option and write the installation of sentry-CLI directly in build.sh, but because the installation in grid NPM i-g@sentry /cli is too slow and the installation is not successful, permissions are reported. Later, after consulting Fu Xiongjun, I learned that the grid did not recommend software installation and other operations in the build.sh of the project directly, so I contacted Qian Nengwu, relevant staff of the operation and maintenance department, to help install Sentry-CLI on the server, and the problem was solved.

Upload script sourcemap

After reading the documents of Sentry, I began to write the upload script directly and tested and verified it in the ST environment. It was found that the Jenkins service was dragged down for a time. Later, after communicating with all the leaders, I learned that the upload script I wrote before had interaction waiting for user input, which led to the suspension of Jenkins service. With the help of Wang Lidong, I wrote the shell script and uploaded it successfully.

Shell source code:

Variable initialization:

SENTRY_URL SENTRY_PROJECT = = http://sentry.zt.xxx.cn/ www_xxx_com SENTRY_PROJECT_VERSION = [email protected] = XXX at SENTRY_ORG SENTRY_AUTH_TOKEN=xxxx SENTRY_URL_PREFIX=http://www.xxx.com/js SENTRY_URL_DIST=./dist/jsCopy the code

Upload:

/usr/local/bin/sentry-cli --url ${SENTRY_URL} --auth-token ${SENTRY_AUTH_TOKEN} releases --org ${SENTRY_ORG} --project ${SENTRY_PROJECT} files ${SENTRY_PROJECT_VERSION} upload-sourcemaps --url-prefix ${SENTRY_URL_PREFIX} ${SENTRY_URL_DIST}
Copy the code

4. Verify after uploading sourcemap

I thought that this step had been completed, but I did not see the expected effect in sentry system (exceptions and errors are displayed in a line or a column of the source code), so I thought it was ok to upload sourcemap. After consulting Wang Yajun for many times, careful comparison and analysis, and practical verification, I realized that only when I uploaded the script and the corresponding Sourcemap would I see the desired effect on the Sentry system.

The expected effects are as follows:

5. After uploading sourcemap, dist package is deployed

At this point, we are basically done, but it is important to note that we do not want the source code of our project to be available in the browser. Here we also help to exclude files in the shell script that end in.js.map from the deployed resources and do not package them into the deployed package.

Shell source code:

Exclude means exclude

tar -zcf "${BASE_DIR}/output_scm/${APP_PKG_NAME}.tar.gz" "${APP_PKG_NAME}" --exclude *.js.map
Copy the code

Pay attention to

The Sentry service must be configured to ensure that it can read the map file

After the language

In the process of completing this task, thank you for your help!