By Olivier Girardot


2011-03-16 16:09:15 8 Comments

I wondered if anyone had experience in handling JavaScript errors globally and send them from the client browser to a server.

I think my point is quite clear, I want to know every exception, error, compilation error, etc. that happens on the client side and send them to the server to report them.

I’m mainly using MooTools and head.js (for the JS side) and Django for the server side.

7 comments

@lillesand 2012-11-08 11:45:34

You might wanna check out this new service, http://rescuejs.com/. https://bugsnag.com/

Lets you log all your javascript errors without writing server side code yourself. It also tracks browser versions and so on.

I'm not sure I would consider them 100% "enterprise ready", but it's definitely worth checking out.

@Day 2013-09-21 17:20:47

It's been shut down. If you try to sign up now you get the message "Thank you for your interest, unfortunately Rescue.js is no longer being actively worked on."

@sam ruben 2019-04-26 06:54:39

Don't try to use third party services instead try for your own.

The Error Handlers can catch the below scenarios,

  1. Uncaught TypeError can't be captured
  2. Uncaught ReferenceError can't be captured eg: var.click()
  3. TypeError can be captured
  4. Syntax error can be captured
  5. ReferenceError can be captured

To Catch Javascript Errors:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

To Capture AngularJS Errors:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})

@Martin Omander 2018-06-14 10:16:59

If your website is using Google Analytics, you can do what I do:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

A few comments on the code above:

  • For modern browsers, the full stack trace is logged.
  • For older browsers that don't capture the stack trace, the error message is logged instead. (Mostly earlier iOS version in my experience).
  • The user's browser version is also logged, so you can see which OS/browser versions are throwing which errors. That simplifies bug prioritization and testing.
  • This code works if you use Google Analytics with "analytics.js", like this. If you are using "gtag.js" instead, like this, you need to tweak the last line of the function. See here for details.

Once the code is in place, this is how you view your users' Javascript errors:

  1. In Google Analytics, click the Behavior section and then the Top Events report.
  2. You will get a list of Event Categories. Click window.onerror in the list.
  3. You will see a list of Javascript stack traces and error messages. Add a column to the report for your users' OS/browser versions by clicking the Secondary dimension button and entering Event Label in the textbox that appears.
  4. The report will look like the screenshot below.
  5. To translate the OS/browser strings to more human-readable descriptions, I copy-paste them into https://developers.whatismybrowser.com/useragents/parse/

enter image description here

@Nick Steele 2018-08-29 16:19:37

This doesn't trap all errors, just try-catch blocks, although it's a cool thing to explain and I don't think you deserve downvotes.

@Martin Omander 2018-09-09 20:42:10

Thank you, Nick! I updated my answer with battle-tested code that works well on my website and that captures all errors, not just the ones you trap with try...catch.

@Tarek 2013-03-22 17:56:45

I recently tested Sentry on production and it works fine (JS and other languages like PHP)

1- It's open source (You can install it on your own server) 2- You can use the free plan (100 reports / day)

Or install it on your server: github.com/getsentry

@christianvuerings 2013-04-08 05:14:23

Note that they have an unlimited free plan for Educational institutions

@David Cumps 2013-09-30 07:21:40

Doesn't seem to be open source anymore, all options are paid?

@Tarek 2013-10-23 16:30:48

@DavidCumps They still offer the free service (Trial), But you only get 7 days of bugs history or you can install it on ur own server since its open source (github.com/getsentry)

@Adrian Gunawan 2014-09-11 02:34:26

Google Tag Manager has a Javascript Error Listener, maybe worth checking out, especially if you are already using GA

@Todd Gardner 2016-07-14 21:13:25

You should also checkout TrackJS for this. It's a paid service, but it provides a ton of context about how the user got into the error situation for debugging. I am on of the developers and have fixed tons of bugs with it :)

@Fizer Khan 2015-07-17 15:23:47

You can try Atatus - It is a new JavaScript Error Tracking Service along with Real User Monitoring (RUM) for modern web apps.

We don’t just capture the errors, but also the user events that triggered the error. This gives you steps to reproduce the error at your end.

Alongside error capturing, we also capture the page load time and showing it across different perspectives - Geo, Browser, Page Drill Down, Page Histogram, Ajax Monitoring and Transaction Monitoring.

https://www.atatus.com/

Docs available: https://www.atatus.com/docs

Disclaimer: I am a web developer at Atatus.

@vmachacek 2017-11-24 02:42:28

I integrated Ataus, and than I tried something like foo.bar = '' which caused exception. But I can't see anything in Atatus dashboard.

@Fizer Khan 2017-11-28 07:55:33

Could you please drop us an email?

@Will 2018-04-23 17:30:08

Shameless plug. The ads should be limited to the right hand side.

@Ivan Kurmanov 2013-12-04 09:54:21

Also, the http://jslogger.com service can help with that:

Log Javascript errors and events in the cloud

from http://jslogger.com/features :

From now on you can spy on all the errors that break your site's user experience. Every Javascript error will be caught and brought to you for later debuging.

DISCLAIMER: not affiliated with the service/company.

@Mike Lewis 2011-03-16 16:13:55

I'd check out window.onerror

Example:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Keep in mind that returning true will prevent the firing of the default handler, and returning false will let the default handler run.

@Olivier Girardot 2011-03-16 16:21:56

Will this function be called in the main html page, if there is issue when loading other js files ?

@Mike Lewis 2011-03-16 17:12:58

You would want to assign window.onerror preferably before anything else gets run. So wherever you want to put it, just make sure it runs before any of your other js code/files.

@Adam Naylor 2012-10-08 14:05:36

Note, Mozilla recommends: 'Note that some/many error events do not trigger window.onerror, you have to listen for them specifically.'

@Daniel Mendel 2012-12-17 21:24:24

Yeah, I love how it says some/many, very descriptive -- thanks Mozilla.

@roland 2015-08-21 15:26:45

Mozilla exposes GlobalEventHandlers.onerror: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers‌​/…

@Martin Brown 2017-06-05 12:02:13

What happens if the code that handles window.onerror itself throws an error. Is there a possibility of an infinite loop?

@kumaresan_sd 2018-05-29 04:44:07

hi @Mike Lewis, i want capture all error and i need store those in one variable, how can i do?, any suggestion?

Related Questions

Sponsored Content

82 Answered Questions

[SOLVED] Get all unique values in a JavaScript array (remove duplicates)

28 Answered Questions

[SOLVED] Remove all child elements of a DOM node in JavaScript

  • 2010-10-17 20:51:00
  • Polaris878
  • 766627 View
  • 786 Score
  • 28 Answer
  • Tags:   javascript dom

19 Answered Questions

[SOLVED] Frame Buster Buster ... buster code needed

14 Answered Questions

[SOLVED] Convert JavaScript String to be all lower case?

  • 2008-09-30 20:22:35
  • Derek
  • 429177 View
  • 1260 Score
  • 14 Answer
  • Tags:   javascript string

13 Answered Questions

[SOLVED] How to remove all CSS classes using jQuery/JavaScript?

  • 2009-09-15 03:34:21
  • Click Upvote
  • 522765 View
  • 757 Score
  • 13 Answer
  • Tags:   javascript jquery dom

1 Answered Questions

1 Answered Questions

[SOLVED] Is there a global approach to catch network errors in javascript

2 Answered Questions

Sponsored Content