Here’s where it all started:

Recently developed features have a tight schedule. Several problems have been reported on the line after the release. It is difficult and troublesome to locate the problems on the line manually.

To deploy a monitoring system in the project, the popular Sentry solution was chosen.

2, Sentry installation related

Sentry is an open source real-time exception collection, tracking, and monitoring system. It supports multi-language projects, is relatively easy to configure, and supports subsequent error grading, performance monitoring and other services, in addition to deployment services, is more front-end developer friendly.

This development is based on docker environment deployment, if you know little about Docker, you can pass the introduction of section three, have a basic impression.

Sentry installation process

1. Preparation

It is recommended to use a Linux server with more than 4U8G (minimum 4g required). Considering the later expansion, a larger environment will be convenient.

You can install VMS on Windows and MAC operating systems to perform this operation.

2. Environment preparation

Sentry’s admin background is developed based on Python Django. This management background is supported by 23 services behind it. Sentry provides docker-compose for one-click deployment;

So we need to preset the Docker and Docker-compose environment on the server. The yum package management tool of centos7 is used to download and install docker.

Matters needing attention

Docker-compose cannot be downloaded directly through curl because github cannot be connected to the domestic server

After the local download, SCP or XFTP can be sent to the server, and THE author installed PY3 and PIp3

Developer.aliyun.com/article/640… add

Stackoverflow.com/questions/6…

3. Start downloading

git clone https://github.com/getsentry/onpremise
Copy the code

Because domestic websites may not be able to access Github, you can download it by yourself this time, and then download it through SCP command, XFTP tool or search a domestic code source (not necessarily the latest).

4, installation,

It is recommended to configure the docker image source before installation, such as the Docker image source of 163. The source of Ali Cloud used before pulling the Debian image network timed out

cd onpremise
./install.sh
Copy the code

The install.sh command starts the installation service

During the process, you will be prompted to register the administrator. You can register the administrator here or later.

Docker-compose run --rm web createUser --superuser docker-compose run --rm web createUser --superuserCopy the code

5. Start the project execution

Start the service in docker-compose

docker-compose up -d
Copy the code

Iii. Project access to Sentry

1. Access platform (9000 port for Sentry)

2. Create projects

3. Access project

The deployment process for VUe2 and VUe3 is provided here

4. After the project is connected, an error is reported

5. Upload source Map

  • Source-map is a file that allows compiled code to map to the original source;
  • Source-map is an information file that stores location information. That is, every position in the transformed code corresponds to the position before the transformation.
  • Usage:

Generate the source – the map

The transformed code ends with a comment

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
Copy the code

6. Upload source-map

Sentry – CLI Manual upload

Install @sentry- CLI on the server

Install -g --unsafe-perm=true -- allow-root@sentry /cli sentry-cli -h // Log in through sentry-cli --url http://127.0.0.1:9000 login // Then enter token, Settings -> Account -> API -> Auth Tokens // then ~/. Sentryclirc file will be created Check whether the project root directory has this configuration before uploading. If not, Then read ~/. Sentryclirc // to upload the sourcemap file to the Sentry server sentry-cli Releases files 0.0.1 upload-sourcemaps --url-prefix '~/' './build'Copy the code

Upload source-Map through webpack plug-in

  • Download the yarn add@sentry /webpack-plugin -d
  • Configure the WebPack plug-in
