The original address: segmentfault.com/a/119000001…

Front-end error classification: JS runtime error, resource loading error, interface error

Js runtime error

Js runtime errors are typically caught using window.onError, but there is a special case where a promise is rejected and the error message has not been processed

  1. Common JS runtime errors
  • Catch with window.onerror and window.addeventListener (‘error’).
        window.onerror = function(msg, url, lineNo, columnNo, error){
            // Handle error information
            console.log(msg, url, lineNo, columnNo, error)
        }
        
         window.addEventListener('error'.function(event){
            console.log('addEventLister error：' , event)
        }, true)
        // True means called in capture phase, false means captured in bubble phase. Use either true or false
        const a = 1
        
        const a = 1
        a = 2
        console.log(a)
Copy the code

Output result:

  1. Uncaught (in promise)
  • When a promise is rejected and the error message is not processed, an unhandledrejection will be thrown, and this error will not be caught by window.error and window.addeventListener (‘error’). A special window.addeventListener (‘unhandledrejection’) capture is required
window.addEventListener('unhandledrejection'.function(event){
            console.log("_________________________________________________")
            console.log( event)
        })

        new Promise((resolve, reject) = > {
           throw new Error('123')
           resolve()
        })

        new Promise((resolve, reject) = > {
            reject('321')})new Promise((resolve, reject) = > {
            reject('456')
        }).then((value) = >{},(reason) = > {
            console.log(reason)
        })
Copy the code

Result output:

  1. console.error
  • In some special cases, you may also need to catch handling console.error by overwriting window.console.error
       var consoleError = window.console.error
        window.console.error = function(){
            console.log(JSON.stringify(arguments));
            consoleError && consoleError.apply(window.arguments)}console.error('11111')
Copy the code

Result output:

  1. Special description of cross-domain logging
  • What is cross-domain script Error?

When a syntax error occurs in a script that loads a different domain, to avoid message leakage, the details of the syntax error are not reported and are replaced with a simple “script error”. In some browsers, pass

  1. SourceMap in particular
  2. other
  • Sentry encapsulates all callback functions in a try catch
  • Vue errorHandler also uses try catch to encapsulate nextTick, $emit, watch, data, etc

Resource loading error

Using window.addeventListener (‘error’), window.onerror does not catch resource loading errors. Window.addeventlistener (‘error’) is an error that can be caught via target? .src || target? .href distinguishes between resource loading errors and JS execution errors.

Interface error

All HTTP requests are wrapped based on xmlHttpRequest or FETCH. So to catch global interface errors, the method encapsulates xmlHttpRequest or FETCH in time