Writing in the front

Integrating front-end monitoring in APM can be divided into the following steps:

  1. Initialize the APM and establish a connection with the APM Server.
  2. Upload Sourcemap to APM Server to track errors thrown by code
  3. Use gitLab control to upload only at release time
  4. Remove the Sourcemap file to prevent deployment online with the source code

Initialize APM dependencies (implement monitoring)

import { init as initApm } from '@elastic/apm-rum'
const apm = initApm({

  // The project name on the APM server
  serviceName: ' './ / apm server address, pay attention to the ending don't hand accidentally order diagonal "/", such as: https://apm.myApmServer.com/
  serverUrl: 'https://apm.myApmServer.com'.// The version of the APM service, which is mandatory if you want error messages to be tracked down to the line level, must be the same as the version of the source map uploaded.
  serviceVersion: ' '.// Generally take the version in package.json directly

  // Set the service environment
  environment: ' ' // Environment variables that can be used to filter the specified environment in the Kibana platform
})
Copy the code

After the project is started, logs are sent to the APM server via Ajax.

The corresponding project can be seen in kibana’s APM console

Configure webpack to upload source map files (error tracking)

source map

JavaScripte Source Map: JavaScripte Source Map: JavaScripte Source Map

The file that ends in.map is the source map file, which corresponds to the source file running in the browser

upload

The two methods

  1. Apply source maps to error stack traces
  2. Use third-party dependencies, useelastic-apm-sourcemap-webpack-pluginPlugin to uploadsource mapfile

Only the second method is described below

Create a Production environment webPack configuration file


// webpack.config.prod.js
const serviceVersion = require('./package.json').version
const ElasticAPMSourceMapPlugin = require('elastic-apm-sourcemap-webpack-plugin').default

module.export = {
    mode:'production'.devtool: 'source-map'./ / configuration devtool
    plugins: [
        new webpack.DefinePlugin({'serviceVersion': serviceVersion}),
        new ElasticAPMSourceMapPlugin({
          serviceName: 'SERVICE_NAME'.serviceVersion: 'SERVICE_VERSION'.// Use the package.json version number
          // The location on the APM server where sourcemAP resources are stored
          serverURL: 'http://apm.youApmServer.com/assets/v1/sourcemaps'.// / Assets /v1/sourcemaps paths are fixed
          publicPath: PUBLIC_PATH, // Your project domain name
          logLevel: 'debug'}})]Copy the code

Configuring YAML to control when source-Map is uploaded (optimization)

The default mode of Webpack for packaging is Production, which causes each package to be packaged in Sourcemap mode and uploaded to APM Server. It is not always necessary to upload Sourcemap for packaging, only when the project is released.

If a project uses CI/CD to automate the build of the project, yamL files will be used to control the process. The basic process usually includes test -> build -> deploy.

Using Gitlab CI as an example, here is a.gitlab-ci.yml configuration

//.gitlab-ci.yml
stages:
  - build
  - deploy

build-latest:
  stage: build
  artifacts:
    paths:
      - dist/
  script:
    - yarn install
    - yarn build:dev
  except:
    - tags

build-tag:
  stage: build
  artifacts:
    paths:
      - dist/
  script:
    - yarn install
    - yarn build:prod
  only:
      - tags
Copy the code

When packaged Git branches are tagged as tags (for example, with release 1.0.1), they go build-tag, and the rest go build-lateset, thus implementing different commands for each release. This logic is controlled mainly by expect and only.

When running yarn Build :prod and yarn Build :dev, use different webpack configuration files. Configure the following commands in the scripts property of package.json:

// package.json
{
    "scripts": {"build:dev": "cross-env NODE_ENV=dev webpack --config webpack.config.dev.js"."build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",}}Copy the code

Delete the sourcemap file

There are security and information leakage issues if you deploy Sourcemap online with source files.

You can use the delete-source-maps-webpack-plugin to delete all sourcemap files generated after packaging

// webpack.config.prod.js
const serviceVersion = require('./package.json').version
const ElasticAPMSourceMapPlugin = require('elastic-apm-sourcemap-webpack-plugin').default
const DeleteSourceMapsWebpackPlugin = require('delete-source-maps-webpack-plugin').default

module.export = {
    mode:'production'.devtool: 'source-map'./ / configuration devtool
    plugins: [
        new DeleteSourceMapsWebpackPlugin(),
        new webpack.DefinePlugin({'serviceVersion': serviceVersion}),
        new ElasticAPMSourceMapPlugin({
          serviceName: 'SERVICE_NAME'.serviceVersion: 'SERVICE_VERSION'.// Use the package.json version number
          // The location on the APM server where sourcemAP resources are stored
          serverURL: 'http://apm.youApmServer.com/assets/v1/sourcemaps'.// / Assets /v1/sourcemaps paths are fixed
          publicPath: PUBLIC_PATH, // Your project domain name
          logLevel: 'debug'}})]Copy the code

Further reading

Official tutorial

The official instance

Distributed tracing, open tracing, and Elastic APM