background

As we all know, front-end exception monitoring is becoming more and more important in real production environments. Through the access to the website front-end anomaly monitoring system, we can obtain the following benefits:

  • Collect error information on the page
  • Assist in locating code error locations
  • Find problems before users report them

It is of great significance to improve the quality of on-line system and reduce the number of on-line failures. Instead of waiting for user feedback on faults, connecting to the anomaly monitoring system can transform passivity into initiative and shorten the process and time of online fault handling.

Front-end anomaly monitoring solution

  • badjs
  • fundebug
  • Sentry

At present, there are several popular exception monitoring solutions mentioned above, but from the perspective of ease of use, free or not, and whether the project is open source or not, I personally think Sentry is a very good choice, and the server deployment is very simple, of course, the server can also directly use Sentry. Site clients can monitor for page script exceptions by introducing the Sentry SDK and inserting code that initializes sentry.

Sentry deployment

Install the Docker
sudo yum remove docker  docker-common docker-selinux docker-engine
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
yum list docker-ce --showduplicates | sort -r
sudo yum install docker-ce
sudo systemctl start docker
sudo systemctl enable docker

Copy the code
Docker installation Sentry
  1. Pull Sentry warehouse
git clone https://github.com/getsentry/onpremise.git
Copy the code
  1. Create the Sentry service
cd onpremise
Copy the code

Create a local Docker database

docker volume create --name=sentry-data && 
docker volume create --name=sentry-postgres &&
docker volume create --name=sentry-redis &&
docker volume create --name=sentry-zookeeper &&
docker volume create --name=sentry-kafka &&
docker volume create --name=sentry-clickhouse &&
docker volume create --name=sentry-symbolicator

Copy the code

Create an env configuration file

cp -n .env.example .env
Copy the code
COMPOSE_PROJECT_NAME=sentry_onpremise
SENTRY_EVENT_RETENTION_DAYS=90
# You can either use a port number or an IP:PORT combo for SENTRY_BIND
# See https://docs.docker.com/compose/compose-file/#ports for more
SENTRY_BIND=9000
SENTRY_IMAGE=getsentry/sentry:nightly
SNUBA_IMAGE=getsentry/snuba:nightly
RELAY_IMAGE=getsentry/relay:nightly
SYMBOLICATOR_IMAGE=getsentry/symbolicator:nightly
WAL2JSON_VERSION=latest
Copy the code

Build a service

docker-compose build
Copy the code

-bash: docker-compose: command not found docker-compose: docker-compose

yum -y install epel-release
yum -y install python-pip
pip install docker-compose
Copy the code

To generate the secret key

docker-compose run --rm web config generate-secret-key
Copy the code
...
Digest: sha256:de277fb0489fa674e28ce44a790840ece63dbacd696c990b95abdf0135ae5283
Status: Downloaded newer image for getsentry/sentry:nightly
4ghk9%xzwzg#e9yv5(w@rabcq626y&n*fygk=tzah%d!*la!1l
Copy the code

The last line is the generated secret key. Add the generated secret key to the SENTRY_SECRET_KEY of the. Env

COMPOSE_PROJECT_NAME=sentry_onpremise SENTRY_EVENT_RETENTION_DAYS=90 SENTRY_SECRET_KEY="4ghk9%xzwzg#e9yv5(w@rabcq626y&n*fygk=tzah%d! *la! 1l" # You can either use a port number or an IP:PORT combo for SENTRY_BIND # See https://docs.docker.com/compose/compose-file/#ports for more SENTRY_BIND=9000 SENTRY_IMAGE=getsentry/sentry:nightly SNUBA_IMAGE=getsentry/snuba:nightly RELAY_IMAGE=getsentry/relay:nightly SYMBOLICATOR_IMAGE=getsentry/symbolicator:nightly WAL2JSON_VERSION=latestCopy the code

Create a database, create a super administrator, and log in to Sentry as prompted

./install.sh
Copy the code

Once the installation is complete, start all services with the following command:

docker-compose up -d
Copy the code

In the browser, open http://server IP address :9000 to view the Sentry server login page.

