1. Front-end error exceptions are classified according to capture methods:

  • Script errors

Script errors can be classified as compile-time errors and runtime errors

The capture methods are as follows:

1. Try… The catch…

Single point capture, can get the error information and file name, line number, column number and other information,

Disadvantages: Can only catch exceptions in synchronized code, catching errors is intrusive

2.window.error

Global capture, you can get the error information and file name, line number, column number and other information

Disadvantages: Catch only immediate runtime errors, not resource loading errors

  • Resource loading error

Resource loading errors include: img, script, link, audio, video, iframe…

Capture method:

1. Windows. AddEventListner (” error “)

Global capture, which can capture all resource load failure, but the error information is incomplete

2.object.onerror

Single point capture, img tags, script tags, and so on can add onError events to catch resource loading errors

  • Promise error

1. The window. The addEventListener (‘ unhandlerejection)

Fired when a Promise is rejected and no reject is done

2. The window. The addEventListener (‘ rejectionhandled)

Fired when a Promise is rejected and processed with reject

2.Sentry error monitoring

Error monitoring is mainly implemented by the integration of New TryCatch() and New GlobalHandlers()

  • new TryCatch()

Packaging the setTimeout and setInterval, requestAnimationFrame addEventListener/removeEventListener, XMLHttpRequest the send method, to handle the try… catch… An asynchronous exception that cannot be handled in.

Part of the source code is as follows:

  • new GlobalHandlers()

Through the window. The window and onerror. Onunhandledrejection global capture an uncaught exception and unprocessed Promise

Part of the source code is as follows:

3. Collect Breadcrumbs

Sentry /tracing implements a simple queue (with a maximum entry length (100 by default). This queue records these messages at any time. Once an error occurs, it needs to be reported. The @sentry/tracing will upload the queue’s message content as breadcrumbs.

A wrapper native API for gathering information:

{ console: boolean; Dom: Boolean; // UI click and press dom events fetch: Boolean; // fetch request history: Boolean; // Historical error message XHR: Boolean; // XHR request}Copy the code

Modifiable Breadcrumbs configuration, in addition to the native API wrapped above, can be modified:

{ beacon: boolean; // Custom breadcrumb information sentry: Boolean; // Whether to send to server}Copy the code

How to modify Breadcrumbs configuration:

Sentry.init({ dsn: 'https://<key>@sentry.io/<project>', integrations: Integrations => {// Turn off the automatic collection console for Breadcrumbs new Sentry.Integrations.Breadcrumbs({ console: false })]; }});Copy the code

Remove Breadcrumbs integration:

Sentry.init({ dsn: 'https://<key>@sentry.io/<project>', integrations: Integrations => {// Remove Breadcrumbs and integrate return integrations. Filter (Integration => integration.name! == 'Breadcrumbs'); }});Copy the code