configureWebpack: config => { // console.log('process.env.NODE_ENV is',process.env.NODE_ENV) if (process.env.NODE_ENV ! == 'development') { config.devtool = 'source-map' config.plugins.push( new SentryCliPlugin({ urlPrefix: '~/', include: './dist', ignore: ['node_modules'], release: 'x.x.x', token: xxx, org:xxx, project:xxx, url:xxx }), ) } },Copy the code
  • Automatically upload scripts. You can automatically upload source-map through Yarn Build

7. View issues

Source-map projects that have been correctly uploaded can see the error location very clearly

Matters needing attention:

During local debugging, use Yarn Dev to debug the source-map function, if the mapping is incorrect. The dist directory needs to be placed under the server, such as the dist directory in the HTTP-server service to use

You can also check the BreadCrumbs function to see what happened before the error was reported

8. Check Performance

Sentry. The init (), new Integrations. BrowserTracing () function is the browser page load and navigation detection as a thing, and capture the request, indicators and errors.

  • TPM: Number of transactions per minute
  • FCP: First content rendering (the point at which the browser first starts rendering the DOM)
  • LCP: Maximum content render, representing the load time of the maximum page element in Viewpoint
  • FID: The user’s first input delay, which measures the time of the user’s first interaction with the site
  • CLS: Cumulative layout offset, data at the beginning of an element and before it disappeared
  • TTFB: first byte time, which measures how long it takes the user’s browser to receive the first byte of the page (to determine whether the slowness is due to a network request or a page loading problem)
  • USER: UV number
  • USER MISERY: USER measure of intolerable response time, calculated by Sentry, threshold can be changed dynamically

4. Advanced usage

1. Identify users

In the upload issues, we can use the setUser method, set to read the local user information. (This information needs to be persisted, otherwise the refresh will disappear)

2. Manual upload errors occur

The Sentry can catch all exceptions manually, but it cannot grade them. The Sentry has some built-in error levels that can be added when we report them manually for later classification

Sentry.captureMessage("Something went wrong"); 
Sentry.captureException(err, {
	level: Sentry.Severity.Warning, 
}); 
Copy the code

3. Error boundaries

Define error boundaries so that components can report errors when they occur

Use the Sentry. ErrorBoundary. Error bounds are added to locate errors on components.

4. Rrweb replay

Install @ sentry/rrweb rrweb

yarn add @sentry/rrweb rrweb import SentryRRWeb from '@sentry/rrweb'; Sentry.init({ Vue, dsn: "xxx", integrations: [ new Integrations.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^//], }), new SentryRRWeb({ checkoutEveryNms: CheckoutEveryNth: 200, // Every 200 event maskAllInputs: False, // record all input as *}),], tracesSampleRate: 1.0, release: 'X.X.X ', logErrors: true});Copy the code

After an error is reported, you can record a screen playback of the error

5. Manually set the alarm

Set alarm rules, when we have some situations, such as issues, performance exceeds the threshold value we set, the alert will be triggered.

We can use reminders and other features to help us find problems in real time.

Appendix: Introduction to Docker

1. Virtualization technology

Virtualization technology abstracts computer physical resources and transforms them into virtual computer resources.

  • Through this technology, you can shield computer hardware differences and quickly adapt to different physical machines. Virtualization technology is to adapt to different platforms by itself, and then abstract out a unified interface to achieve cross-platform operation.
  • You can isolate computer resources and improve the utilization of computer resources.
  • The software can be installed on different virtual machines to avoid problems such as program conflicts.

2. Containerization technology

  • Containerization technology is more advanced virtual machine technology, Java executor, V8 engine is also the embodiment of virtual technology, it will execute the environment and physical machine isolated, so that the code can be free from the constraints of the platform;
  • Containerization is the API provided by the operating system to keep programs from interfering with each other. Because this independent environment is like a container, it is called container technology.

Containerization is an API provided directly by the operating system. The virtual machine is through the program to do a layer of proxy and forwarding, forwarding and processing virtual machine instructions, there will be certain performance problems.

3, docker

One company implemented container engine software with GO to improve service deployment efficiency;

  • Faster and more consistent delivery of services makes CICD easy to implement
  • Cross-platform deployment and dynamic capacity expansion;
  • Isolated applications, more resources;

4, the docker – compose

  • Docker-compose is a tool for managing container combinations;
  • Docker recommends running one software for each container. Many systems need to run more than one software before they can be used. Handling the dependency of each container is complicated, and Docker-compose can provide help.
  • Docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose
  • Docker-compose up -d docker-compose down