Search code examples
javascriptonerror

JavaScript process all errors in window.onerror


I am trying to process all errors in a page with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            window.onerror = function (e, url, line) {
                var data = '{"error":"' + e + '","line":"' + line + '","uri":"' + url + '","client":"' + navigator.appName + '","version":"' + navigator.userAgent + '"}';
                var call = "http://myserver.com/sandbox/error.aspx?e=" + data;

                var jse = document.createElement("script");
                var head = document.getElementsByTagName("head")[0];
                jse.setAttribute("type", "text/javascript");
                jse.setAttribute("src", call);
                head.appendChild(jse);
                alert("fail");
                return true;
            }
        </script>
    </head>
    <body>
        <script type="text/javascript">
            var b;
            a = 5; //a is undefined
            b = 5;
            c = 8; //c is undefined
        </script>
    </body>
</html>

This works, with the Internet Explorer developer tool (F12) i can see the request:

http://myserver.com/sandbox/jserror.aspx?e={"error":"'a' is undefined","line":"23","uri":"file:///C:/User/user/Desktop/Data/JSerror/javascript-error.htm","client":"Microsoft Internet Explorer","version":"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; Zune 4.7)"}

The HTTP status is 200 OK, and the data is delivered to the server. Problem is that only the first error gets processed, if i do this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            window.onerror = function (e, url, line) {
                var data = '{"error":"' + e + '","line":"' + line + '","uri":"' + url + '","client":"' + navigator.appName + '","version":"' + navigator.userAgent + '"}';
                var call = "http://myserver.com/sandbox/error.aspx?e=" + data;

                var jse = document.createElement("script");
                var head = document.getElementsByTagName("head")[0];
                jse.setAttribute("type", "text/javascript");
                jse.setAttribute("src", call);
                head.appendChild(jse);
                alert("fail");
                return true;
            }
        </script>
    </head>
    <body>
        <script type="text/javascript">
            var b;
            a = 5; //a is undefined
            b = 5;
         </script>
         <script type="text/javascript">
            c = 8; //c is undefined
        </script>
    </body>
</html>

Then the first error from the first script tag and the first error from the second script tag is processed, i would like to process all errors, not just the first one from each script tag.

Is this possible?


Solution

  • The issue with what your doing is 2 fold.

    First to answer your question, any large error you would like to process will by it's nature stop the rest of the code from running. So if you would like to continue with your code after you handle an error you will need some type of callback function defined in your error handling.

    So you could do something like this:

    <script type="text/javascript">
            window.onerror = function (e, url, line) {
                var data = '{"error":"' + e + '","line":"' + line + '","uri":"' + url + '","client":"' + navigator.appName + '","version":"' + navigator.userAgent + '"}';
                var call = "http://myserver.com/sandbox/error.aspx?e=" + data;
    
                var jse = document.createElement("script");
                var head = document.getElementsByTagName("head")[0];
                jse.setAttribute("type", "text/javascript");
                jse.setAttribute("src", call);
                head.appendChild(jse);
                alert("fail");
                return do_work(false);
            }
    </script>
    
    <script type="text/javascript">
    function do_work(bool){  
        if(bool == true){
            var b;
            a = 5; //a is undefined
            b = 5;
            c = 8; //c is undefined
       }else{
           //skip to new function since there was an error here!
       }
    }
    </script>
    

    Or something along these lines.

    The second is with your specific example.

     a = 5;
     c = 8;
    

    Are not actually errors in javascript. If you fail to use var before declaring a variable it gets added to the global scope, you could in another script do this:

    alert(window.a);  // would alert 5
    

    The fact that IE is alerting you that a is undefined is a quark of IE.