Front end exception capture

stay ES3 Before js During the execution of the code , Once something goes wrong , Whole js The code will stop executing , In this way, the code is not very robust . from ES3 Start ,js A similar exception handling mechanism is also provided , So that js The code becomes more robust , An exception occurred during the execution of the program , It can also make the program have part of the ability of exception recovery .js The characteristics of anomalies are , It doesn't lead to JS The engine crashed , At most, only the currently executed task will be terminated .

Return to the right topic , How can we catch and deal with the program exception ？ stay Javascript in , We usually have the following two exception capture mechanisms .

Basic try…catch sentence

 function errFunc() { // eslint-disable-next-line no-undef error; } function catchError() { try { this.errFunc(); } catch (error) { console.log(error); } } catchError() 

Anomalies that can be caught , The thread execution must have entered try catch but try catch It's thrown out before it's finished , Here are all the things that can't be captured .

1. An exception thrown by an asynchronous task （ Execution time try catch It's over from execution ）
2. promise（ Exception caught inside , No exception is thrown up , Use catch Handle ）
3. Grammar mistakes （ Before the code runs , Errors detected at compile time ）

• advantage ： It can catch the exception better , Not to make the page hang up due to a mistake
• shortcoming ： It seems too bloated , Most of the code uses try ... catch The parcel , Affect code readability .

Global exception monitoring window.onerror

window.onerror The biggest benefit is the synchronization task 、 Asynchronous tasks can be captured , You can get specific exception information 、 Exception file URL、 Exception row and column numbers and exception stack information , After catching the exception again , Report to our log server , And it can monitor the whole world , The code also looks a lot simpler .

• shortcoming ：

1. This method has certain browser compatibility
2. Cross domain scripting does not capture exceptions accurately , After cross domain window.onerror The correct exception information could not be captured , It's a unified return to one Script error, May pass through <script> Use crossorigin Attributes to circumvent this problem

window.addEventListener('error', function() { console.log(error); // ... // Abnormal report });throw new Error(' This is a mistake '); 

Promise Internal abnormal

As mentioned earlier ,onerror as well as try-catch Can't capture Promise Exception thrown by instance , Only in the end catch Function , But it's easy to get confused if you write too much code , Forget to write catch.

If your application uses a lot of Promise For example , Especially in some areas based on promise For example axios Be careful when you wait , Because you don't know when these asynchronous requests will throw an exception and you don't handle it , So it's better to add one Promise Global exception capture events unhandledrejection.

window.addEventListener("unhandledrejection", e => { console.log('unhandledrejection',e)}); 

vue Engineering anomalies

window.onerror It doesn't capture .vue The acquisition of file occurrence ,Vue 2.2.0 The above version added a errorHandle, Use Vue.config.errorHandler In this way Vue Global configuration , Can be in Vue Specifies the handler that does not catch errors during rendering and observation of the component . When this handler is called , Error information and Vue example .

//main.jsimport { createApp } from "vue";import App from "./App.vue";let app = createApp(App);app.config.errorHandler = function(e) { console.log(e); // Error reporting ...};app.mount("#app");