JavaScript Interview Questions and Answers: Coding and putting all together

Q. How would you go about implementing a mechanism to log clien-side JavaScript errors to the server-side log?

A. Generally a Web application will log any exceptions that occur during server-side processing. These logs are key in identifying and debugging issues with the application. But when you build rich client-side applications with lots of JavaScript code, it is really worth implementing a mechanism to log all the client side errors to the server side. The following code sample demonstrates an AJAX POST being made from the client side to the server side with the data -- error msg, the URL of the JavaScript file, and the line number where the error occured.

(function () {
    'use strict'; // throws more xecpetions, prevents, or throws errors, when relatively "unsafe" actions are taken such as accessing global object, 
                 // and disables features that are confusing or poorly thought out.

  //Return if the project and module are already present
  if (window.MYPROJECT && window.MYPROJECT.errorHandler) {
   return;
  }
 
 // Create MYPROJECT namespace if does not exist
  if (!window.MYPROJECT) {
   window.MYPROJECT = {};
  }
 
  // Create MYPROJECT.errorHandler namespace if does not exist
  if (!window.MYPROJECT.errorHandler) {
   window.MYPROJECT.errorHandler =  (function () {
 
    var config, init, logError;                             
 
    config = {
     timeout: '5000',
     errorLogURL: '/ApplicationName/LogError'   //default URL 
    };
 
    /**
     * private function to register the logError handler
     */
    init = function (errorLogURL) {
     window.onerror = logError;                                           //the onerror event on windows invoke the logerror function
     config.errorLogURL = errorLogURL || config.errorLogURL;   // if not defined use default URL
    };
 
    /**
     * private function to log error
     */
    logError = function (msg, url, lineNo) {
     
    //makes an ajax post to the server using the jQuery library
     jQuery.ajax({
      url: config.errorLogURL,                                  //URL for the AJAX POST 
      type: 'POST',
      data: {'msg' : msg, 'url' : url, 'lineNo' : lineNo},  //log msg, the URL of the .js file containing the error, and the line number of the error
      timeout: config.timeout
     });
 
     return false;
    };
 
            //public methods that can be invoked from outside 
    return { init: init, logError: logError };
   
   }());
  }
}());

The above code can be used as follows.

STEP1: Initialize when the document loads

jQuery(document).ready(function () {
 'use strict';
 MYPROJECT.ajaxErrorHandler.init('/myapp/logError');
});

STEP2: Log the error where required

if(someErrorCondition) {
    MYPROJECT.errorHandler.logError('Error message is .... ', 'test.js','36');
}

or

try {
    //some logic
} catch (ex) {
       MYPROJECT.errorHandler.logError(ex.message, ex.fileName, ex.lineNumber);
}

On the serverside, you could write a Java Servlet to recieve and process this ajax request by writing to the serevr log using a library like log4j.

package somepkg;
 
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;

public class ErrorLoggingServlet extends HttpServlet {

 private static Logger logger = Logger.getLogger(ErrorLoggingServlet.class);

  public void service(HttpServletRequest req, HttpServletResponse res)
             throws ServletException, IOException {
  
        //extract the request parameters  
  String msg = req.getParameter("msg");
  String file = req.getParameter("url");
  String lineNo = req.getParameter("lineNo");

   // extract the user-agent, ie browser.
   String userAgent = req.getHeader("user-agent");
        
  //log the client-side error to the server side log file
  logger.error(String.format("JSError: %s \n%s(Line:%s)\nBrowser: %s",
    trim(msg), trim(file), trim(lineNo), trim(userAgent)));
 }
 
 /**
   * Trim the input parameters before logging to avoid unfiltered input 
  * from the client side filling up the log files.
  */
  private String trim(String in) {
  return (in != null) ? in.substring(0, 100) : "";
  }
}

Q. How would you go about making an AJAX call using a JavaScript framework like jQuery to retrieve json data?
A. The sample code below uses 3 files

• test3.html -- The html file with the button to click
• test3.js -- The JavaScript file that makes use of the jQuery framework to make the AJAX call.
• test3.json -- The json data file containing data to be retrieved via AJAX requests.

Firstly, the test3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js">
</script>
<script language="javascript" type="text/javascript" src="test3.js">
</script>


<title>Insert title here</title>
</head>
<body>
  <form>  
Click the button to fetch json data:  
     <input id="go" type="button" value="go"/>  
  </form>

</body>
</html>

Note that jquery-1.4.2.js is jQuery library.


Next, the the test3.json file

{"data" :
 { 
  "topics": 
          [
              "Java",
     "JEE",
     "JavaScript",
     "Unix"
          ]
 }
} 

Finalyy, the test3.js

$(document).ready(function(){
  $('input#go').click(function() {
 $.ajax({
  type: "GET",
  url: "http://localhost:8080/webdav/test3.json",
     beforeSend: function(xhr){
          if (xhr.overrideMimeType)
         {
           xhr.overrideMimeType("application/json");
         }
       },
   dataType: "JSON",
 

  success: function(data) {
     console.log(data);
           var obj = jQuery.parseJSON(data);
     alert(obj.data.topics);
  } 
    
  
 });
  
  });
});

To run the above sample files, you need an HTTP Web server. I downloaded and installed the tomcat server (version 5), and copied the above 3 files to the sample webapp that comes with the installation. The copied folder is <tomcat-home>/webapps/webdav. The "webdav" is the web appplication context. Copy the 3 files to "webdav". Start the tomcat server via <tomcat-home>/bin/startup.bat (or startup.sh for Unix). You can now open up a browser like Firefox and enter the URL as http://localhost:8080/webdav/test3.html invoke test3.html. Click on the button, and you will the json data getting alerted.


You could also check the webconsole in Firefox via Tools --> Web Developer --> Web Console (available in version 4.0 onwards). Also, download the Firebug plugin, and open the plugin. Go to the "Net" and then "XHR" tab in the plugin to view the AJAX requests being made. Also, feel free to get more familarized with the firebug, which is very handy for debugging your Web application on client side.

More JavaScript Q&A

• JavaScript Q&A: Working with the objects
• JavaScript Interview Q&A: Closure 
• JavaScript Interview Q&As: Function.call, Function.apply, and Callback functions 
• JavaScript Q&A: Coding