Html runtime error

function DeleteData(ID) { var ctrlId=ID.id; var divcontents=document.getElementById(ctrlId).innerHTML; var tabid=ctrlId.replace(/div/,'tab'); var tabcontents=document.getElementById(tabid).inn...
function DeleteData(ID)
{
 var ctrlId=ID.id;

 var divcontents=document.getElementById(ctrlId).innerHTML;
 var tabid=ctrlId.replace(/div/,'tab');
 var tabcontents=document.getElementById(tabid).innerHTML;
 alert(document.getElementById(tabid).innerHTML);
 document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";
 document.getElementById(ctrlId).innerHTML='';

}

I am trying to replace the Table with empty table but

document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";

this line is causing Unknown Runtime Error

thejartender's user avatar

thejartender

9,2896 gold badges33 silver badges51 bronze badges

asked Feb 17, 2009 at 8:42

You can’t set value to a table’s innerHTML, you should access to child cells or rows and change them like that :

document.getElementById(tabid).rows[0].cells.innerHTML = 'blah blah';

For more info/example : Table, TableHeader, TableRow, TableData Objects

answered Feb 17, 2009 at 9:02

Canavar's user avatar

CanavarCanavar

47.5k17 gold badges91 silver badges122 bronze badges

2

In IE8, you cannot change the innerHTML of an object when the code that attempts that is fired from within the object.

For example:

<span id='n1'>
  <input type=button value='test' onclick='DoSomething(this);'>
</span>

with the following code tucked in some remote corner of your document:

<script type='text/javascript'>
  function DoSomething(element)
  {
    document.getElementById("n1").innerHTML = "This is a test"
  }
</script>

This will fail with the error unknown runtime error. I believe it has to do with the fact that you’re trying to replace the HTML code which fired the current line of execution. The onclick event is part of the code being replaced by the DoSomething function. IE8 doesn’t like that.

I resolved my issue by setting a timer event for 250 milliseconds, such that the function called at the end of the 250 milliseconds replaces the span’s innerHTML.

Nate's user avatar

Nate

18.5k8 gold badges46 silver badges53 bronze badges

answered Nov 3, 2010 at 3:42

Paul's user avatar

PaulPaul

1311 silver badge2 bronze badges

1

I find out that in IE8 some elements are in readonly: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Therefore if you try to set innerHTML for these elements IE8 notify alter with Unknown Runtime Error.

More details here: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx.

The simplest way is to convert read-only elements to div element.

answered Feb 9, 2011 at 10:06

Giulio Roggero's user avatar

Giulio RoggeroGiulio Roggero

1,6821 gold badge16 silver badges11 bronze badges

3

I had the same issue but my error was because I was inserting a p tag directly underneath a p element as in:

document.getElementById('p-element').innerHTML = '<p>some description</p>';

I don’t really see how this is HTML format error; seems more like another IE8 bug.

Sicco's user avatar

Sicco

6,0394 gold badges44 silver badges60 bronze badges

answered Dec 8, 2010 at 21:22

Boubacar's user avatar

2

Great, I had the same situation with setting the innerHTML. When I read this I realised that one of the elements was a TR and one was a TD and the TD was working.

Changing the code so that they’re both TDs fixes it, which means that it is a rather non-obvious problem caused by the structure of tables.

Presumably it throws the DOM awry when I start changing table rows since it can’t store the table as an array any more.

I’m sure IE could give a more informative error message since it can’t be that uncommon for the DOM to change on the fly and it seems strange that this would only throw an error for tables.

bluish's user avatar

bluish

25.7k27 gold badges119 silver badges177 bronze badges

answered Nov 23, 2010 at 22:53

Theo's user avatar

Ohh yes — remember that the HTML structure has to be valid.

I tried loading an entire page into a <p> tag — it failed (obviously), changing it to a <div> tag solved my problem!

So remember the HTML structure!

Martin Smith's user avatar

Martin Smith

430k87 gold badges727 silver badges825 bronze badges

answered Jan 7, 2011 at 14:29

aliceraunsbaek's user avatar

why it happend in IE…

case scenario:

Javascript unknown runtime error in IE while accessing Div inside Div to add ajax contents.

solution:

dont ever place nested divs in between the form tags to play with there contents .. :)

answered Feb 11, 2011 at 23:20

musmanjaved's user avatar

When using YUI try to use

Y.one('#'+data.id).setContent(html); 

instead of:

Y.one('#'+data.id).set('innerHTML' , html);

answered Feb 9, 2012 at 15:48

Joris Kok's user avatar

If you need to set innerHTML to «» (empty string) then you can use removeChild instead

answered Jul 1, 2013 at 16:27

Fulg's user avatar

FulgFulg

433 bronze badges

This is not a Big issue, since i faced same problem few days ago and the reason this error
occurs in ie is that — There exists an error in our html format or you are using an element other than <td> to replace innerHTML ie use only, dont use tables,divs to replace innerHTML.

  • SwapnilK

eyelidlessness's user avatar

answered Jun 22, 2009 at 18:51

An error is an action that is inaccurate or incorrect. There are three types of errors in programming which are discussed below:

  • Syntax error
  • Logical error
  • Runtime error

Syntax error: According to computer science, a syntax error is an error in the syntax of a sequence of characters or tokens that is intended to be written in a particular programming language or it is also the compile-time error if the syntax is not correct then it will give an error message. 

Example: 

HTML

<script type="text/javascript">

    // An runtime error here

    window.printme();

</script>

As the syntax is not correct of the JavaScript it will affect only the thread that is under this JavaScript and the rest of the code in other threads gets executed as nothing in them depends on the code containing the error. 

Logical error: It is the most difficult error to be traced as it is the error on the logical part of the coding or logical error is a bug in a program that causes it to operate incorrectly and terminate abnormally (or crash). 

Runtime Error: A runtime error is an error that occurs during the running of the program, also known as the exception. In the example that is given below the syntax is correct, but at runtime, it is trying to call a method that does not exist. 

Example: 

Javascript

<script type="text/javascript">

    window.printme();

