Real-time exception Catching – Configuration and use of Sentry (Compatible with Windows)

See my blog -> full text click

Private deployment

Do not install docker by default. The version in yum is too low. Install it after downloading the latest version on docker’s official website, and the same is true for docker-compose. Note: The deployed server must have a CPU core greater than 2 and RAM greater than 4000M to deploy Sentry!!

My private deployment was not successful because of the hardware environment, so I jumped right to using this step, which relies on the official Sentry server. Sentry supports Gatsby, Angular, Vue, Electorn, etc. React is used in the following examples.

Install dependencies

yarn add @sentry/react
yarn add @sentry/tracing
Copy the code

Configuration Items

The project is built using UMi3 and added in the entry file

// app.tsx
import * as Sentry from "@sentry/react";
import { sentryConfig } from ".. /configs";
// ...
Sentry.init(sentryConfig);
Copy the code

The sentryConfig configuration file is as follows. To configure DSN, go to projects > Select Project > Setting > Client Keys or Settings >project > Select Project > Client Keys to find DSN.

Configure the DSN to catch errors. Here are some configuration instructions to customize.

// configs/config.ts
import { Integrations } from "@sentry/tracing";

export default {
    dsn:
        "https://[email protected]/5678335".integrations: [new Integrations.BrowserTracing()],
    / / tracesSampleRate: 1.0.
    debug: false.// If this function is enabled, debugging information will be printed. Not recommended in production environments
    release: REACT_APP_RELEASE_VERSION, // The release version, which defaults to the SENTRY_RELEASE value in the environment variable
    environment: "prod".// Set the current environment, which is SENTRY_ENVIRONMENT by default
    sampleRate: 1.// Error event collection rate. The value ranges from 0 to 1. The default value is 1
    attachStacktrace: false.// If this function is enabled, all stack trace information is automatically displayed. This function is disabled by default
    denyUrls: [].// An array of strings or regular expressions. Routes that match will not send error messages
    allowUrls: undefined.// An error on the matched route is sent to sentry. Send all by default
    tracesSampler: (samplingContext: object) = > {
        /* samplingContext: location: location {ancestorOrigins: DOMStringList, href: "Http://localhost:8000/tracker/Regist", origin: "http://localhost:8000", protocol: "HTTP:" host: "localhost: 8000",... } parentSampled: undefined transactionContext: name: "/tracker/Regist" op: "pageload" trimEnd: true */
        // You can filter routes here
        if(samplingContext.location? .pathname? .includes("/demo")) {
            return 0;
        } else {
            return 0.1; }},/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- hooks -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
    beforeSend(evt: object, hint: object) {
        if(evt.environment ! = ="prod") return null; If null is returned, the event will not be sent
        if(hint? .originalException ==="xxxxx") {
            // You can capture the original error message and process it
            evt.fingerprint = ["database-unavailable"];
        }
        returnevt; }};Copy the code

Event entity

Breadcrumbs, (3) [{...}, {...}, {...}] environment: "prod" event_id: "2 c0b69dd0715487f8c767dbda026d0a0" exception: {values: Array(1)} extra: {arguments: Array(1)} level: "error" platform: "javascript" request: {url: "Http://localhost:8000/tracker/Regist", headers: {... }} SDK: {name: "sentry.javascript. React ", version: "6.2.2", integrations: Array(0), Packages: Array(1)} timestamp: 1616124546.59Copy the code

Manual integration

You need to install Sentry-CLI to customize more content. The following two methods can be used, one manually and one automatically, but you must install Sentry-CLI. Installing Sentry-CLI on Windows is not easy. For details, see my stomping record “Solving the Problem of Windows Sentry-CLI Installation Failure”.

The first: makefile

The whole process and the variables in the following configuration files are configured according to the sentry official best practices. The makefile file is as follows:

export SENTRY_AUTH_TOKEN=xxxxxxxxxxxxxx
SENTRY_ORG=mytaccn
SENTRY_PROJECT=mytaccn

REACT_APP_RELEASE_VERSION=$(shell sentry-cli releases propose-version)

setup_release: create_release upload_sourcemaps
create_release:
	sentry-cli releases -o $(SENTRY_ORG) new -p $(SENTRY_PROJECT) $(REACT_APP_RELEASE_VERSION)
upload_sourcemaps:
	sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) files $(REACT_APP_RELEASE_VERSION) \
        upload-sourcemaps ./dist/umi.js.map
Copy the code

Execute the command

make
Copy the code

The upload is complete! Documentation on uploading source-map

Some configuration

The release version number needs to be written to the project, and a new line is added to the Makefile to execute the script to set the environment variables

set_env:
	yarn cross-env REACT_APP_RELEASE_VERSION=$(REACT_APP_RELEASE_VERSION) && yarn start
Copy the code

Add the environment variable to the entry configuration file of the project. Umi is used as an example

import { defineConfig } from "umi";

export default defineConfig({
    / /...
    define: {
        REACT_APP_RELEASE_VERSION: process.env.REACT_APP_RELEASE_VERSION,
    },
});
Copy the code

Simply reference the variable in the sentry configuration.

import { Integrations } from "@sentry/tracing";

export default {
    / /...
    release: REACT_APP_RELEASE_VERSION, // Release version
};
Copy the code

Second: WebPack plug-ins

Take the Chrome-Extension project as an example. Because the entire application is isolated by Chrome into background and Inject layers, Sentry must be configured at these two layers separately. However, the configuration is much the same as above, but integrated with the WebPack Plugin.

First, install the dependencies, and configure them in the project’s entry file, as in the previous method, so I won’t go into this again. The main difference is that the source-map upload method is different.

// Add webpack.conf.js to your plugins
new SentryCliPlugin({
            include: path.resolve(
                __dirname,
                ".. /build/js/app.bundle.js.map"
            ),
            release: `${process.env.npm_package_version}`.configFile: path.resolve(__dirname, ".. /.sentryclirc"),
            // enviroment: process.env.NODE_ENV,
            // autoSessionTracking: process.env.NODE_ENV === "production",
        }),
Copy the code

Continuous Integration configuration

Because my repository is Github, I will use Travis as an example: the document sets the environment variable and configure.travis.yml

jobs:
    include:
        #...
        - name: Create release and notify Sentry of deploy
          env: SENTRY_ORG=mytaccn SENTRY_PROJECT=mytaccn SENTRY_ENVIRONMENT=production
          script: | curl -sL https://sentry.io/get-cli/ | bash export SENTRY_RELEASE=$(sentry-cli releases propose-version) sentry-cli releases new -p $SENTRY_PROJECT $SENTRY_RELEASE sentry-cli releases set-commits $SENTRY_RELEASE --auto yarn build sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps ./dist/umi.js.map sentry-cli releases finalize $SENTRY_RELEASE sentry-cli releases deploys $SENTRY_RELEASE new -e $SENTRY_ENVIRONMENTCopy the code