introduce

Front-end application [stability] is not guaranteed — testing will never be 100% covered, and users will not always behave as we expect, so we need to proactively collect and report system anomalies to develop solutions. When a bug occurs in the production environment, how to quickly report to the police, find the cause of the problem, and verify the fix online? We need an efficient error monitoring system.

Set up

The environment

  • The Docker 19.03.6 +

  • Compose 1.24.1 +

        # docker-compose

    # 1. The installation
    sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

    # 2. Execute permissions on binary files
    sudo chmod +x /usr/local/bin/docker-compose

    If you have problems with this step, you can create the /usr/bin path to establish the link
    sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

    # 3. Check the version
    docker-compose --version
Copy the code

  • Minimum memory 2GB RAM

To prepare

  • Warehouse to download

    • Github.com/getsentry/o…

  • SMTP Mail Service

    • The following uses QQ email as an example (Settings – Account) to enable the SMTP service. After enabling the SMTP service, save the key

      Click “What is IMAP and how is it set up?” View detailed Settings

The installation

    ./install.sh
Copy the code

Create a user

Create an administrator account as prompted

Start the service

    # building
    docker-compose build

    # start service
    docker-compose up -d
    
Copy the code

Initialization Settings

  • Initialization information

  • Configuration file (not filled in during initialization or modified later)

Entrance to the file

import Vue from 'vue'
import * as Sentry from "@sentry/vue";

import pkg from '.. /package.json'

Vue.config.devtools = true
Vue.config.productionTip = false

console.log(`release: `.`${pkg.name}@${pkg.version}`);

Vue.prototype.$sentry = Sentry

Sentry.init({
  Vue,

  dsn: process.env.VUE_APP_SENTRY_DSN,

  release: `${pkg.name}@${pkg.version}`.environment: process.env.NODE_ENV,
  // is optional and is true if it is not provided. If you set it to false, Sentry will suppress sending all Vue components' props for logging.
  attachProps: true.//is optional and is false if it is not provided. If you set it to true, Sentry will call Vue's original logError function as well.
  logErrors: false.// Turn debug on or off. If debugging is enabled, the SDK will try to print out useful debugging information when sending events fails. The default is always false. It is generally not recommended to turn this on in production debug, although opening mode does not raise any security concerns.
  debug: process.env.NODE_ENV === 'development'.// autoSessionTracking: true,
  // integrations: [
  // new Integrations.BrowserTracing(),
  // // new Integrations.Vue({Vue, attachProps: true, logErrors: false}),
  / /,
  // tracingOptions: {
  // trackComponents: true,
  // },
  // // We recommend adjusting this value in production, or using tracesSampler
  // // for finer control
  / / tracesSampleRate: 1.0.
});

Copy the code

SourceMap

The env file

VUE_APP_SENTRY_HOST = = http://192.168.50.12:9000/ VUE_APP_SENTRY_ORG example_org VUE_APP_SENTRY_AUTH_TOKEN=c00606xxxxxxxx97bea62c2f VUE_APP_SENTRY_DSN = http://[email protected]:9000/3Copy the code

vue.config.js


if(process.env.NODE_ENV === 'production'){
  plugins.push(
    new SentryWebpackPlugin({
      // sentry-cli configuration
      authToken: process.env.VUE_APP_SENTRY_AUTH_TOKEN,
      url:process.env.VUE_APP_SENTRY_HOST,
      org: process.env.VUE_APP_SENTRY_ORG,
      project: require('./package.json').name,
      release: require('./package.json').version,

      // webpack specific configuration
      include: "./dist".ignore: ["node_modules"."vue.config.js"]})); }Copy the code

Q&A

  • DSN is empty

  • The client carries user data

    Docs. Sentry. IO/platforms/j…

        Sentry.setUser({ email: "[email protected]" });
Copy the code

  • Third-party SDK Monitoring

        <! -- Add crossorigin="anonymous" to script tag
Copy the code

    By default (crossOrigin is not specified), CORS is not used. In the non-same-origin case, setting the Anonymous key will not exchange user credentials through cookies, client SSL certificates, or HTTP authentication. When the manifest of the user credential needs to be obtained, the attribute value must be set to use-credentials even in the case of same-origin.

    Simply put, if your page and the JavaScript files referenced in the page are from different sources (protocol, domain name, port), then the errors thrown by these scripts are cross-domain errors — the addition of the crossorigin=”anonymous” attribute ensures that the full information of the cross-domain error is captured. But the Crossorigin attribute needs to be supported by both the server and the browser. Access-control-allow-origin: * : access-Control-allow-origin: * : access-Control-allow-origin: *

    Based on the above problems, there are two solutions:

    • Put all cross-domain resources on the page in the same domain as the page

    • Errors can be captured as much as possible through Patch native method, for example, Patch native setTimeout:

      const prevSetTimeout = window.setTimeout;
window.setTimeout = function(callback, timeout) {
    const self = this;
    return prevSetTimeout(function() {
        try {
            callback.call(this);
        } catch (e) {
            // A detailed error was caught, where the logic for log reporting is handled
            // ...
            throw e;
        }
    }, timeout);
} 
// However, Patch native method has many uncertainties, so it is recommended to adopt it according to specific scenarios
Copy the code

  • Take the initiative to report

    Js can pass an Error instance tocaptureException()Active capture in the form of an event – this approach may throw an error string that cannot be logged and traceable.

    // captureException
    try {
       aFunctionThatMightFail();
    } catch (err) {
        Sentry.captureException(err);
    }
Copy the code

    Another common way to capture is to send toSentryPlain text messages – they can be useful for some teams.

        // captureMessage
    Sentry.captureMessage("Something went wrong");
Copy the code