Console Error Count Badge

WHAT IT DOES

Console Error Count Badge intercepts all JavaScript errors that occur on a webpage by overriding the `console.error` method and the `window.onerror` event handler, then displays the total error count as a badge in the corner of the screen. Click the badge to open a detailed error log panel showing each error's message, source URL, line number, stack trace, and timestamp. The extension also catches unhandled promise rejections and provides a notification when errors are first detected. The badge updates in real-time as new errors occur, and the error log can be cleared at any time. This is an essential tool for developers debugging client-side code, QA engineers testing web applications, and anyone who wants to monitor the health of a web page.

WHERE IT RUNS

The extension works on every website with JavaScript execution, including complex single-page applications, traditional websites, and any page where JavaScript errors may occur. It runs locally in your browser, intercepting error messages at the console level without modifying the page's underlying functionality. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically begins intercepting errors (if enabled). A badge appears in the corner of the page showing the error count. Click the badge to open the error log panel, which displays all captured errors with their messages, source URLs, line numbers, and stack traces. Click "Show stack" on any error entry to expand the full stack trace. To clear the error log, click the "Clear" button in the log panel, or use the "Clear Error Log" button in the extension panel. To customize the experience, open the extension panel and adjust the badge position (Top-left, Top-right, Bottom-left, Bottom-right). Toggle "Show error count badge" to show or hide the badge. Toggle "Auto-show log on first error" to automatically open the error log when the first error is detected. Set the maximum number of errors stored (10-500). For per-site customization, enable or disable the extension on specific websites using the per-site controls.

THE ACTUAL MECHANISM — CONSOLE INTERCEPTION WITH ERROR AGGREGATION AND STACK TRACE CAPTURE

The extension uses two complementary interception strategies. First, it overrides `window.console.error` by storing the original method and replacing it with a wrapper function. The wrapper captures the error message, serializes any non-string arguments (using `JSON.stringify` for objects), stores the error in the log, and then calls the original `console.error` to preserve standard console behavior. Second, it attaches an event listener to the `window` object for the `error` event. This captures errors that may not go through `console.error`, including syntax errors and runtime exceptions. The event handler extracts the error message, filename, line number, column number, and stack trace (from `e.error.stack`). Additionally, the extension listens for `unhandledrejection` events to catch unhandled Promise rejections. All errors are stored in an array with timestamps, limited to the user-defined maximum (default: 100 entries). The badge updates immediately when a new error is captured, and the error log can be rendered on demand by iterating through the stored errors and building a styled list. The extension preserves the original error handlers, restoring them when the extension is disabled.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, show error log button, clear error log button, position selector, badge toggle, auto-show toggle, max errors input, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. Intercepting `console.error` and `window.onerror` may interfere with existing error handling logic on some websites—the extension preserves the original handlers and calls them after capturing errors to minimize interference. The extension captures errors that occur after it loads; errors that occur during page initialization may not be captured. Some browser extensions or scripts may also intercept console methods, which could cause conflicts. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All error logs and settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.