# Ecommerce Performance Monitoring & Error Tracking

> Monitor and optimize your online store with Sentry. Catch JS errors, third-party outages and checkout delays fast—resolve issues before they cost sales.

**URL:** https://sentry.io/solutions/ecommerce/

---

Whether it’s a slow product page on mobile, a JS error breaking your cart, or a third-party integration that ghosted mid-sale, Sentry helps you understand what's broken so you can fix it faster.

## Supported SDKs

- Node.js — [Docs](https://docs.sentry.io/platforms/javascript/guides/node/agent-tracing/vercelai/)

- NestJS — [Docs](https://docs.sentry.io/platforms/javascript/guides/nestjs/agent-tracing/vercelai/)

- Nuxt — [Docs](https://docs.sentry.io/platforms/javascript/guides/nuxt/agent-tracing/vercelai/)

- React

- Vue — [Docs](https://docs.sentry.io/platforms/javascript/guides/vue/)

- Laravel — [Docs](https://docs.sentry.io/platforms/php/guides/laravel/)

- Remix — [Docs](https://docs.sentry.io/platforms/javascript/guides/remix/agent-tracing/vercelai/)

- React Native

- iOS — [Docs](https://docs.sentry.io/platforms/apple/guides/ios/)

- Android — [Docs](https://docs.sentry.io/platforms/android/)

- SvelteKit — [Docs](https://docs.sentry.io/platforms/javascript/guides/sveltekit/agent-tracing/vercelai/)

- Flutter — [Docs](https://docs.sentry.io/platforms/dart/guides/flutter/)

- WordPress — [Docs](https://github.com/stayallive/wp-sentry)

## Details

### Catch & Fix Bugs Fast

#### Find and fix all kinds of errors (before they hurt your bottom line)

From JS errors in the product grid to image loading failures on mobile and third-party payment script issues during checkout, Sentry automatically captures and groups every type of error in your ecommerce stack.

No need to wade through noisy logs or duplicate reports. Just clear visibility into what broke, how often, and who it’s affecting.

#### Get the full context behind every issue

When a customer clicks ‘Place Order’ and nothing happens, you need to know what went wrong, not just that it’s broken. Sentry gives you the ‘how’ and ‘why’. You get context like: 

Full stack traces

Breadcrumbs

Device & user details

Suspect commits that likely caused the issue

- all at a glance so you can identify issue owners and the root cause faster.

#### See exactly what your customers see with Session Replay

Your logs show a spike in drop-offs in your checkout flow when using a discount code, but no clear errors. With [Session Replay](https://sentry.io/product/session-replay/), you can see a video reproduction of exactly what the user saw: the taps, screens, scrolls, and UI state. Get a clear view of what went wrong, with the connected context to fix it.

### Optimize Performance

#### Automatically root cause your issues

A customer gets a blank screen after applying a discount code. Seer, Sentry’s AI debugger,  analyzes the error, reviews your codebase, and submits a PR fix based on all of your app’s context. It’s AI that’s actually helpful at fixing things.

#### Find the cause of performance issues from sign-in to checkout

A shopper clicks “Add to Cart” and waits… and waits. Sentry’s [distributed tracing](https://sentry.io/product/tracing/) shows exactly where the slowdown happens, whether it’s a delayed API response, a stuck database query, or a third-party script blocking the UI. You get a full view of the request journey, from the browser to the backend, so you can identify problems faster.

#### Debug app performance down to the code level

Your product detail page loads fine (until you try to scroll). Sentry’s code-level profiling shows a React component stuck in a re-render loop, spiking CPU and tanking performance on mobile. Now you know exactly which function to fix to speed up your most valuable pages.

### Language and Framework Support

#### Real-Time Monitoring for your Shopify storefront

From Hydrogen to headless storefronts, Sentry gives you the tools to monitor and debug every part of your Shopify stack. See what users are experiencing, catch runtime errors early, and resolve issues fast.

#### Monitoring that keeps up with flash sales and borked buttons across frameworks

Application performance monitoring built specifically for modern frameworks. Sentry integrates directly with Next.js, React, Vue, and other popular languages and frameworks, so you can catch errors, measure performance, and understand user impact, without stitching together a dozen plugins.

#### Keep your mobile experiences smooth from sign-in to checkout

Don’t wait for your users to tell you about issues in your ecommerce app. Sentry gives you full visibility into your mobile apps, from Flutter to React Native to iOS and Android. Crashes, UI hangs, performance bottlenecks—everything your team needs to protect the mobile customer experience, in one place and in real time.

## Cookbook recipes

### Track and fix checkout performance in React Native with Sentry tracing

Use Sentry tracing to instrument a React Native checkout flow with a Python backend, identify slow HTTP requests, and set up alerts and dashboards.

## Customer Story

> A lot of solutions do error monitoring, but Sentry goes the extra mile when it comes to details.

[Read the full story](https://sentry.io/customers/gorgias/)

- **10** Daily Deployments

- **99%** Uptime

- **Hours** To incident resolution

## Check out more content:

- [Monitoring Critical E-commerce Experiences: Developer's Checklist](https://sentry.io/resources/holiday-e-commerce-checklist/): Stay ready: track errors, set smart alerts, capture session replays, monitor performance, and prevent bugs before they ship.

- [Monitoring & Debugging a Checkout Flow in Flask & React](https://blog.sentry.io/monitoring-and-debugging-a-checkout-flow-in-flask-and-react/): When your checkout flow breaks, customers disappear faster than most ‘cutting-edge’ JS metaframeworks. Let's walk through how we instrumented, monitored, and fixed a major issue, with minimal effort, using Sentry.

- [Monitor and Debug Laravel Applications with Sentry](https://sentry.io/resources/debug-laravel-with-sentry/): A hands-on workshop to master error monitoring, replays, performance tracking, and AI-powered fixes with Sentry

- [Debug errors faster while protecting user privacy with Session Replay](https://sentry.io/resources/session-replay-privacy-workshop/): Join Butch Mayhew, Head of Quality and Reliability at payment processor Tilled, as he shows how his team uses Sentry’s Session Replay for faster debugging – while meeting stringent financial compliance standards

- [Session Replay: Debug Faster without the Guesswork](https://blog.sentry.io/getting-started-with-session-replay/): Get full visibility into user errors to see exactly what went wrong and when with Session Replay.

- [Mobile App Monitoring Platforms Don’t Have To Be Noisy](https://sentry.io/resources/mobile-app-monitoring-workshop/): Learn how to use Sentry for Mobile featuring error monitoring, mobile replay, tracing, and more.

- [Introducing Session Health in Sentry (Open Beta)](https://blog.sentry.io/introducing-session-health-in-sentry-now-in-open-beta/): Session Health gives you a clear view of stability and user experience—and lets you drill into each dip, with the connected issues that might be causing it, so you can push a quick fix or keep rolling out with confidence.

## Quick Start

### Python

Install the Sentry Python SDK with pip

```bash
pip install sentry-sdk
```

Configuration should happen as early as possible in your application's lifecycle.

```python
import sentry_sdk

sentry_sdk.init(
  dsn="https://examplePublicKey@o0.ingest.sentry.io/0",
  # Add data like request headers and IP for users, if applicable;
  # see https://docs.sentry.io/platforms/python/data-management/data-collected/ for more info
  send_default_pii=True,
  # Set traces_sample_rate to 1.0 to capture 100%
  # of transactions for tracing.
  traces_sample_rate=1.0,
  #Enable logs to be sent to Sentry
  enable_logs=True,
  # To collect profiles for all profile sessions,
  # set profile_session_sample_rate to 1.0.
  profile_session_sample_rate=1.0,
  # Profiles will be automatically collected while
  # there is an active span.
  profile_lifecycle="trace",
)
```

### JavaScript

Install the Sentry JavaScript SDK with npm

```bash
npm install @sentry/browser --save
```

Configuration should happen as early as possible in your application's lifecycle.

```javascript
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // Adds request headers and IP for users, for more info visit:
  // https://docs.sentry.io/platforms/javascript/configuration/options/#sendDefaultPii
  sendDefaultPii: true,
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  tracesSampleRate: 1.0,
  // Set tracePropagationTargets to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
  // Enable logs to be sent to Sentry
  enableLogs: true,
  // Set profilesSampleRate to 1.0 to profile every transaction.
  // Since profilesSampleRate is relative to tracesSampleRate,
  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
  // result in 25% of transactions being profiled (0.5*0.5=0.25)
  profilesSampleRate: 1.0,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.browserProfilingIntegration(),
  ],
});
```

### React

Run the command for your preferred package manager to add the Sentry SDK to your application:

```bash
npm install @sentry/react --save
```

To import and initialize Sentry, create a file in your project's root directory, for example, `instrument.js`, and add the following code:

```javascript
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // Adds request headers and IP for users, for more info visit:
  // https://docs.sentry.io/platforms/javascript/guides/react/configuration/options/#sendDefaultPii
  sendDefaultPii: true,
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
  tracesSampleRate: 1.0,
  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: [/^//, /^https://yourserver.io/api/],
  // Enable logs to be sent to Sentry
  enableLogs: true,
  // Set profilesSampleRate to 1.0 to profile every transaction.
  // Since profilesSampleRate is relative to tracesSampleRate,
  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
  // result in 25% of transactions being profiled (0.5*0.5=0.25)
  profilesSampleRate: 1.0,
  integrations: [
    // If you're using react router, use the integration for your react router version instead.
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/
    Sentry.browserTracingIntegration(),
    Sentry.browserProfilingIntegration(),
  ],
});
```

Initialize Sentry as early as possible in your application. We recommend putting the import of your initialization code as the first import in your app's entry point:

```javascript
// Sentry initialization should be imported first!
import "./instrument";
import App from "./App";
import { createRoot } from "react-dom/client";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);
```

To make sure Sentry captures all your app's errors, configure error handling based on your React version. 
 For React versions 19 and up:  

```javascript
import { createRoot } from "react-dom/client";
import * as Sentry from '@sentry/react';

const container = document.getElementById("app");
const root = createRoot(container, {
  // Callback called when an error is thrown and not caught by an ErrorBoundary.
  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
    console.warn('Uncaught error', error, errorInfo.componentStack);
  }),
  // Callback called when React catches an error in an ErrorBoundary.
  onCaughtError: Sentry.reactErrorHandler(),
  // Callback called when React automatically recovers from errors.
  onRecoverableError: Sentry.reactErrorHandler(),
});
root.render();
```

For React versions 18 and below, use the ErrorBoundary component to automatically send errors from specific component trees to Sentry and provide a fallback UI:

```javascript
import React from "react";
import * as Sentry from "@sentry/react";

<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
  <Example />
</Sentry.ErrorBoundary>;
```

### Next.js

To install Sentry using the installation wizard, run thrun the following command and step through the prompts:

```bash
npx @sentry/wizard@latest -i nextjs
```

For manual installation run the following command and use the following configurations:

```bash
npm install @sentry/nextjs --save
```

Extend your app's default Next.js options by adding code with `withSentryConfig` into your `next.config.(js|mjs)` file:

```javascript
const { withSentryConfig } = require("@sentry/nextjs");
const nextConfig = {
  // Your existing Next.js configuration
};
// Make sure adding Sentry options is the last code to run before exporting
module.exports = withSentryConfig(nextConfig, {
  org: "example-org",
  project: "example-project",
  // Only print logs for uploading source maps in CI
  // Set to `true` to suppress logs
  silent: !process.env.CI,
  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,
});
```

#### Client-Side Configuration

```javascript
import * as Sentry from "@sentry/nextjs";
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // Adds request headers and IP for users, for more info visit:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
  sendDefaultPii: true,
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
  tracesSampleRate: 1.0,
  // Enable logs to be sent to Sentry
  enableLogs: true,
  // Set profilesSampleRate to 1.0 to profile every transaction.
  // Since profilesSampleRate is relative to tracesSampleRate,
  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
  // result in 25% of transactions being profiled (0.5*0.5=0.25)
  profilesSampleRate: 1.0,
});

// This export will instrument router navigations, and is only relevant if you enable tracing.
// `captureRouterTransitionStart` is available from SDK version 9.12.0 onwards
export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
```

#### Server-Side Configuration

```javascript
import * as Sentry from "@sentry/nextjs";
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // Adds request headers and IP for users, for more info visit:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
  sendDefaultPii: true,
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
  tracesSampleRate: 1.0,
  // Enable logs to be sent to Sentry
  enableLogs: true,
});
```

#### Register Sentry Server-Side SDK Initialization

Create a Next.js Instrumentation file named `instrumentation.(js|ts)` in your project root or inside the `src` folder if you have one. Import your server and edge configurations, making sure that the imports point to your specific files:

```javascript
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    await import("./sentry.server.config");
  }
  if (process.env.NEXT_RUNTIME === "edge") {
    await import("./sentry.edge.config");
  }
}
```

### Go

Grab the Sentry Go SDK:

```bash
go get "github.com/getsentry/sentry-go"
```

Configuration should happen as early as possible in your application's lifecycle.

```text
err := sentry.Init(sentry.ClientOptions{
  Dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // Enable printing of SDK debug messages.
  // Useful when getting started or trying to figure something out.
  Debug: true,
  // Adds request headers and IP for users,
  // visit: https://docs.sentry.io/platforms/go/data-management/data-collected/ for more info
  SendDefaultPII: true,
  EnableTracing: true,
  // Set TracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  TracesSampleRate: 1.0,
})
if err != nil {
  log.Fatalf("sentry.Init: %s", err)
}
// Flush buffered events before the program terminates.
// Set the timeout to the maximum duration the program can afford to wait.
defer sentry.Flush(2 * time.Second)
```

### Ruby

Add the sentry-ruby gem to your Gemfile:

```ruby
gem "sentry-ruby"
```

Configuration should happen as early as possible in your application's lifecycle.

```ruby
require 'sentry-ruby'

Sentry.init do |config|
  config.dsn = 'https://examplePublicKey@o0.ingest.sentry.io/0'

  # get breadcrumbs from logs
  config.breadcrumbs_logger = [:sentry_logger, :http_logger]

  # Add data like request headers and IP for users, if applicable;
  # see https://docs.sentry.io/platforms/ruby/data-management/data-collected/ for more info
  config.send_default_pii = true
  # enable tracing
  # we recommend adjusting this value in production
  config.traces_sample_rate = 1.0
  # Enable logs to be sent to Sentry
  config.enable_logs = true
  # enable profiling
  # this is relative to traces_sample_rate
  config.profiles_sample_rate = 1.0
end
```

### PHP

Install the Sentry SDK using Composer:

```bash
composer require sentry/sentry
```

To use Profiling, you'll also need to install the Excimer extension via PECL:

```bash
pecl install excimer
```

To capture all errors, even the one during the startup of your application, you should initialize the Sentry PHP SDK as soon as possible.

```php
\Sentry\init([
  'dsn' => 'https://examplePublicKey@o0.ingest.sentry.io/0',
  // Add request headers, cookies and IP address,
  // see https://docs.sentry.io/platforms/php/data-management/data-collected/ for more info
  'send_default_pii' => true,
  // Specify a fixed sample rate
  'traces_sample_rate' => 1.0,
  // Enable logs to be sent to Sentry
  'enable_logs' => true,
  // Set a sampling rate for profiling - this is relative to traces_sample_rate
  'profiles_sample_rate' => 1.0,
]);
```

### .NET

Install the NuGet package to add the Sentry dependency:

```shell
dotnet add package Sentry -v 5.16.2
```

To use Profiling, you'll also need to install the Sentry.Profiling package:

```shell
dotnet add package Sentry.Profiling -v 5.16.2
```

To capture all errors, even the one during the startup of your application, you should initialize the Sentry .NET SDK as soon as possible.

```csharp
SentrySdk.Init(options =>
{
    options.Dsn = "https://examplePublicKey@o0.ingest.sentry.io/0";
    options.Debug = true;
    // Adds request URL and headers, IP and name for users, etc.
    options.SendDefaultPii = true;
    // A fixed sample rate of 1.0 - 100% of all transactions are getting sent
    options.TracesSampleRate = 1.0f;
    // A sample rate for profiling - this is relative to TracesSampleRate
    options.ProfilesSampleRate = 1.0f;
});
```

---

*Source: [sentry.io/solutions/ecommerce/](https://sentry.io/solutions/ecommerce/)*