Catch a javascript error in an external script file_问答_开发者

Catch a javascript error in an external script file

开发者 https://www.devze.com 2023-04-06 08:03 出处：网络

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 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/开发者_JAVA技巧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>

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>

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:

Is assigning a function to window.onerror preferable to window.addEventListener('error', callback)?
Sentry blog post about getting detailed error information from externally hosted scripts
Catching errors when a resource fails to load because of a 404 or a network error