Several ways to catch front-end exceptions

1 use window. OnError

The global onError function can collect error information on the page, but some browsers do not support this method

window.onerror = function(message, source, lineno, colno, error) { ... Lineno: 'error line number' colno: 'error column number' error: 'error object'Copy the code

2 try catch

The try catch method requires a try catch for all functions. This method can catch exceptions in one step, but it uses try/catch to affect performance.

The API provided by Uglify to operate AST(Abstract syntax tree) can be used to preprocess the source file and automatically add try catch to each function

The following is a snippet of code from the web that uses try catch to handle exceptions

var fs = require('fs'); var _ = require('lodash'); var UglifyJS = require('uglify-js'); var isASTFunctionNode = function (node) { return node instanceof UglifyJS.AST_Defun || node instanceof UglifyJS.AST_Function; } var globalFuncTryCatch = function (inputCode, errorHandler) { if(! _.isFunction(errorHandler)){ throw 'errorHandler should be a valid function'; } var errorHandlerSource = errorHandler.toString(); var errorHandlerAST = UglifyJS.parse('(' + errorHandlerSource + ')(error); '); var tryCatchAST = UglifyJS.parse('try{}catch(error){}'); var inputAST = UglifyJS.parse(inputCode); var topFuncScope = []; Trycatchast.body [0].bcat.body [0] = errorHandlerAST; trycatchast.body [0] = errorHandlerAST; Var walker = new uglifyjs. TreeWalker(function (node) {if (isASTFunctionNode(node)) {topfuncscope.push (node); }}); inputAST.walk(walker); Var Transfer = new uglifyjs. TreeTransformer(null, function (node) { if (isASTFunctionNode(node) && _.includes(topFuncScope, Var stream = uglifyjs.outputStream (); var stream = uglifyjs.outputStream (); for (var i = 0; i < node.body.length; i++) { node.body[i].print(stream) } var innerFuncCode = stream.toString(); Trycatchast.body [0].body.splice(0, trycatchast.body [0].body.length); Parse (innerFuncCode, {toplevel: tryCatchAST. Body [0]}); // Get the shell node.body.splice(0, node.body.length); Uglifyjs.parse (innertyrcatchNode.print_to_string (), {toplevel: node}); }}); inputAST.transform(transfer); var outputCode = inputAST.print_to_string({beautify: true}); return outputCode; } module.exports.globalFuncTryCatch = globalFuncTryCatch;Copy the code

3 window.onunhandledrejection

Reject, a Promise, but not triggered by a catch.

window.onunhandledrejection = event => { 
    console.log(event.colreason);
}
Copy the code

4 window.rejectionhandled

The Promise fires when the catch method is invoked to retrieve the exception information.

window.onrejectionhandled = event => {
    console.log(event.reason);
}
Copy the code

5 window.addEventListener

Listening for static resource loading errors

window.addEventListener('error', function(event) {
    var errorTarget = event.target
    return errorTarget
}, true)
Copy the code

6 Interface Monitoring

Listen for all AJAX requests on the page

window.XMLHttpRequest = function () { let XML = new XMLHttpRequest XML.addEventListener("readystatechange", Function (event) {console.log(' request status code changed ')}) xml. addEventListener("error", Function (event) {console.log(' request error ')}) xml. addEventListener("timeout", Function (event) {console.log(' request timeout ')}) xml. addEventListener(" loadStart ", Function (event) {console.log(' request started ')}) xml. addEventListener(" loadEnd ", Function (event) {console.log(' request ended ')}) xml. addEventListener("progress", Function (event) {console.log(' request progress ')}) xml. addEventListener("load", Function (event) {console.log(' request loaded ')}) xml. addEventListener("abort", Function (event) {console.log(' request abort ')}) return XML};Copy the code

7 Precautions

1. Error exception handling scripts must be placed at the top of all code. 2. Script error . Access-Control-Allow-Origin 3. Compiled code requires SourcemapCopy the code

neky-err

Write an abnormal monitoring module, in their own projects with a can also, basic needs can be met.

Making address:

Github.com/suguangwen/…

Things to do now:

JS exception monitoring Resource exception monitoring XHR exception monitoring Mildly configurableCopy the code