神刀安全网

Capturing Errors With window.onerror

JavaScript offers some neat ways we can create and deal with errors. First of all we will look at the Error constructor itself to find out how we can utilise it effectively.

Error Constructor

The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base object for user-defined exceptions. – MDN

The Error constructor takes 3 parameters:

    new Error(message, file_name, line_number);

The file name and line number parameters are not standard across all browsers!

Wait isnt Error a constructor? Yes. Which means we can create our own Error objects to throw.

Lets standardize the file name and line parameters by creating our own Error object.

    function CustomError(message, file_name, line_number) {         this.name = "CustomError"; // type of error         this.message = `${message} Source: ${file_name} @ ${line_number}`;         // error message         this.stack = (new Error()).stack; // stack trace     }      // Inherit prototype object     CustomError.prototype = Object.create(Error.prototype);     // set constructor     CustomError.prototype.constructor = CustomError;     

Then we can use it to throw our own Errors that log out the filename and line_number.

    try {         throw new CustomError('Something is wrong', 'app.js', 42);     } catch(e) {         console.log(e.name); // CustomError         console.log(e.message);         // ^^ Something is wrong Source: app.js @ 42         console.log(e.stack); // Browser error trace      }

Dealing With Errors

As you probably know dealing with errors is simple right? just use a try and catch block around code you think will throw an error.

What if you want to run a piece a code everytime there is an error in your code? Wrap the whole of your code in a try and catch block? God no!

Introducing window.onerror

Thats right window has an event to deal with errors! It is supported in Chrome, Firefox and latest versions of IE.

Example:

    window.onerror = function(err, source, line) {         console.log(err, source, line) // .. app.js 42     };

What is strange about this piece of code is you cant just stick it in the console and then create an error and expect it to run. Cause it wont. window.onerror has to be embeded in the page before your script runs.

So what can we do with the onerror event?

AJAX! Yeah you now have a way to send errors off to external apps. Now its super easy to create applications that log errors from sites.

If you use jQuery don’t stress that $(window).on("error") doesnt yield the same parameters! We can add our own super cool syntax 😀

         (function($){                  $.onError = function(cb) {             window.onerror = function(err, file, line) {                 return cb(err, file, lin);             };         };      })(jQuery);       jQuery.onError((err)=> console.log(err));

There you go now your proficient in dealing with errors. If you learnt something don’t forget to tweet and share so others can make cool Errors to 😀

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Capturing Errors With window.onerror

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址