When a customer abandons their cart, it’s hard to know what actually went wrong. Was the checkout slow, or did something just look broken? Either way, you need the full picture to fix it fast. Did the checkout timeout because of slow server response, or because the user navigated away after waiting 3 seconds on a blank loading screen? This user behavior context is crucial for effective debugging.
Sentry’s Session Replay provides this additional context by capturing exactly what each user experienced when errors and performance issues occur. Session Replay captures and recreates individual user interactions, creating a playback of what users see and do during critical e-commerce flows like product searches, cart additions, and checkout processes.
This guide shows you how to set up Sentry in a Shopify test store, so you can see what users saw when something broke. This links Session Replay, performance data, and error information, so you can see what users see when something breaks. You’ll set up a development Shopify store, integrate Session Replay, create realistic e-commerce failure scenarios, and show how to connect user frustration with technical root causes.
What Session Replay is used for
In e-commerce applications, user experience directly impacts revenue. Session Replay provides detailed visibility into user interactions to help you optimize UX.
Reproduce and debug errors more easily: Session Replay adds context to bug reports for detailed investigations. Instead of trying to reproduce complex multi-step processes, developers can watch the user’s actual journey and identify the precise moment where things went wrong.
Identify performance issues: Slow-loading pages, unresponsive buttons, and interface freezes are clearly visible in session replays. Combined with performance monitoring data, teams can correlate user frustration with specific technical bottlenecks like slow API calls or resource loading delays.
Optimize the user experience: Session replay reveals how real users navigate your e-commerce site. See where customers get confused in your checkout flow, which products they view before making purchase decisions, and the interface elements that cause problems or go unnoticed.
Support ticket resolution: Customer service teams can review session replays attached to support tickets to understand exactly what customers experienced. This eliminates the back-and-forth communication typically required to understand and resolve user-reported issues.
Business impact analysis: When technical issues occur, app session replay helps quantify their business impact by showing how many customers were affected, at what stage of the purchase process problems occurred, and what the total revenue impact might have been.
How Session Replay works
Session Replay captures and recreates user interactions in the browser without recording actual video. Instead of taking screenshots, Session Replay records changes to the browser’s Document Object Model (DOM) – the in-memory representation of a webpage’s structure and content.
Here’s what’s actually happening under the hood.
Recording: When a user visits your site, the user session replay tool takes an initial snapshot of the DOM structure and CSS styles. As the user interacts with the site (clicking buttons, filling forms, scrolling, or navigating), each change is recorded as a series of events with precise timestamps.
Storage and compression: Captured DOM mutations and user interactions are compressed and sent to Sentry in small batches. Session data includes mouse movements, clicks, keyboard input (with sensitive data masked), form submissions, and page navigation events.
Playback recreation: When you view a session replay, Sentry rebuilds the webpage from the initial DOM snapshot and replays all recorded events in chronological order. This playback shows exactly what the user saw and did, without the performance overhead of screen recording.
For e-commerce debugging, Session Replay gives developers the context they actually need. It shows not just that checkout failed, but exactly how the user attempted to complete their purchase, what they clicked, and where the process broke down.
Prerequisites
To follow along, you’ll need:
A Shopify Partner account (free)
A Sentry account (free tier available)
Setting up complete monitoring in a Shopify environment
You'll build a Shopify store with realistic e-commerce functionality to demonstrate Sentry's full monitoring features. You’ll see how Session Replay integrates with performance monitoring and error tracking to provide complete debugging context.
Setting up Sentry
Sign up for a Sentry account.
Create a new project. Click Create Project, choose Browser JavaScript as the platform, and give the project a name like Shopify Store Monitoring. Click Create Project and then Configure SDK when prompted.
Create a Sentry JavaScript project through the UI
When the project is created, Sentry will provide a data source name (DSN), the unique identifier that tells the Sentry SDK where to send events from the Shopify store.
Switch to the NPM/Yarn tab. You’ll use this DSN in the next section when you integrate the Sentry SDK into the Shopify theme to enable session replay, performance monitoring, and error tracking for the e-commerce application.
DSN for the Sentry project in the Sentry UI
Next, enable monitoring features in the Sentry project settings. Navigate to Settings → SDK Setup → Loader Script and toggle on Enable Performance Monitoring and Enable Session Replay. Copy and save the loader script URL that appears (it will look like https://js.sentry-cdn.com/[hash].min.js) - you’ll need this in the next section.
Note: After enabling performance monitoring and Session Replay, it can take a few minutes for the changes to propagate to Sentry's CDN. If you don't see the feedback widget after implementing the code in the next steps, wait a few minutes and refresh the page.
Sentry Loader Script configuration showing performance monitoring and Session Replay enabled
Setting up Shopify
If you don’t already have one, create a Shopify Partner account. Partner accounts let you create unlimited development stores for testing without monthly fees.
Create a new development store by clicking Stores in the Partner dashboard, then Create a development store. Choose Create a store to test and build as the purpose.
Give the store a name and configure the following settings:
Build version: Select Current release
Data and configurations: Choose Start with an empty store
Click Create development store.
Creating a new Shopify development store through the Partner dashboard
Install the store theme by navigating to Online Store, then Themes in the Shopify admin panel. Install the Horizon theme to follow along with this guide. Click Publish.
Installing the Horizon theme in Shopify store
Get the store password by clicking See password. The store requires a password while in development mode.
Add sample products with different price points to create realistic shopping scenarios. Navigate to Products, then Add product. Create a demo product with the following settings:
Title: Give it any name (e.g., "Demo Product")
Price: Add any price (e.g., $29.99)
Inventory: Under the Inventory section, uncheck Track quantity, for our testing purposes
Status: Make sure the product is set to Active
Click Save. Repeat this process to create 2-3 products with different price points for realistic testing scenarios.
Adding sample products to Shopify development store
Integrate Sentry into the Shopify theme
In the Shopify admin, navigate to Online Store, and then Themes. Click the three dots on the active theme, then Edit code.
Open the layout/theme.liquid file and add the Sentry SDK to the <head> section, above {{ content_for_header }}.
<script src="https://js.sentry-cdn.com/YOUR_LOADER_SCRIPT_HASH.min.js" crossorigin="anonymous" defer></script>
<script>
window.sentryOnLoad = function() {
Sentry.init({
dsn: "YOUR_DSN_HERE",
initialScope: {
tags: {
store: "{{ shop.name }}",
page_type: "{{ template.name }}"
},
user: {
{% if customer %}
id: "{{ customer.id }}",
email: "{{ customer.email }}", //Only set user identifiers you’re allowed to collect, consider hashing or omitting email in production.
{% endif %}
},
contexts: {
page: {
template: "{{ template.name }}",
url: "{{ canonical_url }}"
}
}
},
tracesSampleRate: 1.0,
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 1.0,
tracePropagationTargets: ["localhost", /^https?:\/\//],
integrations: [
Sentry.replayIntegration(),
Sentry.browserTracingIntegration()
],
beforeSend(event) {
if (typeof window !== 'undefined' && window.cart) {
event.contexts = event.contexts || {};
event.contexts.cart = {
item_count: window.cart.item_count || 0,
total_price: window.cart.total_price || 0,
currency: "{{ cart.currency.iso_code }}"
};
}
return event;
}
});
// Lazy load the feedback integration
Sentry.lazyLoadIntegration("feedbackIntegration")
.then((feedbackIntegration) => {
Sentry.addIntegration(
feedbackIntegration({
colorScheme: "system",
enableScreenshot: true,
showBranding: false,
showName: true,
showEmail: true,
isRequiredEmail: true,
}),
);
});
document.addEventListener('DOMContentLoaded', function() {
Sentry.setTag('cart_items', {{ cart.item_count }});
Sentry.setContext('store_info', {
currency: "{{ cart.currency.iso_code }}",
locale: "{{ request.locale.iso_code }}"
});
});
};
</script>Replace YOUR_LOADER_SCRIPT_HASH with your actual loader script hash and YOUR_DSN_HERE with the actual Sentry project DSN from the previous step.
Note: Add the defer attribute to the loader script tag to prevent Shopify theme checker warnings about parser blocking scripts.
This setup gives you four useful monitoring features for the e-commerce store in addition to error monitoring:
Session Replay: The
replaysSessionSampleRate: 1.0andreplaysOnErrorSampleRate: 1.0settings capture 100% of user sessions, so every error is accompanied by user session replay data.Performance monitoring: The
tracesSampleRate: 1.0setting turns on performance monitoring for all transactions.E-commerce context: The
beforeSendfunction automatically adds cart information, customer details, and page-specific data to every event.User feedback widget: The
feedbackIntegrationconfiguration creates a persistent feedback widget that appears as a floating button in our store. When users encounter problems during their shopping experience, they can click this widget to submit feedback, which automatically captures their current session replay along with screenshots of the exact moment they experienced the issue.
Sentry user feedback widget appearing as a purple feedback button in the bottom-right corner of a Shopify store
Replay sampling, in practice
Understanding session replay sampling is crucial for managing both data costs and debugging effectiveness in production environments. Sentry offers two distinct sampling mechanisms that work together to give you control over when user session replay data is captured.
Understanding the two sample rate types
Session-based sampling (replaysSessionSampleRate): This controls what percentage of all user sessions are recorded from start to finish, regardless of whether errors occur. Setting this to 0.1 means 10% of all users will have their complete session recorded, while 1.0 captures every user session.
Error-based sampling (replaysOnErrorSampleRate): This captures session replay data only when errors occur, recording up to 60 seconds of user activity leading up to the error and continuing until the session ends. This provides crucial context for debugging without the overhead of recording every user interaction.
Recommended sampling strategies
Development: During development, set replaysSessionSampleRate: 1.0 to capture every session for full visibility into how your application behaves. This ensures you can debug any issues that arise during testing.
Production: For production, consider your traffic volume and debugging needs. Start with lower session sampling rates like replaysSessionSampleRate: 0.1 (10%) then adjust based on your specific needs.
Error-Only: If you’re using Session Replay for debugging rather than general user behavior analysis, set replaysSessionSampleRate: 0 and replaysOnErrorSampleRate: 1.0 to capture replay data only when problems occur. This will reduce data volume while ensuring that every error has full context.
Advanced sampling configuration
For applications with varying user tiers or business priorities, you can implement conditional sampling:
const isVIPCustomer = customer && customer.tier === 'premium';
const isCheckoutPage = window.location.pathname.includes('/checkout');
Sentry.init({
replaysSessionSampleRate: isVIPCustomer || isCheckoutPage ? 1.0 : 0.1,
replaysOnErrorSampleRate: 1.0,
// ... other configuration
});This approach ensures that high-value user sessions (VIP customers or critical checkout flows) are always recorded, while maintaining lower sampling rates for general browsing.
Testing Session Replay with the user feedback widget
Before implementing error scenarios, let’s verify that the Session Replay setup works correctly.
Navigate to your Shopify store by going to the Shopify dashboard, click Online Store → View your store, then enter your store password. Hide the Shopify admin bar at the bottom of the screen to see the Report a Bug widget clearly. Interact with different pages, add products to the cart, and browse around. Notice the Report a Bug widget in the bottom-right corner.
User feedback widget visible on Shopify checkout page
Click Report a Bug to test the feedback submission process, then visit the Sentry dashboard to confirm that session replays and user feedback are being recorded.
User feedback submissions displayed in the Sentry dashboard interface
The Report a Bug widget serves as a direct connection to customer experience issues. When users encounter problems during their shopping journey, they can immediately report issues while the context is fresh, and Sentry automatically associates their feedback with the technical data needed for debugging.
Setting up the complex checkout flow scenario
Now let's create a detailed checkout flow that demonstrates how web session replay connects complex performance issues with user experience problems. This scenario simulates a realistic multi-step checkout process with several potential failure points and performance bottlenecks, and includes proper instrumentation to show how technical issues cascade into user frustration.
Modern e-commerce checkout flows involve multiple services working together: inventory validation, tax calculation, shipping rates, discount application, payment processing, and order creation. When any of these steps fail or perform slowly, users experience checkout abandonment without understanding why.
⚠️ Important: Demo code only
The code in this section is designed for demonstration and testing purposes only. It intentionally introduces checkout failures, performance delays, and error conditions to simulate real-world issues. Do not use this code in production or on public Shopify stores.
Step 1: Modify the existing button structure
In the Shopify admin, navigate to Online Store, and then Themes. Click the three dots on the active theme, then Edit code. Open snippets/cart-summary.liquid and find this existing button in the div with the class cart__ctas:
<button
type="submit"
id="checkout"
class="cart__checkout-button button"
name="checkout"
{% if cart == empty %}
disabled
{% endif %}
form="cart-form"
>
{{ 'content.checkout' | t }}
</button>Replace the button with this one:
<button
type="submit"
id="checkout"
class="cart__checkout-button button"
name="checkout"
{% if cart == empty %}
disabled
{% endif %}
form="cart-form"
>
<span id="checkout-button-text">{{ 'content.checkout' | t }}</span>
<span id="checkout-spinner" style="display: none;">⏳</span>
</button>Step 2: Add detailed checkout flow after the existing stylesheet
The snippets/cart-summary.liquid file has a {% stylesheet %} section at the end. Add this JavaScript section right after the closing {% endstylesheet %} tag:
<script>
document.addEventListener('DOMContentLoaded', function() {
const checkoutBtn = document.getElementById('checkout');
if (checkoutBtn && checkoutBtn.form && checkoutBtn.form.id === 'cart-form') {
checkoutBtn.addEventListener('click', function(e) {
if ({{ cart.item_count }} === 0) return;
e.preventDefault();
const buttonText = document.getElementById('checkout-button-text');
const spinner = document.getElementById('checkout-spinner');
if (!buttonText || !spinner) return;
// Show loading state
checkoutBtn.disabled = true;
buttonText.style.display = 'none';
spinner.style.display = 'inline-block';
// Start the instrumented checkout flow
processComplexCheckout()
.then(() => {
window.location.href = '{{ routes.cart_url }}/checkout';
})
.catch(error => {
handleCheckoutError(error, checkoutBtn, buttonText, spinner);
});
});
}
});
async function processComplexCheckout() {
// Check if Sentry is available
if (typeof Sentry === 'undefined') {
console.warn('Sentry not available, falling back to basic flow');
return basicCheckoutFlow();
}
return await Sentry.startSpan(
{
name: "Complete Checkout Flow",
op: "checkout.process",
attributes: {
"checkout.cart_total": {{ cart.total_price | divided_by: 100.0 }},
"checkout.item_count": {{ cart.item_count }}
}
},
async (checkoutSpan) => {
const checkoutData = {
cartTotal: {{ cart.total_price | divided_by: 100.0 }},
itemCount: {{ cart.item_count }},
startTime: Date.now()
};
try {
// Step 1: Validate cart items
await Sentry.startSpan(
{ name: "Validate Cart Items", op: "checkout.validate" },
() => validateCartItems(checkoutData)
);
// Step 2: Calculate shipping rates (the main bottleneck)
await Sentry.startSpan(
{ name: "Calculate Shipping Rates", op: "checkout.shipping" },
() => calculateShippingRates(checkoutData)
);
// Step 3: Process payment
await Sentry.startSpan(
{ name: "Process Payment", op: "checkout.payment" },
() => processPayment(checkoutData)
);
checkoutSpan.setAttributes({
"checkout.success": true,
"checkout.total_time_ms": Date.now() - checkoutData.startTime
});
return { success: true };
} catch (error) {
checkoutSpan.setStatus({ code: 2, message: error.message });
checkoutSpan.setAttributes({
"checkout.success": false,
"checkout.error_step": error.step || "unknown"
});
Sentry.captureException(error, {
tags: {
operation: 'checkout_flow',
checkout_step: error.step || 'unknown'
},
extra: {
checkout_data: checkoutData,
total_value: checkoutData.cartTotal
}
});
throw error;
}
}
);
}
async function basicCheckoutFlow() {
await new Promise(resolve => setTimeout(resolve, 1500));
if (Math.random() < 0.1) {
throw new Error('Basic checkout failed');
}
return { success: true };
}
async function validateCartItems(checkoutData) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 30% chance of validation failure
if (Math.random() < 0.3) {
const error = new Error('Item no longer available');
error.step = 'validation';
reject(error);
return;
}
resolve({ validated: true });
}, 300);
});
}
async function calculateShippingRates(checkoutData) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 30% chance of shipping failure - this is our main bottleneck
if (Math.random() < 0.3) {
const error = new Error('Shipping service unavailable');
error.step = 'shipping';
reject(error);
return;
}
resolve({ rates: [{ cost: 5.99, provider: 'Standard' }] });
}, 2000); // 2 second delay to simulate slow shipping API
});
}
async function processPayment(checkoutData) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 30% chance of payment failure
if (Math.random() < 0.3) {
const error = new Error('Payment declined');
error.step = 'payment';
reject(error);
return;
}
resolve({ authorized: true });
}, 500);
});
}
function handleCheckoutError(error, button, buttonText, spinner) {
button.disabled = false;
spinner.style.display = 'none';
buttonText.style.display = 'inline-block';
const errorMessages = {
'validation': 'Item Unavailable',
'shipping': 'Shipping Error',
'payment': 'Payment Declined'
};
buttonText.textContent = errorMessages[error.step] || 'Checkout Error';
button.style.backgroundColor = '#dc3545';
button.style.color = 'white';
// Reset after 4 seconds
setTimeout(() => {
buttonText.textContent = '{{ 'content.checkout' | t }}';
button.style.backgroundColor = '';
button.style.color = '';
}, 4000);
}
</script>This code sets up realistic e-commerce issues, creating a multi-step checkout process where each stage can fail independently. Sentry’s performance monitoring tracks each operation’s timing and success rate.
Testing the checkout flow on mobile
Add several products to the cart to create a realistic checkout scenario, then navigate to the /cart page on both desktop and mobile devices. Click the Checkout button to trigger the complex checkout process. The loading state persists longer than typical e-commerce flows, especially during the shipping calculation phase, which is the primary bottleneck.
The checkout process may succeed after several seconds, or it may fail at any step with specific error messages like Shipping Error or Payment Declined. Each failure represents a different technical issue that would require different debugging approaches in production.
Shopify cart page on mobile showing the checkout button with loading spinner during the multi-step checkout process
Test the checkout flow a few times to trigger different failure scenarios. Each failure creates different performance traces and error contexts in Sentry.
While experiencing checkout failures on a mobile device, click Report a Bug to submit reports about the specific issues encountered. Session Replay for Mobile captures touch interactions, swipe gestures, and device-specific behaviors that desktop testing might miss.
Mobile device feedback widget interface for reporting checkout issues
Viewing user feedback in Sentry
Navigate to the Sentry project dashboard and click Issues, then User Feedback in the sidebar. The feedback submissions connect to comprehensive technical data rather than simple API timeout logs.
Sentry User Feedback dashboard showing the checkout error reports with user descriptions and associated technical performance data
Each feedback entry links to detailed performance traces showing exactly which step in the checkout process failed, how long each operation took, and what the user experienced during the entire flow. Having this full context cuts down guesswork by directly linking technical issues to user frustration and checkout abandonment.
Connecting feedback to Session Replay and detailed performance data
Click on any feedback entry to see the complete context that Sentry automatically captured for the complex checkout flow. The feedback detail view now connects multiple layers of technical information that would traditionally require separate user session replay tools and manual correlation.
Session Replay
The website session recording shows the complete user journey through the extended checkout process. You can watch users interact with the cart, click Checkout multiple times, and encounter various error scenarios. Session Replay captures the sequence of user actions and system failures that occur during complex checkout flows.
Session Replay showing the complete checkout sequence with multiple user interactions and various error conditions
The replay reveals user behavior patterns during checkout failures. Users often retry checkout actions several times when errors occur, and Session Replay captures these repeated interactions along with the specific error conditions that caused each failure, providing clear insight into where the checkout process breaks down.
Performance traces
The performance trace shows a waterfall of all checkout operations with nested span relationships. You can see how cart validation leads to tax calculation, how shipping and discount operations run in parallel, and where the process bottlenecks or fails completely.
Sentry performance trace showing the complete checkout flow waterfall with nested spans for validation, shipping, and payment processing
Performance traces reveal the cascade effect of slow operations. When shipping calculation takes more than two seconds, the entire checkout experience feels sluggish, even if other operations complete quickly. The trace shows exactly which operations consume the most time and how parallel processing helps mitigate some delays.
Detailed error context with business impact
Error details now include rich context about which step failed, what the cart contents were, how long the process had been running, and the potential business impact. Each error includes the complete checkout state, making it possible to reproduce issues or understand why specific combinations of cart contents trigger failures.
Sentry error details showing checkout failure with complete context including cart data, processing time, failed step, and business impact assessment
Error context transforms generic failure messages into actionable debugging information. Instead of knowing that checkout failed, you have specific details about cart value, processing time, which integration failed, and how many customers might be affected by similar issues.
Network requests and third-party integration monitoring
The network tab shows all API calls made during the checkout process, including the intentional tax service call that demonstrates how to monitor third-party integrations. You can see request timing, headers, payloads, and responses for each step in the checkout flow.
Sentry network monitoring showing API calls during checkout including shipping providers and payment gateway requests with timing and response data
Network monitoring reveals how third-party service performance affects user experience. Slow shipping provider APIs or unreliable tax calculation services directly impact checkout completion rates, and Sentry’s integration shows exactly where these dependencies create user experience problems.
AI-powered root cause analysis with Seer
When debugging complex e-commerce flows with multiple integration points, understanding how seemingly unrelated errors connect can be challenging. Seer can analyze error patterns and suggest possible relationships between failures across our checkout process.
Sentry Issues interface showing Seer’s root cause analysis panel with intelligent suggestions for checkout failures
In this example, Seer identifies that the 404 tax service error may have cascaded to cause the inventory availability flag to be incorrectly set. Rather than treating these as separate issues, Seer recognizes the potential connection and provides an initial hypothesis for investigation.
Seer providing analysis of checkout issues, connecting tax service failures to inventory problems with actionable insights
Seer’s analysis transforms complex multi-step failures into actionable debugging paths. Instead of manually correlating the tax service timeout with the subsequent inventory error, the AI immediately suggests that the failed tax calculation may have disrupted the checkout state management, leading to incorrect inventory flags. This accelerates debugging by pointing developers toward the actual root cause rather than just the most visible symptom.
What are the advantages of Session Replay?
Session Replay in combination with the rest of Sentry offers several key advantages over traditional monitoring approaches.
Complete context capture: Unlike log files that show isolated events, web session replay provides complete context around issues. When a payment fails, you can see the user’s entire journey: how they found the product, what they added to their cart, how they filled out checkout forms, and exactly where the process broke down.
All-in-one debugging experience: At Tilled, a PayFac-as-a-Service platform, developers rely on a single platform combining application performance monitoring and session replay to understand and resolve issues faster. By using Sentry’s developer-first APM and replay features, the team gains deep visibility into performance events, from API response times to database-level insights, allowing them to maintain 99.98% availability while focusing on enhancing user experiences.
Real User Monitoring (RUM) integration: RUM session replay captures actual user behavior alongside comprehensive performance metrics. This approach reveals how real users experience your application under real-world conditions, including network variability, device constraints, and authentic usage patterns that synthetic testing cannot replicate.
Privacy-first design: Advanced session replay tools automatically mask sensitive information like credit card numbers, passwords, and personal data while capturing the user interaction patterns needed for debugging. This ensures compliance with privacy regulations while maintaining debugging effectiveness.
Cross-platform visibility: Today’s browser session replay software supports both web applications and mobile apps, providing consistent debugging capabilities across all user touchpoints. Whether customers experience issues on desktop browsers or mobile devices, teams have the same level of visibility.
Automated issue detection: When combined with AI-powered analysis tools, session replay can automatically identify patterns in user behavior that indicate problems, flagging high-priority issues before they impact many customers.
See the full debugging picture
When a customer reports that checkout doesn’t work, separate monitoring tools force developers to check app session replay in one system, look up performance data in another platform, search for related errors in a third tool, and manually piece together the complete story. Sentry’s integrated approach automatically links session replays with performance traces and error information, ensuring the complete technical and user experience context is available.
Sentry allows for advanced analysis that separate session replay tools cannot provide. You can identify patterns where specific performance bottlenecks consistently lead to user abandonment, correlate error conditions with support ticket volume, and prioritize fixes based on actual business impact rather than just technical severity. This holistic view helps you to understand not just what broke, but how technical issues affect revenue and customer satisfaction.
Performance optimization becomes data-driven when you can see exactly how checkout delays correlate with abandonment rates. The sample rate for Session Replay can be optimized based on traffic volume and debugging needs, balancing thorough monitoring with data storage costs while ensuring critical business flows are always monitored.