</script>

As in runtime errors, there are exceptions and these exceptions can be handled with the help of the try and catch method

try-catch method

JavaScript uses the try catch and finally to handle the exception and it also uses the throw operator to handle the exception. try have the main code to run and in the catch block if any error is thrown by try block will be caught and the catch block will execute. Finally block will always occur even if an error is thrown

Note:- We can create our own errors using throw but error thrown can only be String, Number, Boolean, or an object

Syntax: 

Javascript

<script>

    try {

            [break;]

    }

    catch ( exception e ){

        [break;]

    }

</script>

Example 1: 

HTML

<p id="gfg">

    Click the GfG button to see the result:

</p>

<form>

    <input type="button" value="Click GfG" onclick="First();" />

</form>

<script type="text/javascript">

    function First() {

        var a = 123

        var b = 145

        try {

            document.getElementById('gfg').innerHTML +=

                '<br> Division of ' + a + ' by ' + b + ' = ' + a / b

        

        catch (e) {

          alert(e.description)

        }

      }

</script>

Output: 

Example 2:  In this example, use the finally method which will always execute unconditionally after the try/catch.

HTML

<script>

    function First() {

        var a = 123;

        var b = 0;

        try {

            if(b==0){

                throw "Do not divide by zero";

            }

        }

        catch ( e ) {

            document.getElementById('gfg').innerHTML += "<br>"+e+"<br>" ;

        }

        finally {

            document.getElementById('gfg').innerHTML +="  Finally block will always execute!" ;

        }

    }

</script>

<p id="gfg">Click the GfG button to see the result:</p>

<form>

    <input type="button" value="Click GfG" onclick="First()" />

</form>

Output: 


There are three types of errors in programming: (a) Syntax Errors, (b) Runtime Errors, and (c) Logical Errors.

Syntax Errors

Syntax errors, also called parsing errors, occur at compile time in traditional programming languages and at interpret time in JavaScript.

For example, the following line causes a syntax error because it is missing a closing parenthesis.

<script type = "text/javascript">
   <!--
      window.print(;
   //-->
</script>

When a syntax error occurs in JavaScript, only the code contained within the same thread as the syntax error is affected and the rest of the code in other threads gets executed assuming nothing in them depends on the code containing the error.

Runtime Errors

Runtime errors, also called exceptions, occur during execution (after compilation/interpretation).

For example, the following line causes a runtime error because here the syntax is correct, but at runtime, it is trying to call a method that does not exist.

<script type = "text/javascript">
   <!--
      window.printme();
   //-->
</script>

Exceptions also affect the thread in which they occur, allowing other JavaScript threads to continue normal execution.

Logical Errors

Logic errors can be the most difficult type of errors to track down. These errors are not the result of a syntax or runtime error. Instead, they occur when you make a mistake in the logic that drives your script and you do not get the result you expected.

You cannot catch those errors, because it depends on your business requirement what type of logic you want to put in your program.

The try…catch…finally Statement

The latest versions of JavaScript added exception handling capabilities. JavaScript implements the try…catch…finally construct as well as the throw operator to handle exceptions.

You can catch programmer-generated and runtime exceptions, but you cannot catch JavaScript syntax errors.

Here is the try…catch…finally block syntax −

<script type = "text/javascript">
   <!--
      try {
         // Code to run
         [break;]
      } 
      
      catch ( e ) {
         // Code to run if an exception occurs
         [break;]
      }
      
      [ finally {
         // Code that is always executed regardless of 
         // an exception occurring
      }]
   //-->
</script>

The try block must be followed by either exactly one catch block or one finally block (or one of both). When an exception occurs in the try block, the exception is placed in e and the catch block is executed. The optional finally block executes unconditionally after try/catch.

Examples

Here is an example where we are trying to call a non-existing function which in turn is raising an exception. Let us see how it behaves without try…catch

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               alert("Value of variable a is : " + a );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>      
   </body>
</html>

Output

Now let us try to catch this exception using try…catch and display a user-friendly message. You can also suppress this message, if you want to hide this error from a user.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               try {
                  alert("Value of variable a is : " + a );
               } 
               catch ( e ) {
                  alert("Error: " + e.description );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Output

You can use finally block which will always execute unconditionally after the try/catch. Here is an example.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               
               try {
                  alert("Value of variable a is : " + a );
               }
               catch ( e ) {
                  alert("Error: " + e.description );
               }
               finally {
                  alert("Finally block will always execute!" );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Output

The throw Statement

You can use throw statement to raise your built-in exceptions or your customized exceptions. Later these exceptions can be captured and you can take an appropriate action.

Example

The following example demonstrates how to use a throw statement.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               var b = 0;
               
               try {
                  if ( b == 0 ) {
                     throw( "Divide by zero error." ); 
                  } else {
                     var c = a / b;
                  }
               }
               catch ( e ) {
                  alert("Error: " + e );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Output

You can raise an exception in one function using a string, integer, Boolean, or an object and then you can capture that exception either in the same function as we did above, or in another function using a try…catch block.

The onerror() Method

The onerror event handler was the first feature to facilitate error handling in JavaScript. The error event is fired on the window object whenever an exception occurs on the page.

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            window.onerror = function () {
               alert("An error occurred.");
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Output

The onerror event handler provides three pieces of information to identify the exact nature of the error −

  • Error message − The same message that the browser would display for the given error

  • URL − The file in which the error occurred

  • Line number− The line number in the given URL that caused the error

Here is the example to show how to extract this information.

Example

<html>
   <head>
   
      <script type = "text/javascript">
         <!--
            window.onerror = function (msg, url, line) {
               alert("Message : " + msg );
               alert("url : " + url );
               alert("Line number : " + line );
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

Output

You can display extracted information in whatever way you think it is better.

You can use an onerror method, as shown below, to display an error message in case there is any problem in loading an image.

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />

You can use onerror with many HTML tags to display appropriate messages in case of errors.

Last Updated: 08/29/2022
[Time to Read: ~3-5 minutes]

What.html uses the HTML file extension, which is more specifically known as a Hypertext Markup Language file. It is classified as a HTML (Hypertext Markup Language) file, created for MATLAB R2009a by MathWorks.

The first release in the Windows 10 Operating System for what.html was on 03/14/2009 inside MATLAB R2009a.

This file release marks the latest and most updated version from MathWorks.

Please see below for more detailed information, HTML file troubleshooting instructions, and free downloads of different versions of what.html.

What are what.html Error Messages?

General what.html Runtime Errors

What.html file errors often occur during the startup phase of MATLAB, but can also occur while the program is running.
These types HTML errors are also known as “runtime errors” because they occur while MATLAB is running. Here are some of the most common what.html runtime errors:

  • what.html could not be found.
  • what.html error.
  • what.html failed to load.
  • Error loading what.html.
  • Failed to register what.html / Cannot register what.html.
  • Runtime Error — what.html.
  • The file what.html is missing or corrupt.

Microsoft Visual C++ Runtime Library

Runtime Error!

Program: C:Program FilesMATLABR2019bhelpmatlabrefwhat.html

This application has requested the Runtime to terminate it in an unusual way.
Please contact the application’s support team for more information.

Most HTML errors are due to missing or corrupt files. Your what.html file could be missing due to accidental deletion, uninstalled as a shared file of another program (shared with MATLAB), or deleted by a malware infection. Furthermore, what.html file corruption could be caused from a power outage when loading MATLAB, system crash while loading or saving what.html, bad sectors on your storage media (usually your primary hard drive), or malware infection. Thus, it’s critical to make sure your anti-virus is kept up-to-date and scanning regularly.

How to Fix what.html Errors in 3 Steps (Time to complete: ~5-15 minutes)

If you’re encountering one of the error messages above, follow these troubleshooting steps to resolve your what.html issue. These troubleshooting steps are listed in the recommended order of execution.

Step 1: Restore your PC back to the latest restore point, «snapshot», or backup image before error occurred.

To begin System Restore (Windows XP, Vista, 7, 8, and 10):

  1. Hit the Windows Start button
  2. When you see the search box, type «System Restore» and press «ENTER«.
  3. In the search results, find and click System Restore.
  4. Please enter the administrator password (if applicable / prompted).
  5. Follow the steps in the System Restore Wizard to choose a relevant restore point.
  6. Restore your computer to that backup image.

If the Step 1 fails to resolve the what.html error, please proceed to the Step 2 below.

Step 2: If recently installed MATLAB (or related software), uninstall then try reinstalling MATLAB software.

You can uninstall MATLAB software by following these instructions (Windows XP, Vista, 7, 8, and 10):

  1. Hit the Windows Start button
  2. In the search box, type «Uninstall» and press «ENTER«.
  3. In the search results, find and click «Add or Remove Programs«
  4. Find the entry for MATLAB R2009a and click «Uninstall«
  5. Follow the prompts for uninstallation.

After the software has been fully uninstalled, restart your PC and reinstall MATLAB software.

If this Step 2 fails as well, please proceed to the Step 3 below.

MATLAB R2009a

MathWorks

Step 3: Perform a Windows Update.

When the first two steps haven’t solved your issue, it might be a good idea to run Windows Update. Many what.html error messages that are encountered can be contributed to an outdated Windows Operating System. To run Windows Update, please follow these easy steps:

  1. Hit the Windows Start button
  2. In the search box, type «Update» and press «ENTER«.
  3. In the Windows Update dialog box, click «Check for Updates» (or similar button depending on your Windows version)
  4. If updates are available for download, click «Install Updates«.
  5. After the update is completed, restart your PC.

If Windows Update failed to resolve the what.html error message, please proceed to next step. Please note that this final step is recommended for advanced PC users only.

If Those Steps Fail: Download and Replace Your what.html File (Caution: Advanced)

If none of the previous three troubleshooting steps have resolved your issue, you can try a more aggressive approach (Note: Not recommended for amateur PC users) by downloading and replacing your appropriate what.html file version. We maintain a comprehensive database of 100% malware-free what.html files for every applicable version of MATLAB. Please follow the steps below to download and properly replace you file:

  1. Locate your Windows operating system version in the list of below «Download what.html Files».
  2. Click the appropriate «Download Now» button and download your Windows file version.
  3. Copy this file to the appropriate MATLAB folder location:

    Windows 10: C:Program FilesMATLABR2019bhelpmatlabref

  4. Restart your computer.

If this final step has failed and you’re still encountering the error, you’re only remaining option is to do a clean installation of Windows 10.

GEEK TIP : We must emphasize that reinstalling Windows will be a very time-consuming and advanced task to resolve what.html problems. To avoid data loss, you must be sure that you have backed-up all of your important documents, pictures, software installers, and other personal data before beginning the process. If you are not currently backing up your data, you need to do so immediately.

Download what.html Files (Malware-Tested 100% Clean)

CAUTION : We strongly advise against downloading and copying what.html to your appropriate Windows system directory. MathWorks typically does not release MATLAB HTML files for download because they are bundled together inside of a software installer. The installer’s task is to ensure that all correct verifications have been made before installing and placing what.html and all other HTML files for MATLAB. An incorrectly installed HTML file may create system instability and could cause your program or operating system to stop functioning altogether. Proceed with caution.

Files Related to what.html

HTML Files Related to what.html

File Name Description Software Program (Version) File Size (bytes) File Location
clibgen.classdefinitio… Hypertext Markup Language MATLAB R2009a 21636 C:Program FilesMATLABR2019bhelpmatlabref
nzmax.html Hypertext Markup Language MATLAB R2009a 20411 C:Program FilesMATLABR2019bhelpmatlabref
startup-options.html Hypertext Markup Language MATLAB R2009a 23669 C:Program FilesMATLABR2019bhelpmatlabmatl…
acosh.html Hypertext Markup Language MATLAB R2009a 38557 C:Program FilesMATLABR2019bhelpmatlabref
outputbuffersize.html Hypertext Markup Language MATLAB R2009a 15754 C:Program FilesMATLABR2019bhelpmatlabmatl…

Other Files Related to what.html

File Name Description Software Program (Version) File Size (bytes) File Location
setupact.log Log MATLAB R2009a 62521 C:WindowsPantherUnattendGC
api-ms-win-core-heap-l… ApiSet Stub DLL Microsoft® Windows® Operating System (10.0.15063.468) 19264 C:Program FilesMATLABR2019bbinwin64
diagwrn.xml Extensible Markup Language MATLAB R2009a 5718 C:WindowsSystem32SysprepPanther
diagerr.xml Extensible Markup Language MATLAB R2009a 5718 C:WindowsSystem32SysprepPanther
api-ms-win-core-memory… ApiSet Stub DLL Microsoft® Windows® Operating System (10.0.17134.12) 11624 C:UsersTesterAppDataLocalMicrosoftOneDriv…

You are downloading trial software. The purchase of a one-year software subscription at the price of $39.95 USD is required to unlock all software features. Subscription auto-renews at the end of the term (Learn more). By clicking the «Start Download» button above and installing «Software», I acknowledge I have read and agree to the Solvusoft End User License Agreement and Privacy Policy.

JavaScript Errors Handbook

This README contains information that I’ve learned over the years about dealing with JavaScript errors, reporting them to the server, and navigating through a lot of bugs that can make this all really hard. Browsers have improved in this area, but there is still room left to improve to make sure that all applications can sanely and soundly handle any error that happens.

Test cases for content found in this guide can be found at https://mknichel.github.io/javascript-errors/.

Table of Contents

  • Introduction
  • Anatomy of a JavaScript Error
    • Producing a JavaScript Error
    • Error Messages
    • Stack Trace Format
  • Catching JavaScript Errors
    • window.onerror
    • try/catch
    • Protected Entry Points
    • Promises
    • Web Workers
    • Chrome Extensions

Introduction

Catching, reporting, and fixing errors is an important part of any application to ensure the health and stability of the application. Since JavaScript code is also executed on the client and in many different browser environments, staying on top of JS Errors from your application can also be hard. There are no formal web specs for how to report JS errors which cause differences in each browser’s implementation. Additionally, there have been many bugs in browsers’ implementation of JavaScript errors as well that have made this even harder. This page navigates through these aspects of JS Errors so that future developers can handle errors better and browsers will hopefully converge on standardized solutions.

Anatomy of a JavaScript Error

A JavaScript error is composed of two primary pieces: the error message and the stack trace. The error message is a string that describes what went wrong, and the stack trace describes where in the code the error happened. JS Errors can be produced either by the browser itself or thrown by application code.

Producing a JavaScript Error

A JS Error can be thrown by the browser when a piece of code doesn’t execute properly, or it can be thrown directly by code.

For example:

In this example, a variable that is actually a number can’t be invoked as a function. The browser will throw an error like TypeError: a is not a function with a stack trace that points to that line of code.

A developer might also want to throw an error in a piece of code if a certain precondition is not met. For example

if (!checkPrecondition()) {
  throw new Error("Doesn't meet precondition!");
}

In this case, the error will be Error: Doesn't meet precondition!. This error will also contain a stack trace that points to the appropriate line. Errors thrown by the browser and application code can be handled the same.

There are multiple ways that developers can throw an error in JavaScript:

  • throw new Error('Problem description.')
  • throw Error('Problem description.') <— equivalent to the first one
  • throw 'Problem description.' <— bad
  • throw null <— even worse

Throwing a string or null is really not recommended since the browser will not attach a stack trace to that error, losing the context of where that error ocurred in the code. It is best to throw an actual Error object, which will contain the error message as well as a stack trace that points to the right lines of code where the error happened.

Error Messages

Each browser has its own set of messages that it uses for the built in exceptions, such as the example above for trying to call a non-function. Browsers will try to use the same messages, but since there is no spec, this is not guaranteed. For example, both Chrome and Firefox use {0} is not a function for the above example while IE11 will report Function expected (notably also without reporting what variable was attempted to be called).

However, browsers tend to diverge often as well. When there are multiple default statements in a switch statement, Chrome will throw "More than one default clause in switch statement" while Firefox will report "more than one switch default". As new features are added to the web, these error messages have to be updated. These differences can come into play later when you are trying to handle reported errors from obfuscated code.

You can find the templates that browsers use for error messages at:

  • Firefox — http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg
  • Chrome — https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js
  • Internet Explorer — https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h

error message warning Browsers will produce different error messages for some exceptions.

Stack Trace Format

The stack trace is a description of where the error happened in the code. It is composed of a series of frames, where each frames describe a particular line in the code. The topmost frame is the location where the error was thrown, while the subsequent frames are the function call stack — or how the code was executed to get to that point where the error was thrown. Since JavaScript is usually concatenated and minified, it is also important to have column numbers so that the exact statement can be located when a given line has a multitude of statements.

A basic stack trace in Chrome looks like:

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Each stack frame consists of a function name (if applicable and the code was not executed in the global scope), the script that it came from, and the line and column number of the code.

Unfortunately, there is no standard for the stack trace format so this differs by browser.

Microsoft Edge and IE 11’s stack trace looks similar to Chrome’s except it explicitly lists Global code:

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:3)
  at Global code (http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3)

Firefox’s stack trace looks like:

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9
  @http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Safari’s format is similar to Firefox’s format but is also slightly different:

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:18
  global code@http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:13

The same basic information is there, but the format is different.

Also note that in the Safari example, aside from the format being different than Chrome, the column numbers are different than both Chrome and Firefox. The column numbers also can deviate more in different error situations — for example in the code (function namedFunction() { throwError(); })();, Chrome will report the column for the throwError() function call while IE11 reports the column number as the start of the string. These differences will come back into play later when the server needs to parse the stack trace for reported errors and deobfuscate obfuscated stack traces.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack for more information on the stack property of errors. When accessing the Error.stack property, Chrome does include the error message as part of the stack but Safari 10+ does not.

stack trace format warning The format of stack traces is different by browser in form and column numbers used.

Diving in more, there are a lot of nuances to stack trace formats that are discussed in the below sections.

Naming anonymous functions

By default, anonymous functions have no name and either appear as empty string or «Anonymous function» in the function names in the stack trace (depending on the browser). To improve debugging, you should add a name to all functions to ensure it appears in the stack frame. The easiest way to do this is to ensure that anonymous functions are specified with a name, even if that name is not used anywhere else. For example:

setTimeout(function nameOfTheAnonymousFunction() { ... }, 0);

This will cause the stack trace to go from:

at http://mknichel.github.io/javascript-errors/javascript-errors.js:125:17

to

at nameOfTheAnonymousFunction (http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31)

In Safari, this would go from:

https://mknichel.github.io/javascript-errors/javascript-errors.js:175:27

to

nameOfTheAnonymousFunction@https://mknichel.github.io/javascript-errors/javascript-errors.js:171:41

This method ensures that nameOfTheAnonymousFunction appears in the frame for any code from inside that function, making debugging much easier. See http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/#toc-debugging-tips for more information.

Assigning functions to a variable

Browsers will also use the name of the variable or property that a function is assigned to if the function itself does not have a name. For example, in

var fnVariableName = function() { ... };

browsers will use fnVariableName as the name of the function in stack traces.

    at throwError (http://mknichel.github.io/javascript-errors/javascript-errors.js:27:9)
    at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

Even more nuanced than that, if this variable is defined within another function, all browsers will use just the name of the variable as the name of the function in the stack trace except for Firefox, which will use a different form that concatenates the name of the outer function with the name of the inner variable. Example:

function throwErrorFromInnerFunctionAssignedToVariable() {
  var fnVariableName = function() { throw new Error("foo"); };
  fnVariableName();
}

will produce in Firefox:

throwErrorFromInnerFunctionAssignedToVariable/fnVariableName@http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37

In other browsers, this would look like:

at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

inner function Firefox stack frame warning Firefox uses different stack frame text for functions defined within another function.

displayName Property

The display name of a function can also be set by the displayName property in all major browsers except for IE11. In these browsers, the displayName will appear in the devtools debugger, but in all browsers but Safari, it will not be used in Error stack traces (Safari differs from the rest by also using the displayName in the stack trace associated with an error).

var someFunction = function() {};
someFunction.displayName = " # A longer description of the function.";

There is no official spec for the displayName property, but it is supported by all the major browsers. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName and http://www.alertdebugging.com/2009/04/29/building-a-better-javascript-profiler-with-webkit/ for more information on displayName.

IE11 no displayName property IE11 doesn’t support the displayName property.

Safari displayName property bug Safari uses the displayName property as the symbol name in Error stack traces.

Programatically capturing stack traces

If an error is reported without a stack trace (see more details when this would happen below), then it’s possible to programatically capture a stack trace.

In Chrome, this is really easy to do by using the Error.captureStackTrace API. See https://github.com/v8/v8/wiki/Stack%20Trace%20API for more information on the use of this API.

For example:

function ignoreThisFunctionInStackTrace() {
  var err = new Error();
  Error.captureStackTrace(err, ignoreThisFunctionInStackTrace);
  return err.stack;
}

In other browsers, a stack trace can also be collected by creating a new error and accessing the stack property of that object:

var err = new Error('');
return err.stack;

However, IE10 only populates the stack trace when the error is actually thrown:

try {
  throw new Error('');
} catch (e) {
  return e.stack;
}

If none of these approaches work, then it’s possible to create a rough stack trace without line numbers or columns by iterating over the arguments.callee.caller object — this won’t work in ES5 Strict Mode though and it’s not a recommended approach.

Async stack traces

It is very common for asynchronous points to be inserted into JavaScript code, such as when code uses setTimeout or through the use of Promises. These async entry points can cause problems for stack traces, since they cause a new execution context to form and the stack trace starts from scratch again.

Chrome DevTools has support for async stack traces, or in other words making sure the stack trace of an error also shows the frames that happened before the async point was introduced. With the use of setTimeout, this will capture who called the setTimeout function that eventually produced an error. See http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/ for more information.

An async stack trace will look like:

  throwError	@	throw-error.js:2
  setTimeout (async)		
  throwErrorAsync	@	throw-error.js:10
  (anonymous function)	@	throw-error-basic.html:14

Async stack traces are only supported in Chrome DevTools right now, only for exceptions that are thrown when DevTools are open. Stack traces accessed from Error objects in code will not have the async stack trace as part of it.

It is possible to polyfill async stack traces in some cases, but this could cause a significant performance hit for your application since capturing a stack trace is not cheap.

Only Chrome supports async stack traces Only Chrome DevTools natively supports async stack traces.

Naming inline scripts and eval

Stack traces for code that was eval’ed or inlined into a HTML page will use the page’s URL and line/column numbers for the executed code.

For example:

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

If these scripts actually come from a script that was inlined for optimization reasons, then the URL, line, and column numbers will be wrong. To work around this problem, Chrome and Firefox support the //# sourceURL= annotation (Safari, Edge, and IE do not). The URL specified in this annotation will be used as the URL for all stack traces, and the line and column number will be computed relative to the start of the <script> tag instead of the HTML document. For the same error as above, using the sourceURL annotation with a value of «inline.js» will produce a stack trace that looks like:

  at throwError (http://mknichel.github.io/javascript-errors/inline.js:8:9)
  at http://mknichel.github.io/javascript-errors/inline.js:12:3

This is a really handy technique to make sure that stack traces are still correct even when using inline scripts and eval.

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl describes the sourceURL annotation in more detail.

Lack of sourceURL support Safari, Edge, and IE do not support the sourceURL annotation for naming inline scripts and evals. If you use inline scripts in IE or Safari and you obfuscate your code, you will not be able to deobfuscate errors that come from those scripts.

Chrome bug for computing line numbers with sourceURL Up until Chrome 42, Chrome did not compute line numbers correctly for inline scripts that use the sourceURL annotation. See https://bugs.chromium.org/p/v8/issues/detail?id=3920 for more information.

Chrome bug in line numbers from inline scripts Line numbers for stack frames from inline scripts are incorrect when the sourceURL annotation is used since they are relative to the start of the HTML document instead of the start of the inline script tag (making correct deobfuscation not possible). https://code.google.com/p/chromium/issues/detail?id=578269

Eval stack traces

For code that uses eval, there are other differences in the stack trace besides whether or not it uses the sourceURL annotation. In Chrome, a stack trace from a statement used in eval could look like:

Error: Error from eval
    at evaledFunction (eval at evalError (http://mknichel.github.io/javascript-errors/javascript-errors.js:137:3), <anonymous>:1:36)
    at eval (eval at evalError (http://mknichel.github.io/javascript-errors/javascript-errors.js:137:3), <anonymous>:1:68)
    at evalError (http://mknichel.github.io/javascript-errors/javascript-errors.js:137:3)

In MS Edge and IE11, this would look like:

Error from eval
    at evaledFunction (eval code:1:30)
    at eval code (eval code:1:2)
    at evalError (http://mknichel.github.io/javascript-errors/javascript-errors.js:137:3)

In Safari:

Error from eval
    evaledFunction
    eval code
    eval@[native code]
    evalError@http://mknichel.github.io/javascript-errors/javascript-errors.js:137:7

and in Firefox:

Error from eval
    evaledFunction@http://mknichel.github.io/javascript-errors/javascript-errors.js line 137 > eval:1:36
    @http://mknichel.github.io/javascript-errors/javascript-errors.js line 137 > eval:1:11
    evalError@http://mknichel.github.io/javascript-errors/javascript-errors.js:137:3

These differences can make it hard to parse eval code the same across all browsers.

Different eval stack trace format across browsers Each browser uses a different stack trace format for errors that happened inside eval.

Stack traces with native frames

Your JavaScript code can also be called directly from native code. Array.prototype.forEach is a good example — you pass a function to forEach and the JS engine will call that function for you.

function throwErrorWithNativeFrame() {
  var arr = [0, 1, 2, 3];
  arr.forEach(function namedFn(value) {
    throwError();
  });
}

This produces different stack traces in different browsers. Chrome and Safari append the name of the native function in the stack trace itself as a separate frame, such as:

(Chrome)
    at namedFn (http://mknichel.github.io/javascript-errors/javascript-errors.js:153:5)
    at Array.forEach (native)
    at throwErrorWithNativeFrame (http://mknichel.github.io/javascript-errors/javascript-errors.js:152:7)

(Safari)
    namedFn@http://mknichel.github.io/javascript-errors/javascript-errors.js:153:15
    forEach@[native code]
    throwErrorWithNativeFrame@http://mknichel.github.io/javascript-errors/javascript-errors.js:152:14

(Edge)
    at namedFn (http://mknichel.github.io/javascript-errors/javascript-errors.js:153:5)
    at Array.prototype.forEach (native code)
    at throwErrorWithNativeFrame (http://mknichel.github.io/javascript-errors/javascript-errors.js:152:7)

However, Firefox and IE11 do not show that forEach was called as part of the stack:

namedFn@http://mknichel.github.io/javascript-errors/javascript-errors.js:153:5
throwErrorWithNativeFrame@http://mknichel.github.io/javascript-errors/javascript-errors.js:152:3

Different native function stack frame behavior Some browsers include native code frames in stack traces, while others do not.

Catching JavaScript Errors

To detect that your application had an error, some code must be able to catch that error and report about it. There are multiple techniques for catching errors, each with their pros and cons.

window.onerror

window.onerror is one of the easiest and best ways to get started catching errors. By assigning window.onerror to a function, any error that is uncaught by another part of the application will be reported to this function, along with some information about the error. For example:

window.onerror = function(msg, url, line, col, err) {
  console.log('Application encountered an error: ' + msg);
  console.log('Stack trace: ' + err.stack);
}

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror describes this in more detail.

Historically, there have been a few problems with this approach:

No Error object provided

The 5th argument to the window.onerror function is supposed to be an Error object. This was added to the WHATWG spec in 2013: https://html.spec.whatwg.org/multipage/webappapis.html#errorevent. Chrome, Firefox, and IE11 now properly provide an Error object (along with the critical stack property), but Safari, MS Edge, and IE10 do not. This works in Firefox since Firefox 14 (https://bugzilla.mozilla.org/show_bug.cgi?id=355430) and in Chrome since late 2013 (https://mikewest.org/2013/08/debugging-runtime-errors-with-window-onerror, https://code.google.com/p/chromium/issues/detail?id=147127). Safari 10 launched support for the Error object in window.onerror.

Lack of support for Error in window.onerror Safari (versions below 10), MS Edge, and IE10 do not support an Error object with a stack trace in window.onerror.

Cross domain sanitization

In Chrome, errors that come from another domain in the window.onerror handler will be sanitized to «Script error.», «», 0. This is generally okay if you really don’t want to process the error if it comes from a script that you don’t care about, so the application can filter out errors that look like this. However, this does not happen in Firefox or Safari or IE11, nor does Chrome do this for try/catch blocks that wrap the offending code.

If you would like to receive errors in window.onerror in Chrome with full fidelity from cross domain scripts, those resources must provide the appropriate cross origin headers. See https://mikewest.org/2013/08/debugging-runtime-errors-with-window-onerror for more information.

Cross domain sanitization in window.onerror Chrome is the only browser that will sanitize errors that come from another origin. Take care to filter these out, or set the appropriate headers.

Chrome Extensions

In old versions of Chrome, Chrome extensions that are installed on a user’s machine could also throw errors that get reported to window.onerror. This has been fixed in newer versions of Chrome. See the dedicated Chrome Extensions section below.

window.addEventListener(«error»)

The window.addEventListener("error") API works the same as the window.onerror API. See http://www.w3.org/html/wg/drafts/html/master/webappapis.html#runtime-script-errors for more information on this approach.

Showing errors in DevTools console for development

Catching errors via window.onerror does not prevent that error from also appearing in the DevTools console. This is most likely the right behavior for development since the developer can easily see the error. If you don’t want these errors to show up in production to end users, e.preventDefault() can be called if using the window.addEventListener approach.

Recommendation

window.onerror is the best tool to catch and report JS errors. It’s recommended that only JS errors with valid Error objects and stack traces are reported back to the server, otherwise the errors may be hard to investigate or you may get a lot of spam from Chrome extensions or cross domain scripts.

try/catch

Given the above section, unfortunately it’s not possible to rely on window.onerror in all browsers to capture all error information. For catching exceptions locally, a try/catch block is the obvious choice. It’s also possible to wrap entire JavaScript files in a try/catch block to capture error information that can’t be caught with window.onerror. This improves the situations for browsers that don’t support window.onerror, but also has some downsides.

Doesn’t catch all errors

A try/catch block won’t capture all errors in a program, such as errors that are thrown from an async block of code through window.setTimeout. Try/catch can be used with Protected Entry Points to help fill in the gaps.

Use protected entry points with try/catch try/catch blocks wrapping the entire application aren’t sufficient to catch all errors.

Deoptimizations

Old versions of V8 (and potentially other JS engines), functions that contain a try/catch block won’t be optimized by the compiler (http://www.html5rocks.com/en/tutorials/speed/v8/). Chrome fixed this in TurboFan (https://codereview.chromium.org/1996373002).

Protected Entry Points

An «entry point» into JavaScript is any browser API that can start execution of your code. Examples include setTimeout, setInterval, event listeners, XHR, web sockets, or promises. Errors that are thrown from these entry points will be caught by window.onerror, but in the browsers that don’t support the full Error object in window.onerror, an alternative mechanism is needed to catch these errors since the try/catch method mentioned above won’t catch them either.

Thankfully, JavaScript allows these entry points to be wrapped so that a try/catch block can be inserted before the function is invoked to catch any errors thrown by the code.

Each entry point will need slightly different code to protect the entry point, but the gist of the methodology is:

function protectEntryPoint(fn) {
  return function protectedFn() {
    try {
      return fn();
    } catch (e) {
      // Handle error.
    }
  }
}
_oldSetTimeout = window.setTimeout;
window.setTimeout = function protectedSetTimeout(fn, time) {
  return _oldSetTimeout.call(window, protectEntryPoint(fn), time);
};

Promises

Sadly, it’s easy for errors that happen in Promises to go unobserved and unreported. Errors that happen in a Promise but are not handled by attaching a rejection handler are not reported anywhere else — they do not get reported to window.onerror. Even if a Promise attaches a rejection handler, that code itself must manually report those errors for them to be logged. See http://www.html5rocks.com/en/tutorials/es6/promises/#toc-error-handling for more information. For example:

window.onerror = function(...) {
  // This will never be invoked by Promise code.
};

var p = new Promise(...);
p.then(function() {
  throw new Error("This error will be not handled anywhere.");
});

var p2 = new Promise(...);
p2.then(function() {
  throw new Error("This error will be handled in the chain.");
}).catch(function(error) {
  // Show error message to user
  // This code should manually report the error for it to be logged on the server, if applicable.
});

One approach to capture more information is to use Protected Entry Points to wrap invocations of Promise methods with a try/catch to report errors. This might look like:

  var _oldPromiseThen = Promise.prototype.then;
  Promise.prototype.then = function protectedThen(callback, errorHandler) {
    return _oldPromiseThen.call(this, protectEntryPoint(callback), protectEntryPoint(errorHandler));
  };

Errors in Promises will go unhandled by default Sadly, errors from Promises will go unhandled by default.

Error handling in Promise polyfills

Promise implementations, such as Q, Bluebird, and Closure handle errors in different ways which are better than the error handling in the browser implementation of Promises.

  • In Q, you can «end» the Promise chain by calling .done() which will make sure that if an error wasn’t handled in the chain, it will get rethrown and reported. See https://github.com/kriskowal/q#handling-errors
  • In Bluebird, unhandled rejections are logged and reported immediately. See http://bluebirdjs.com/docs/features.html#surfacing-unhandled-errors
  • In Closure’s goog.Promise implementation, unhandled rejections are logged and reported if no chain in the Promise handles the rejection within a configurable time interval (in order to allow code later in the program to add a rejection handler).

Long stack traces

The async stack trace section above discusses that browsers don’t capture stack information when there is an async hook, such as calling Promise.prototype.then. Promise polyfills feature a way to capture the async stack trace points which can make diagnosing errors much easier. This approach is expensive, but it can be really useful for capturing more debug information.

  • In Q, call Q.longStackSupport = true;. See https://github.com/kriskowal/q#long-stack-traces
  • In Bluebird, call Promise.longStackTraces() somewhere in the application. See http://bluebirdjs.com/docs/features.html#long-stack-traces.
  • In Closure, set goog.Promise.LONG_STACK_TRACES to true.

Promise Rejection Events

Chrome 49 added support for events that are dispatched when a Promise is rejected. This allows applications to hook into Promise errors to ensure that they get centrally reported along with the rest of the errors.

window.addEventListener('unhandledrejection', event => {
  // event.reason contains the rejection reason. When an Error is thrown, this is the Error object.
});

See https://googlechrome.github.io/samples/promise-rejection-events/ and https://www.chromestatus.com/feature/4805872211460096 for more information.

This is not supported in any other browser.

Web Workers

Web workers, including dedicated workers, shared workers, and service workers, are becoming more popular in applications today. Since all of these workers are separate scripts from the main page, they each need their own error handling code. It is recommended that each worker script install its own error handling and reporting code for maximum effectiveness handling errors from workers.

Dedicated workers

Dedicated web workers execute in a different execution context than the main page, so errors from workers aren’t caught by the above mechanisms. Additional steps need to be taken to capture errors from workers on the page.

When a worker is created, the onerror property can be set on the new worker:

var worker = new Worker('worker.js');
worker.onerror = function(errorEvent) { ... };

This is defined in https://html.spec.whatwg.org/multipage/workers.html#handler-abstractworker-onerror. The onerror function on the worker has a different signature than the window.onerror discussed above. Instead of accepting 5 arguments, worker.onerror takes a single argument: an ErrorEvent object. The API for this object can be found at https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent. It contains the message, filename, line, and column, but no stable browser today contains the «Error» object that contains the stack trace (errorEvent.error is null). Since this API is executed in the parent page’s scope, it would be useful for using the same reporting mechanism as the parent page; unfortunately due to the lack of a stack trace, this API is of limited use.

Inside of the JS run by the worker, you can also define an onerror API that follows the usual window.onerror API: https://html.spec.whatwg.org/multipage/webappapis.html#onerroreventhandler. In the worker code:

self.onerror = function(message, filename, line, col, error) { ... };

The discussion of this API mostly follows the discussion above for window.onerror. However, there are 2 notable things to point out:

Firefox and Safari do not report the «error» object as the 5th argument to the function, so these browsers do not get a stack trace from the worker (Chrome, MS Edge, and IE11 do get a stack trace). Protected Entry Points for the onmessage function within the worker can be used to capture stack trace information for these browsers.

Since this code executes within the worker, the code must choose how to report the error back to the server: It must either use postMessage to communicate the error back to the parent page, or install an XHR error reporting mechanism (discussed more below) in the worker itself.

In Firefox, Safari, and IE11 (but not in Chrome), the parent page’s window.onerror function will also be called after the worker’s own onerror and the onerror event listener set by the page has been called. However, this window.onerror will also not contain an error object and therefore won’t have a stack trace also. These browsers must also take care to not report errors from workers multiple times.

Shared workers

Chrome and Firefox support the SharedWorker API for sharing a worker among multiple pages. Since the worker is shared, it is not attached to one parent page exclusively; this leads to some differences in how errors are handled, although SharedWorker mostly follows the same information as the dedicated web worker.

In Chrome, when there is an error in a SharedWorker, only the worker’s own error handling within the worker code itself will be called (like if they set self.onerror). The parent page’s window.onerror will not be called, and Chrome does not support the inherited AbstractWorker.onerror that can be called in the parent page as defined in the spec.

In Firefox, this behavior is different. An error in the shared worker will cause the parent page’s window.onerror to be called, but the error object will be null. Additionally, Firefox does support the AbstractWorker.onerror property, so the parent page can attach an error handler of its own to the worker. However, when this error handler is called, the error object will be null so there will be no stack trace, so it’s of limited use.

Error handling for shared workers differs by browser.

Service Workers

Service Workers are a brand new spec that is currently only available in recent Chrome and Firefox versions. These workers follow the same discussion as dedicated web workers.

Service workers are installed by calling the navigator.serviceWorker.register function. This function returns a Promise which will be rejected if there was an error installing the service worker, such as it throwing an error during initialization. This error will only contain a string message and nothing else. Additionally, since Promises don’t report errors to window.onerror handlers, the application itself would have to add a catch block to the Promise to catch the error.

navigator.serviceWorker.register('service-worker-installation-error.js').catch(function(error) {
  // error typeof string
});

Just like the other workers, service workers can set a self.onerror function within the service workers to catch errors. Installation errors in the service worker will be reported to the onerror function, but unfortunately they won’t contain an error object or stack trace.

The service worker API contains an onerror property inherited from the AbstractWorker interface, but Chrome does not do anything with this property.

Worker Try/Catch

To capture stack traces in Firefox + Safari within a worker, the onmessage function can be wrapped in a try/catch block to catch any errors that propagate to the top.

self.onmessage = function(event) {
  try {
    // logic here
  } catch (e) {
    // Report exception.
  }
};

The normal try/catch mechanism will capture stack traces for these errors, producing an exception that looks like:

Error from worker
throwError@http://mknichel.github.io/javascript-errors/worker.js:4:9
throwErrorWrapper@http://mknichel.github.io/javascript-errors/worker.js:8:3
self.onmessage@http://mknichel.github.io/javascript-errors/worker.js:14:7

Chrome Extensions

Chrome Extensions deserve their own section since errors in these scripts can operate slightly differently, and historically (but not anymore) errors from Chrome Extensions have also been a problem for large popular sites.

Content Scripts

Content scripts are scripts that run in the context of web pages that a user visits. These scripts run in an isolated execution environment so they can access the DOM but they can not access JavaScript on the parent page (and vice versa).

Since content scripts have their own execution environment, they can assign to the window.onerror handler in their own script and it won’t affect the parent page. However, errors caught by window.onerror in the content script are sanitized by Chrome resulting in a «Script error.» with null filename and 0 for line and column. This bug is tracked by https://code.google.com/p/chromium/issues/detail?id=457785. Until that bug is fixed, a try/catch block or protected entry points are the only ways to catch JS errors in a content script with stack traces.

In years past, errors from content scripts would be reported to the window.onerror handler of the parent page which could result in a large amount of spammy error reports for popular sites. This was fixed in late 2013 though (https://code.google.com/p/chromium/issues/detail?id=225513).

Errors in Chrome Extensions are sanitized before being handled by window.onerror.

Browser Actions

Chrome extensions can also generate browser action popups, which are small HTML pages that spawn when a user clicks a Chrome extension icon to the right of the URL bar. These pages can also run JavaScript, in an entirely different execution environment from everything else. window.onerror works properly for this JavaScript.

Reporting Errors to the Server

Once the client is configured to properly catch exceptions with correct stack traces, these exceptions should be reported back to the server so they can be tracked, analyzed, and then fixed. Typically this is done with a XHR endpoint that records the error message and the stack trace information, along with any relevant client context information, such as the version of the code that’s running, the user agent, the user’s locale, and the top level URL of the page.

If the application uses multiple mechanisms to catch errors, it’s important to not report the same error twice. Errors that contain a stack trace should be preferred; errors reported without a stack trace can be hard to track down in a large application.

Like this post? Please share to your friends:
  • Html error php
  • Html error element
  • Html error codes
  • Html error 520
  • Html audio error