js-bug-watch

js-bug-watch is a lightweight JavaScript module designed to help developers monitor and track bugs within their web applications. It provides a simple yet effective way to catch and log errors, making debugging and maintenance easier.

Features

• Error Monitoring: Capture and log errors that occur during the execution of your JavaScript code.
• Customizable: Easily configure error logging behavior based on your application's needs.
• Browser Compatibility: Compatible with major web browsers, ensuring consistent error tracking across different platforms.
• Minimal Overhead: Designed to have a minimal impact on your application's performance.
• Integration-Friendly: Can be easily integrated into existing projects and development workflows.
• User-Friendly: Provides meaningful error information, aiding developers in identifying and resolving issues quickly.

Getting Started

Installation

Webpage

Just include the script in webpage -

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js-bug-watch.min.js">

Configuration

data-server-uri: URI on app host where to post the error requests data-request-chunk-size: chunk size the request to be broken in case of big screenshot size

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js-bug-watch.min.js" data-server-uri="/onerror" data-request-chunk-size="100"></script>

NPM

You can install js-bug-watch via npm:

npm install js-bug-watch

Usage

import BugWatch from 'js-bug-watch';

BugWatch.configure({
    enabled: true,
    serverUri: '/sendMyErrorHere',
    requestChunkSize: 256
});

try {
  // Your application code that might throw an error
  const result = someFunction();
} catch (error) {
  BugWatch.saveScreenshotToServer('Code error', error);
}

Request Details

js will send url encoded form data with follwing attributes - body: chunk of base64 encoded request current_page: chunk number of base64 encoded request total_pages = totals chunks request was split into

Finally, the whole request once received, can be decoded back to below interface -

interface Screenshot {
    event: Event | string;
    source?: string;
    lineno?: number;
    colno?: number;
    error?: Error;
    htmlString: string
    interactionId: `${string}-${string}-${string}-${string}-${string}`;
    image: string;
}