16

I have a bit of JavaScript (Jquery Tools' Overlay) which may throw an exception when dropped on a page that uses it incorrectly, and I'm trying to handle it gracefully.

I have a general window.onerror handler to rescue these errors and report them back to the server, however that's not getting triggered.

I also cannot wrap a try/catch around this code, as it's being included as a remote script in HTML.

Any ideas on how you can rescue errors that an external script throws?

UPDATE: Here's the example. I should correct myself, window.onerror does get triggered, however the script does not continue running (in the example, the alert never alerts).

<html>
<script type="text/javascript">
window.onerror = function(e){ console.log("caught error: "+e); return true;}
</script>
<body>

<!-- this is the line in the dom that causes the script to throw -->
<a rel="nofollow"></a>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.1");</script>
<script src="http://cdn.jquerytools.org/1.2.5/tiny/jquery.tools.min.js"></script>

<script type="text/javascript">
//this code will throw an error in jquery tools
$("a[rel]").overlay();

alert("it's ok, I still ran.");
</script>

</body>

</html>
Tom Lianza
  • 4,012
  • 4
  • 41
  • 50

2 Answers2

15

Define the error handler before any other script is loaded/executed.

<script>window.onerror = function(e){alert(e);}</script>
<script src="external.js"></script>
<script>
function ole(){alert("Hi!")}
ole();
</script>

When your script contains a syntax error, the error handler won't be called though (edit: in some older browsers):

<script>window.onerror=function(e){alert(e);}</script>
<script>
!@ //The error won't be caught (at least not in older browsers)
</script>
Flimm
  • 136,138
  • 45
  • 251
  • 267
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • Thanks, I just updated the question. It actually is triggering onerror, however control flow also stops, instead of continuing. – Tom Lianza Sep 22 '11 at 21:13
  • That's expected. The error is thrown by `$`, and not caught by any local error handler. When an error is thrown, any code after that line isn't executed any more (the code defined in the global scope, in this case). – Rob W Sep 22 '11 at 21:48
  • Best JavaScript hack of the year x) you made my day – Yonn Trimoreau Jan 04 '18 at 13:41
  • 1
    Maybe browsers have changed since the answer was posted - `window.onerror` looks to capture syntax errors now, at least in Chrome – CertainPerformance Apr 16 '19 at 06:17
  • will error from requirejs's loaded script also be caught with this? 'cuase i can't. – softmarshmallow Nov 08 '20 at 10:12
3

Here's a solution that should work in modern browsers. Older browsers may not catch syntax errors.

<script>
  window.addEventListener('error', function(e) {
   alert(e.message);
   console.error(e.message, e.filename, e.lineno, e.colno, e.error);
  });
</script>
<script>
  this is a syntax error in JavaScript
</script>

This works as well for external scripts <script src="foobar.js"></script>, but browsers will hide detailed error information by default for scripts hosted in different origins. You can fix it by using crossorigin, like this:

<script crossorigin="anonymous" src="http://example.com/foobar.js"></script>

More useful information:

Flimm
  • 136,138
  • 45
  • 251
  • 267