How to Write a Bug Tracker in JavaScript

I think nearly every developer has been in a situation in which a web application runs perfectly on the own local machine but not on the client one. Clients are complaining about disrupted actions and unresponsive interfaces (which is a hint to overthink your program structure). In my experience, most of these failures are caused by different browser versions. I mean, you give your best and test your application through all the variations, but nevertheless, the client has issues. Especially when you’re writing business applications, it’s a bad thing. The client calls you and you don’t know how to fix the error because on your machine everything works fine. It gets even harder when the error occurs in rare situations.

For these cases, some companies have created automated bug tracking solutions such as Airbrake or BugDigger. However, what if we have only a small project where we don’t need such a huge solution? Most importantly, what do we do if we or the customer don’t want to pay for it because it wouldn’t be profitable enough?

We could create our own bug tracker within our JS source code.

Our Goal

The goal is to write an own ErrorHandler-Object based on the Error-Prototype that automatically sends a request to a server, writes down the error message in a database, creates a ticket number for the customer, and gives the new ticket number to the client who gets a notification with it displayed.

Prepare the Functionality

First, let's create a function to handle our Error-Handling-Logic. It will be our Constructor-Method for the ErrorHandler-Object.

function CustomError(err)
{
  this.customer = 'YOUR_CUSTOMER_NAME';
  this.message = err || 'critical error without alert text';

  var http = new XMLHttpRequest();
  var url = base_url + "/customerror/insert"; //my php controller 
  var params = "customer=" + this.customer + "&message=" + this.message; //set params
  http.open("POST", url, true);

  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //set content type

  http.onreadystatechange = function()
  {
    if (http.readyState == 4 && http.status == 200)
    {
      showNotification(http.responseText); //custom method; for quick tests you could use alert();
    }
  }

  http.send(params);
}

My table scheme contains the following columns:

Note: I take the user from the session data most of the time. Just in case there are more than five people working on that tool, you know a particular person to talk to. The database I use here uses MS SQL.

My PHP-controller, which receives the request, looks like this:

public function insert() {

  $date = new DateTime("now");
  $data = array(
    'customer' => $_REQUEST['customer'],
    'alert_text' => $_REQUEST['message'],
    'user_id' => $this->session->userdata('user_id'),
    'date_time' => $date->format("Y-m-d\TH:i:s")
  );

$id = $this->error_model->insert($data);

return $id;
}

In my opinion, these values are more than acceptable for small-sized clients, websites, and apps.

To differentiate between your customers, the request contains also the customer name if you decide to route more than one customer onto the table.

Create the ErrorHandler-Object

In the next step we create our ErrorHandler-Object which inherits from the native Error-Prototype and assign our Error-Handling-Logic to it as a constructor.

CustomError.prototype = Object.create(Error.prototype); //inherit native error-prototype
CustomError.prototype.constructor = CustomError; //set the constructor of our object

Let JavaScript Use our ErrorHandlerAutomatically

Lastly, we attach the ErrorHandler-Object to the window.onerror event to be sure that it gets called every time an critical error occurs in the browser.

window.onerror = function(errorMsg, url, lineNumber, column, errorObj)
{
throw new CustomError('Error: ' + errorMsg + ' - Script: ' + url + 
                              ' - Line: ' + lineNumber + ' - Column: ' + column + 
                              ' - StackTrace: ' + errorObj);
}

To throw a manual exception you can just call the following in a try/catch-block:

throw new CustomError('your_error_text');

You're Done!

I think this is a nice feature for developers who want to offer customers a small level of assurance with a low level of effort. Remember: When the customer is happy, you should be, too!