Build a Lightweight JavaScript Error Tracker for Small Web Projects

During a developer’s career, many encounter bugs that only appear on the client side because of differing browser versions or types; a web app may run flawlessly locally but fail for users with errors such as interrupted operations or unresponsive interfaces.

Large‑scale services like Airbrake or BugDigger can automatically track such errors, but they are overkill for small projects where resources and budget are limited, and clients may not be willing to pay for them.

Instead, you can implement a lightweight custom error tracker directly in your JavaScript code. By extending the native Error prototype with an ErrorHandler object, the tracker captures uncaught exceptions, sends a request to a server, records the message in a database, assigns a unique ID, and returns that ID to the client for notification.

Step‑by‑Step Implementation

1. Create the ErrorHandler constructor

Define a function that inherits from Error and contains the error‑handling logic.

2. Design the database schema

The table stores the following columns:

Id (primary key)

Message (error description)

ClientName (to distinguish different customers)

Timestamp

AdditionalInfo (optional)

Note: Most session data is extracted to identify users; if more than five users are active, it is assumed to be a specific group interaction. The example uses MS SQL as the database server.

3. Implement the PHP controller

The controller receives the error report via an HTTP request and inserts it into the database.

When handling multiple clients, include the client name in the request so the server can route the error to the correct table.

4. Instantiate and attach ErrorHandler

Create an ErrorHandler object that inherits from the local Error prototype and assign its handling function to window.onerror to catch severe browser errors.

5. Manually throw exceptions

In a try/catch block, invoke the following code to report a custom error:

This approach provides a sufficient low‑level error‑tracking capability for small client‑side websites and applications. While it may satisfy many customers, acceptance varies, so use it judiciously.