DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
What's in store for DevOps in 2023? Hear from the experts in our "DZone 2023 Preview: DevOps Edition" on Fri, Jan 27!
Save your seat
  1. DZone
  2. Data Engineering
  3. Databases
  4. How to Write a Bug Tracker in JavaScript

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.

Patrick Kuenzl user avatar by
Patrick Kuenzl
·
Feb. 01, 17 · Tutorial
Like (1)
Save
Tweet
Share
9.16K Views

Join the DZone community and get the full member experience.

Join For Free

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! 

Database JavaScript Tracker (business software)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Why Every Fintech Company Needs DevOps
  • Unlocking the Power of Polymorphism in JavaScript: A Deep Dive
  • Last Chance To Take the DZone 2023 DevOps Survey and Win $250! [Closes on 1/25 at 8 AM]
  • Load Balancing Pattern

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: