Shopify JavaScript error tracking

Find and fix the JS errors that are costing you sales

Bloodhound captures every JavaScript error on your Shopify storefront — runtime exceptions, promise rejections, failed network requests — grouped into actionable issues with revenue impact estimates.

Install free →

Why JavaScript errors are an ecommerce crisis in slow motion

JavaScript powers everything on a modern Shopify store: the product gallery, the add-to-cart button, the cart drawer, the upsell widgets, the checkout progress bar. When JavaScript breaks, functionality breaks. When functionality breaks silently — and it almost always breaks silently — you lose sales without knowing why.

The browser console is the only place these errors surface natively, and your customers' consoles aren't connected to your analytics. You need a monitoring script running on every page load, capturing errors as they happen, and sending them to a dashboard you can act on.

What Bloodhound captures on Shopify

Bloodhound's monitoring script handles four categories of JavaScript error:

Runtime exceptions

Captured via window.addEventListener('error'). These are thrown when JavaScript code fails to execute: a TypeError on a null reference, a ReferenceError when a variable doesn't exist, a SyntaxError in an eval. Each event includes the error message, the source file URL, the line and column number, and the full stack trace (up to 2KB).

Unhandled promise rejections

Captured via window.addEventListener('unhandledrejection'). Modern Shopify themes and apps use async/await and Promises extensively. When a Promise rejects without a catch handler, it's swallowed silently in older code and throws an unhandledrejection event in newer environments. These are some of the most common and most damaging errors in modern storefronts.

Network failures

Bloodhound wraps the native fetch() API to intercept 4xx and 5xx responses and log them as error events. A failed cart API call, a 404 from a product recommendations endpoint, a 500 from a third-party service — all captured with the URL, status code, and timing data.

Console errors

Script conflicts, deprecated API warnings, and third-party error messages that appear in the browser console but don't throw a catchable exception. Bloodhound intercepts console.error calls to capture these — particularly useful for diagnosing app conflicts.

Deduplication and grouping: from noise to signal

Raw error events are useless at scale. If an error fires on every page load across 10,000 daily sessions, you don't need 10,000 events — you need one issue with a count of 10,000 and a trend chart. Bloodhound groups errors by signature: a combination of the error message, source file, and stack trace fingerprint. Each unique signature becomes one issue.

Issues have a lifecycle: new (first seen), active (ongoing), resolved (marked fixed), regressed (returned after being resolved). Auto-regression detection is the most important feature here — if you fix a bug in a theme update and it comes back three deploys later, Bloodhound tells you immediately.

Error context: everything you need to reproduce a bug

For every error, Bloodhound captures:

  • Error message and type
  • Source file URL (first-party vs third-party classified)
  • Line number, column number
  • Full stack trace
  • Browser (Chrome, Safari, Firefox, Edge) and version
  • Device type (desktop, mobile, tablet)
  • Screen width
  • Connection speed (effective type: 4G, 3G, 2G)
  • Page URL and Shopify template type
  • Anonymous session ID
  • Timestamp

The device and browser breakdown is particularly important. Many Shopify JavaScript errors only manifest on specific devices — mobile Safari is by far the most common culprit, due to its stricter handling of certain JS APIs and its lag behind Chrome on web standard support.

Revenue impact: prioritising what to fix

You can't fix everything immediately. Revenue impact attribution gives you a rational basis for prioritisation. Bloodhound calculates: affected sessions × your conversion rate × your AOV = estimated revenue at risk per issue. Fix the issue at the top of the list first.

This is a fundamentally different way of thinking about error monitoring. Instead of triaging by frequency or severity category, you triage by money. A low-frequency error on the checkout page that affects high-value sessions might matter more than a high-frequency console warning in the footer.

Shopify-specific error patterns to watch for

After monitoring hundreds of Shopify stores, certain error patterns come up repeatedly:

  • Liquid/JS variable injection. Theme developers often inject Liquid variables into JavaScript strings. When a product title contains a single quote or a backslash, this breaks the surrounding JS string literal. Classic syntax error, rarely caught in testing because it only triggers on specific product data.
  • App conflicts. Two apps both wrapping fetch() or overriding document.querySelector produce cascading failures that are hard to diagnose. Bloodhound's third-party origin classification makes it obvious when errors originate from a specific app's scripts.
  • Async loading race conditions. A theme component tries to use a global variable from a lazily-loaded app script before it's available. The error only fires on slow connections, making it nearly impossible to reproduce in development.
  • CSP violations. Shopify has been tightening Content Security Policy headers. Scripts that inline event handlers or use eval() start failing without any obvious indication at the UI level.

Setting up JS error tracking on Shopify

Bloodhound installs in five minutes from the Shopify App Store. After installation, you toggle the theme app embed in your theme editor — this activates the monitoring script on every storefront page. The Web Pixel auto-installs separately for checkout coverage. No code changes required, no developer needed.

Once live, errors start appearing within minutes of real visitor traffic. The dashboard shows you open issues sorted by revenue impact, with full context for each error and a trend chart showing whether things are getting better or worse.

Stop flying blind on JS errors

Install free. No developer needed. Data within minutes.

Install free →