Javascript Errors

JavaScript Error Report Overview

The JavaScript Error Report is your go-to tool for identifying and understanding JavaScript issues that impact the customer experience on your website. This guide walks you through how to navigate and make the most of this report.

What Is a JavaScript Error?

JavaScript errors occur when something goes wrong while your website is trying to execute a script—whether it’s a broken function, an undefined variable, or a third-party integration that misfires. These errors can disrupt key parts of the customer journey, like adding items to the cart, completing checkout, or interacting with site elements.

Even if they don’t completely break a page, JavaScript errors can create friction, slow things down, or silently prevent users from completing actions. That’s why monitoring and resolving them is so crucial for delivering a smooth and reliable shopping experience.

Navigating the Report

Once inside, you'll see a list of JavaScript errors, along with the number of times each occurred within your selected time range.

Grouping Errors

Use the Group By dropdown to view errors by category. For example:
Pages: See which errors are occurring on which pages.

Searching for Errors

Looking for something specific? Use the Search Bar to quickly find a particular error.

Reviewing a Specific Error

Click on any error to access a detailed view. On the top right, you'll find three key tools:

• Explain (Powered by Gen AI)
  Get a clear, jargon-free explanation of what the error means and how it may affect your customer journey.
• Sessions
  Jump straight into session recordings where the error occurred to see its real-world impact.
  You’ll also find the Related Pages tab highlighting the pages where this error appears most often.
• Stack Trace
  View the full stack trace for technical debugging. One-click copy makes sharing easy with your dev team.

Additional Insights

• Traffic Sources
  Understand where the error is happening—by device and browser.
• Error Trend Chart & Rate
  Track how frequently the error is occurring over time, and see what percentage of total site errors it represents.
• Browser Breakdown
  Dive into how different browsers are affected to pinpoint compatibility issues.

Why This Matters

This report gives you the tools to identify, investigate, and resolve JavaScript errors that might be hurting conversions or frustrating users. It's all about clearing the path for a smoother shopping experience.

How does Webeyez collect javascript errors?

The code provided outlines several methods for collecting JavaScript errors, as well as handling them based on whether the feature FEATURE_EXTENSIVE_COLLECTION is enabled or not. Below are the different types of errors and the cases in which they are collected:

1. Basic JavaScript Errors (All browsers)

Event Listener Errors: Errors thrown within event listeners are collected, including errors within the setTimeout, setInterval, and addEventListener callbacks.

Errors are captured using the globalHandler.addEventListener("error", ...) for modern browsers.If the error is not handled by this listener, the fallback this.globalHandler.onerror is used for older browsers.

Collected Cases:

Error Data: { error: message, jsURL: source, lineNumber: lineno, columnNumber: colno, stack: error.stack }

This includes general JavaScript errors such as:

• Uncaught errors from event listeners.
• Errors from script execution (e.g., SyntaxError, ReferenceError).
• Errors from invalid actions in setTimeout, setInterval, or addEventListener.

Fallback for onerror: If the addEventListener does not handle the error, the onerror fallback collects errors using the properties message, source, lineno, colno, and stack.

2. Unhandled Promise Rejections

Event: The code listens for the unhandledrejection event, which occurs when a Promise is rejected, and the rejection is not caught.

Collected Cases:

Error Data: { error: event.reason, jsURL: event.reason.fileName, lineNumber: 0, columnNumber: 0, stack: event.reason.stack }

Captures unhandled promise rejections (from Promise objects) with their error details, including the error message and stack trace if available.

3. Console Errors

Overridden Console Error: The console.error method is overridden to capture errors logged via console.error.

Collected Cases:

Error Data: { error: args[0]?.message || args[0], jsURL: "", lineNumber: 0, columnNumber: 0, stack: args[1]?.stack || args[0]?.stack || args[1] || "" }

Collects errors that are explicitly logged via console.error.

4. Enhanced Collection (Only When FEATURE EXTENSIVE COLLECTION is True)

The following cases only occur if FEATURE_EXTENSIVE_COLLECTION is enabled:

Overriding setTimeout: Wrapping the setTimeout method to ensure that callback functions are executed within a try-catch block. If an error occurs within the callback, it is caught and passed to the error handler.

Collected Cases: Errors in setTimeout callbacks.

Overriding setInterval: Wrapping the setInterval method in the same way as setTimeout to catch errors in callback functions.

Collected Cases: Errors in setInterval callbacks.

Overriding addEventListener: Wrapping the addEventListener method to ensure that errors within event listeners are caught.

Collected Cases: Errors in event listeners (functions or EventListenerObjects).

5. Specific Script Error (Cross-Origin)

Script Error Handling: If the error message is "Script error.", it is assumed to be a third-party script error blocked by CORS, so a more descriptive message "3rd party script error - CORS blocks details" is sent.

Collected Cases:

Error Data: { error: "3rd party script error - CORS blocks details", jsURL: "", lineNumber: 0, columnNumber: 0, stack: "" }

This happens when the error is caught but CORS restrictions prevent accessing detailed information.

6. Worker-Specific Error Handling (For Workers Only)

Error Handling for Workers: If the script is running in a Worker (isWorker = true), the errors are handled differently. Errors are posted to the worker’s postMessage.

Collected Cases:

Error Data: { error: errorData.error, jsURL: errorData.jsURL, stack: errorData.stack }

This includes the same error details as the main thread, but the data is sent to the worker's handler.

Summary of Cases Collected:

• General JavaScript Errors: Captured via window.onerror and addEventListener.
• Unhandled Promise Rejections: Captured via the unhandledrejection event.
• Console Errors: Captured via overridden console.error.
• Enhanced Collection (When FEATURE_EXTENSIVE_COLLECTION is True):
• Errors in setTimeout, setInterval, and event listeners.
• Cross-Origin Script Errors: Descriptive message for CORS-blocked errors.
• Worker-Specific Errors: Errors in Web Workers are posted via postMessage.