Log JavaScript Errors – Part 1

Introduction

Recently in one of my projects, I’m informed by my QA team
that, in some pages they?re experiencing crashes, or some pages not functioning
properly after sometime.

Our team looked for options where there can be a code
generating errors. And the feedback I got, from the QA team was not helpful to
reproduce the error. But there is no doubt to look for areas only in JavaScript
coding, and not other than JavaScript coding.

Normally while releasing a project, what I would do is, just
escape/bypass the JavaScript errors. That means, whenever there is a JavaScript
error, it will not be reported to the user and they are suppressed.

Background

Following is the function, we can normally use to suppress the JavaScript errors.

var isDebugging = true;
function ErrorSetting(msg, file_loc, line_no) {
    var e_msg=msg;
    var e_file=file_loc;
    var e_line=line_no;
    var error_d = "Error in file: " + file_loc +
                          "\nline number:" + line_no +
                           "\nMessage:" + msg;
    if(isDebugging)
        alert("Error Found !!!\n--------------\n"+error_d);

     return true;
}
window.onerror = ErrorSetting;

window.onerror = ErrorSetting; this line will call the ‘ErrorSetting’
function, whenever there is a JavaScript error. And the function will return
true. So the user will not get JavaScript
error notifications and won’t be
annoyed.

While in the development stage the variable ‘isDebugging’ is
set as true, and we can get
the JavaScript alerts, notifying the error with the
line no, the filename and the error message.

The above method is commonly used by many web developers.
This is the same I were using in my previous projects.

But in this particular project, I have to get error messages
in the real-time when they are using, immediately in my mind I got an idea of
logging the errors. (Later I searched thru the web and there are many
developers have done it like this!? 🙁
)

But logging into a file in the client side is having two
issues.
1. Not supported in browsers other than IE (Only using
ActiveX Objects)
2. The files will be stored in the client side not in
server.

So I used AJAX,
to silently send the JavaScript errors to the server, where the errors
Will be, written in a flat file. And later we can view the
file for error logs.

What next ?

Started adding AJAX
code into the function.

Trap Errors and Prepare the Data

var isDebugging = false;
var logJsErrors = true;
function ErrorSetting(msg, file_loc, line_no) {
    var e_msg=msg;
    var e_file=file_loc;
    var e_line=line_no;
    var   error_d = "Error in file: " + file_loc +"\nline number:"
            + line_no +
                        "\nMessage:" + msg;

    if(logJsErrors){
        theData = "file="+file_loc+"&line="+line_no+"&err="+msg;
        ajaxCtrl(
            function(){
                return true;
            },"ajxerrorLogger.php",theData
        );
    }

    if(isDebugging)
        alert("Error Found !!!\n--------------\n"+error_d);

     return true;
}
window.onerror = ErrorSetting;

What the above function does?
if(logJsErrors){ //this line is used for enable or disable
Logging.

The line no, file name and the error message are combined as
key value pair.theData =
“file=”+file_loc+”&line=”+line_no+”&err=”+msg;

Now the data is ready, we can now call the AJAX function that will send the data to the
server.

Continued. in Part 2

6 Replies to “Log JavaScript Errors – Part 1”

  1. Yes. Surely it will be helpful.
    Thanks for your suggestion.

    seen your presentation @ kerala you did sometime back, @ slideshare. That was good. Keep it up.

  2. Load balancing solutions for servers optimize the operations that fall within the design and parameters of the server. The solutions ensure the availability of quality application twenty four hours a day, seven days a week. The solutions ensure efficient and timely web traffic distribution. They also take care of prioritization and user specific intrusion prevention that is multi- gigabit in nature.

  3. Instead of using ajax to log errors on server side, you can set image source to point to php script and pass the info as url parameters. for ex:

    var img = new Image;
    img.src = log.php?message=+ message + “&….

  4. You might find it interesting that we?re developing a SaaS for this. It installs like google analytics. muscula we?ve found that logging the errors is only a small part of having a good js error log, also grouping the errors is a hard problem to solve, because of all the browser differences, and we?ve also had to put a lot of work into filtering away all the noise, like errors from browser plugins.

    We do more than onerror logging, But onerror logging is better than nothing

Leave a Reply to Allan Ebdrup Cancel reply

Your email address will not be published. Required fields are marked *