Front-end Exception Reporting

The above are some factors that are easy to think of. In actual situations, other influencing factors may appear according to different monitoring needs.

The frequency of reporting can be manually controlled for different exceptions and purposes. Generally, it can be divided into three categories: instant reporting, batch reporting and user active reporting.

Real-time reporting

Instant reporting means that exceptions are triggered and reported immediately. Such exceptions seriously affect users.

When a large number of exceptions are triggered consecutively or in an infinite loop, reported requests also need to be managed. Here is one way to manage @sentry/utils version 5.8.0:

import { SentryError } from './error';
import { SyncPromise } from './syncpromise';
/** A simple queue that holds promises. */
export class PromiseBuffer {
    constructor(_limit) {
        this._limit = _limit;
        /** Internal set of queued Promises */
        this._buffer = [];
    }
    /** * Says if the buffer is ready to take more requests */
    isReady() {
        return this._limit === undefined || this.length() < this._limit;
    }
    /**
     * Add a promise to the queue.
     *
     * @param task Can be any PromiseLike<T>
     * @returns The original promise.
     */
    add(task) {
        if (!this.isReady()) {
            return SyncPromise.reject(new SentryError('Not adding Promise due to buffer limit reached.'));
        }
        if (this._buffer.indexOf(task) === -1) {
            this._buffer.push(task);
        }
        task
            .then(() = > this.remove(task))
            .then(null.() = > this.remove(task).then(null.() = > {
            // We have to add this catch here otherwise we have an unhandledPromiseRejection
            // because it's a new Promise chain.
        }));
        return task;
    }
    /**
     * Remove a promise to the queue.
     *
     * @param task Can be any PromiseLike<T>
     * @returns Removed promise.
     */
    remove(task) {
        const removedTask = this._buffer.splice(this._buffer.indexOf(task), 1) [0];
        return removedTask;
    }
    /** * This function returns the number of unresolved promises in the queue. */
    length() {
        return this._buffer.length;
    }
    /**
     * This will drain the whole queue, returns true if queue is empty or drained.
     * If timeout is provided and the queue takes longer to drain, the promise still resolves but with false.
     *
     * @param timeout Number in ms to wait until it resolves with false.
     */
    drain(timeout) {
        return new SyncPromise(resolve= > {
            const capturedSetTimeout = setTimeout(() = > {
                if (timeout && timeout > 0) {
                    resolve(false);
                }
            }, timeout);
            SyncPromise.all(this._buffer)
                .then(() = > {
                clearTimeout(capturedSetTimeout);
                resolve(true);
            })
                .then(null.() = > {
                resolve(true); }); }); }}Copy the code

Main ideas:

• When initialized, an array is supplied_bufferAnd threshold_limit 。
• All requests will be made similarlyPromiseMechanism package through methodaddPut it in an array. Requests are asynchronous, and new requests can be continuously added based on an event loop.
• When the number of added requests exceeds_limit, will not continue to add, so that you can achieve a certain control effect.

The batch report

The collected information is stored locally first. When the data amount or interval reaches a certain threshold, the local information is packaged and uploaded at a time. Tracking the user’s path is a good way to do this.

User active reporting

Provide a portal for reporting exceptions, so that users can report their problems.

If you consider the privacy policy, when you enter the system, you need to be informed that some information will be collected.