I. Significance: JavaScript error seriously affects business logic, for example, after clicking JS error users will not be able to operate, users will feel stuck, rendering JS error will lead to the page abnormalities seen by users, so js error consequences are also very serious. It is also necessary to monitor JavaScript errors in order to cope with various anomalies in the user’s online environment

First of all, all errors need to be received by window. onError, because this method can parse out error messages, error files, rows, columns, and error stacks, which are important for restoring source code through Sourcemap later. Catch JS event queue errors with window.onerror

window.onerror = function (msg: string, file: string, line: number, column: number, err: Error) {
    const stack = getStackMsg(err);
    reportError({msg, file, line, column, stack});
    return false;
};
Copy the code

2, through the window. Onunhandledrejection capture Promise uncaught error, and sell them

window.onunhandledrejection = function(event: PromiseRejectionEvent) { if (event.reason instanceof Error) { throw event.reason; }};Copy the code

ErrorHandler is used to catch Vue project errors and throw them

Vue.config.errorHandler = function (err: ErrorEvent) {
    setTimeout(() => {
        throw err;
    });
}
Copy the code

Path: string // page URL 2. MSG: string // error message 3. File: string // error file 4. 5, column: number // stack? : undefined | the string / / error stack The file, the row, column reduction according to the error source code

Access front-end monitoring more quickly and accurately