Revision 1014693 of GlobalEventHandlers.onerror

<div>{{ApiRef("HTML DOM")}}</div>

<p>An <a href="/en-US/docs/Web/Guide/Events/Event_handlers">event handler</a> for the <code><a href="/en-US/docs/Web/Events/error">error</a></code> event. Error events are fired at various targets for different kinds of errors:</p>

<ul>
 <li>When a <strong>JavaScript runtime error</strong> (including syntax errors) occurs, an&nbsp;<code><a href="/en-US/docs/Web/Events/error">error</a></code> event using interface {{domxref("ErrorEvent")}} is fired at {{domxref("window")}} and <code>window.onerror()</code> is invoked.</li>
 <li>When a resource (such as an {{HTMLElement("img")}} or {{HTMLElement("script")}}) <strong>fails to load</strong>, an&nbsp;<code><a href="/en-US/docs/Web/Events/error">error</a></code> event using interface {{domxref("Event")}} is fired at the element, that initiated the load, and the <code>onerror()</code> handler on the element is invoked. These error events do not bubble up to window, but (at least in Firefox) can be handled with a single capturing {{domxref("window.addEventListener")}}.</li>
</ul>

<p>Installing a global <code>error</code> event handler is useful for automated collection of error reports.</p>

<h2 id="Syntax">Syntax</h2>

<p>For historical reasons, different arguments are passed to <code>window.onerror</code> and <code>element.onerror</code> handlers.</p>

<h3 id="window.onerror">window.onerror</h3>

<pre class="brush: js">
window.onerror = function(message, source, lineno, colno, error) { ... }
</pre>

<p>Function parameters:</p>

<ul>
 <li><code>message</code>: error message (string). Available as <code>event</code> (sic!) in HTML <code>onerror=""</code> handler.</li>
 <li><code>source</code>: URL of the script where the error was raised (string)</li>
 <li><code>lineno</code>: Line number where error was raised (number)</li>
 <li><code>colno</code>: Column number for the line where the error occurred (number) {{gecko_minversion_inline("31.0")}}</li>
 <li><code>error</code>: <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (object) {{gecko_minversion_inline("31.0")}}</li>
</ul>

<p>When the function returns <code>true</code>, this prevents the firing of the default event handler.</p>

<h3 id="element.onerror">element.onerror</h3>

<pre class="brush: js">
element.onerror = function(event) { ... }
</pre>

<p><code>element.onerror</code> accepts a function with a single argument of type {{domxref("Event")}}.</p>

<h2 id="Notes">Notes</h2>

<p>When a syntax<strong>(?)</strong> error occurs in a script, loaded from a <a href="/en-US/docs/Web/Security/Same-origin_policy">different origin</a>, the details of the syntax error are not reported to prevent leaking information (see {{bug("363897")}}). Instead the error reported is simply <code><strong>"Script error."</strong></code> This behavior can be overriden in some browsers using the <code>{{htmlattrxref("crossorigin","script")}}</code> attribute on {{HTMLElement("script")}} and having the server send the appropriate <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP response headers.</p>

<p>When using the inline HTML markup (<code>&lt;body onerror="alert('an error occurred')"&gt;</code>), the HTML specification requires arguments passed to <code>onerror</code> to be named <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code>. In browsers that have not implemented this requirement, they can still be obtained via <code>arguments[0]</code> through <code>arguments[2]</code>.</p>

<h2 id="Specifications">Specifications</h2>

<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>Before Firefox 14 when a {{HTMLElement("script")}} failed to load,&nbsp;<code>window.onerror</code> was invoked with message <strong>"Error loading script"</strong>. This was fixed in {{bug("737087")}}, now&nbsp;<code>scriptElement.onerror</code> is invoked instead in such cases.</p>

<p>Since Firefox 31, the last 2 arguments (<code>colno</code> and <code>error</code>) were added, meaning you can access the stack trace of a script error from <code>window.onerror</code> via the provided <code>Error</code> object ({{bug("355430")}}.)</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="https://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html">Capture and report JavaScript errors with window.onerror (blog.getsentry.com, 2016)</a></li>
 <li><a href="https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/">How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox) (danlimerick.wordpress.com, 2014)</a></li>
</ul>