Experience Real-World Bugs

This fake e-commerce page has intentionally planted bugs. Trigger them and watch BugSpotter capture everything automatically — then check the Admin Panel to see the full report.

How this demo works

  1. Click a "Trigger Bug" button below to simulate a real-world bug
  2. BugSpotter SDK automatically captures the error, console logs, network requests, and session replay
  3. A bug report is submitted to the BugSpotter API
  4. Open the Admin Panel to see the full report with screenshot, replay, and logs
  5. If Jira is connected, a ticket is auto-created with all context attached

Bug Scenarios

JS Crash

Checkout Form Crash

Click "Buy Now" on a product. The checkout form has a bug that throws a TypeError when processing the payment — a common production issue.

API Error

Failed Product Load

Simulates a backend API returning 500 when fetching products. The SDK captures the failed network request and the console error.

Performance

Slow Page Navigation

Navigate to "Orders" and experience a 4-second load. The session replay captures the user waiting, and network logs show the slow request.

Unhandled Error

Form Validation Crash

Submit the checkout form with empty fields. Instead of showing a validation error, the code throws an unhandled exception.

404 Error

Missing Product Image

A product image fails to load (404). The broken image is visible in the session replay and the failed request appears in network logs.

UX Issue

Unresponsive Button (Rage Clicks)

A "Submit" button appears to do nothing. Click it rapidly to simulate user frustration — the replay captures the rage click pattern.

Submit Order

More Bug Scenarios

JS Crash

Malformed JSON Response

API returns invalid JSON. The app tries to parse it and crashes with a SyntaxError.

JS Crash

Recursive Render Loop

A component update triggers itself recursively, causing a stack overflow.

JS Crash

Missing DOM Element

Code references a DOM element that was removed or never rendered. TypeError on null.

JS Crash

Array Index Error

Accessing an array element beyond its length, then calling a method on undefined.

JS Crash

Invalid Date Format

Parsing a malformed date string and calling toISOString() throws a RangeError.

CORS Error

Cross-Origin Blocked

Fetch to a cross-origin endpoint without CORS headers. Request is blocked by the browser.

Timeout

Request Timeout

API call aborted after 2 seconds via AbortController. Simulates a hung backend.

Auth Error

401 Unauthorized

Request to a protected endpoint with an invalid token. Server returns 401.

Rate Limit

429 Too Many Requests

Rapid API calls trigger rate limiting. Server returns 429.

WebSocket

WebSocket Connection Failed

Attempt to open a WebSocket to an invalid host. Connection error in console.

Performance

Main Thread Blocked

A synchronous computation blocks the main thread for 3 seconds. UI freezes completely.

Performance

DOM Node Explosion

Inserting 5000 DOM nodes in a tight loop causes layout thrashing and jank.

Performance

Memory-Heavy Canvas

Creating an oversized canvas (8000×8000) to process an image. High memory usage.

Storage Error

localStorage Quota Exceeded

Writing too much data to localStorage. Throws DOMException: QuotaExceededError.

State Bug

Stale State in Handler

Click handler captures old state value. Displayed count doesn't match actual count.

CSS Bug

Dropdown Behind Header

A dropdown menu renders behind the sticky navigation bar due to z-index conflict.

CSS Bug

Content Layout Shift

Late-loading content pushes the page down, causing a jarring layout shift.

JS Crash

Unhandled Promise Rejection

A promise rejects without a catch handler. Triggers the global unhandledrejection event.

Memory Leak

Event Listener Leak

Adding 100 scroll listeners without cleanup. Memory grows, performance degrades.

Sensitive Data Protection (v2.1)

BugSpotter v2.1 adds blockSelectors to hide DOM elements from session replay, and data-bugspotter-exclude to exclude elements from screenshots. Try triggering a bug report — the blocked sections below will appear as placeholders in the replay.

blockSelectors

Portfolio (blocked from replay)

AAPL+2.4%$189.50
GOOGL-0.8%$142.30
MSFT+1.2%$415.80
Total: $12,450.00

This section uses blockSelectors: ['.sensitive-portfolio'] — hidden from replay

data-bugspotter-exclude

Account Info (excluded from screenshots)

This section uses data-bugspotter-exclude — hidden from screenshots

Products

💻

Wireless Keyboard

$49.99

🖱

Ergonomic Mouse

$34.99

🎧

Noise Cancelling Headphones

$89.99

📱

Phone Stand

$19.99