Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Write a Bug Tracker in JavaScript

DZone's Guide to

How to Write a Bug Tracker in JavaScript

If you're working on a small project or don't have the funds to pay for an automated bug tracking solution, you can create your own bug tracker in your JS source code.

· Performance Zone
Free Resource

Transform incident management with machine learning and analytics to help you maintain optimal performance and availability while keeping pace with the growing demands of digital business with this eBook, brought to you in partnership with BMC.

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:

Customer Message date_time user_id* Solved
nvarchar(20) nvarchar(2000) DateTime nvarchar(20) bit (false per default)

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! 

Evolve your approach to Application Performance Monitoring by adopting five best practices that are outlined and explored in this e-book, brought to you in partnership with BMC.

Topics:
javascript ,bug tracking ,performance ,web app ,tutorial

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}