Sentry is connected to the website
<script src="${staticDomain}/statics/lib/sentry/bundle.tracing.min.js? V =1.0" crossorigin="anonymous"></script> <script> sentry.init ({DSN: "Http://[email protected]:9000/2", // this assumes your build process sets "npm_package_version" in the env // release: "my-project-name@" + process.env.npm_package_version, integrations: [new Sentry.Integrations.BrowserTracing()], // We recommend adjusting this value in production, Or using tracesSampler // For finer control // tracesSampleRate: 1.0, release: "0.0.1",}); </script>Copy the code

The page can write a line of test exception code to verify that Sentry can receive an error. A normal received exception report looks like this

Although script exception errors can be detected from here, the code we usually publish to production is compressed and confused. If we want to monitor which line of code is causing the script error, we also need to upload sourcemaps to the Sentry server.

Sentry post sourcemaps

There are two ways for Sentry to upload sourcemaps, one is through webpack plugin and the other is through Sentry CLI. Depending on what build tool your project is using, it’s easier to use the WebPack plugin if your project is packaged with WebPack, or the Sentry CLI if you’re using gulp or some other build tool.

  • The Webpack plugin uploads sourcemaps

Install @sentry/webpack-plugin and clean-webpack-plugin

npm install @sentry/webpack-plugin clean-webpack-plugin -D
Copy the code

Get authToken

API keys -> Auth Tokens -> Create New Token
Copy the code

Add the following code to webpack.config.js:

const SentryWebpackPlugin = require("@sentry/webpack-plugin"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); The module. Exports = {plugins: [new SentryWebpackPlugin ({url: "http://192.168.4.60:9000/", authToken: "9d332444a2804384b38cce5d11664294c9eea7a41aea4e71ae2daaa4c9b5bd7f", org: "sentry", project: "Pc-web ", // local sourcemap directory include: ".", // js access path, if using CDN, need to write the full domain name and path urlPrefix: "http://src.test.com/statics/js/dist" }), ], };Copy the code
  • Sentry CLI Upload sourcemaps

Install the sentry cli

NPM install @ sentry/[email protected] - DCopy the code

If the installation fails, the following error is reported:

Downloading from https://downloads.sentry-cdn.com/sentry-cli/1.67.1/sentry-cli-Windows-x86_64.exe Error: Unable to download sentry-cli binary from The Error code: https://downloads.sentry-cdn.com/sentry-cli/1.67.1/sentry-cli-Windows-x86_64.exe. ECONNRESETCopy the code

You can change the pull address to taobao mirror address:

npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/
Copy the code

Sourcemaps are generated when configuration code is packaged. My project is packaged based on gulp, so use the gulp-Sourcemaps plugin to generate sourcemaps:

var sourcemaps = require('gulp-sourcemaps'); SRC (path.join(build_path, paths.optimize + '/' + dir + '/' + versiondir + '/*.js')), sourcemaps.init(), babel(), concat(versiondir + '.js'), uglify(), sourcemaps.write('./'), Gulp.dest (distPath)]) // Omit other codeCopy the code

After the build task is executed, the Sourcemap file is also generated in the dist directory.

Upload Sourcemaps to Sentry by creating a.sentryclirc file in the root directory of your project.

Url = http://192.168.4.60:9000/ org = [defaults] sentry project = PC - web auth token = 9d332444a2804384b38cce5d11664294c9eea7a41aea4e71ae2daaa4c9b5bd7fCopy the code

Then add the upload sourcemaps command to the production package script:

Gulp js --env Pro // Production package Sentry -cli Releases -o Sentry -p PC-Web new 0.0.1 Sentry - CLI Releases 0.0.1 upload-sourcemaps statics/js/dist --url-prefix http://src.test.com/statics/js/distCopy the code

It is important to note that the version number of sourcemaps (0.0.1 in the previous example) must be the same as the release parameter used by the site to initialize sentry, otherwise the sentry error script will not be able to locate the source code.

Here is a look at the effect of monitoring script error:

conclusion

By now, we have completed the access of Sentry, the website front-end anomaly monitoring system. This article only demonstrates the most basic functions of Sentry, and other advanced applications are planned to be introduced gradually in the future, including website 404 page monitoring, interface performance monitoring and so on.