Log Javascript Errors Part 2

So far we have seen how to trap the javascript errors in Part 1. Now we have
the data. We will see now, how to send data to the server using AJAX.

Send Data to Server

ajaxCtrl(
    function(){
        return true;
    },"ajxerrorLogger.php",theData
);

The remote file is “ajxerrorLogger.php”.

I?ve used PHP for this.
Instead you can use ASP, JSP also.

This is used to receive the
data sent from the JavaScript error handling function. That’s it.
Our JavaScript errors are now sent to the server silently.

What Next? In the server side, we have to code the “ajxerrorLogger.php”

Receive Data and Write into a File

if($_POST && $_POST['file']!=''){
    $filename = "./errlogs.txt";
    $fh = fopen($filename,"a+");

    //the content is in the form
    //Date    File    LineNo    Error Message
    //(tab delimited)
    $fcontent = date("d/m/Y h:i:s", mktime())."\t".
    $_POST['file']."\t".$_POST['line']."\t".$_POST['err']."\r\n";
    if (is_writable($filename)) {
        if (fwrite($fh, $fcontent) === FALSE) {
        }
        fclose($fh);
    }

}

$fh = fopen($filename,"a+");

Opens the File errlogs.txt in append mode. So the new errors
will be added into the file without overwriting it.

We are going to save the data ( js errors ) as tab
delimited. For the sake reference we can store the date and time also.

$fcontent=date("d/m/Yh:i:s", mktime()). "\t".
$_POST['file']. "\t" .$_POST['line'].
                "\t".$_POST['err']."\r\n";

Now the data is ready to be written into the file.

fwrite($fh, $fcontent)

writes the data into the file. For
extra error handling we can check,

if the file is writable.

          if (is_writable($filename)) {

Will check and return TRUE if the file is writable. Then we
can write the data. That’s it. We
have successfully logged our JavaScript
errors in the server silently and we can see the errors
that are occurring in
the client side, while they are using the site.

See the Errors real-time?

How? We have to add a small, separate PHP file to view the logs
we have generated above. The script will read the file and show
the contents.

if (file_exists($filename) && is_readable($filename)) { //if exists and readable
    $contents = fread($fh,filesize ($filename)); //read the whole file
    fclose($fh); //and close
}
$splitcontents = explode($linedelim, $contents);
...

Add some lines to show each line read from the file. We are done.

Summary

  • We have written a JavaScript error trapping code, which will suppress the errors
  • Added Ajax Code To send the trapped errors to the server
  • Receive the data and store into a flat file using PHP
  • Added a small script to see the logged JavaScript errors remotely.

Improvements

  • The script can be further improved by adding capability to send the logs in mail to the administrator.
  • Instead of writing into a flat file, we can store into a database.
  • The same thing can be done using PHP as well as ASP, JSP also.

Alternative Way

Every coin have two sides. So do we. We can do the same thing without using AJAX. How?
An easy of doing this is to use an image. Yes. “img” tag will do.
var img = new Image();
img.src = “/ajxerrorLogger.php?” + theData;
A Note of caution and convenience, This can be used across the domains also.

Download

The entire source code and a ready to use sample is here.

That’s it. Have fun.

2 Replies to “Log Javascript Errors Part 2”

  1. Hi Kumar S,

    I read your post on Experts Exchange about “Add controls into tabs of a tab control in win32 dialog”. I am doing a similar thing. I very new to programming and so I was wondering if you could post your solution that you figured out. I am not able to add controls inside the tab pages.

  2. thanks for your grate tutorial.

    Can I use this method in my PC.I have create a page call test.html with some java code.I need to connect ajxerrorLogger.php with my java script as a external link(http://www.mydomain.com/ajxerrorLogger.php).
    Is it possible to do that.
    I didn’t use ajax.js with my test.html page.I added theData=”my name is narada”; but nothing happen

    then I added
    var file_loc=”my name”;
    var line_no=”is”
    var msg=”narada”

    theData = “file=”+file_loc+”&line=”+line_no+”&err=”+msg;

    please help me to correct this problem.
    I uploaded ajxerrorLogger.php and errtext.txt to my server.

    thanks

Leave a Reply to Narada Dilshan Cancel reply

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