INIT Sentry - error tracking

Author: Cichorek

.env.example

@@ -7,3 +7,9 @@ SPREE_API_KEY=your_publishable_api_key
 # Set these to your store's default_country_iso and default_locale
 NEXT_PUBLIC_DEFAULT_COUNTRY=us
 NEXT_PUBLIC_DEFAULT_LOCALE=en
+
+# Sentry Error Tracking (optional - set DSN to enable)
+SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
+SENTRY_ORG=your-org
+SENTRY_PROJECT=your-project
+SENTRY_AUTH_TOKEN=your-auth-token

README.md

@@ -12,6 +12,7 @@ A modern, headless e-commerce storefront built with Next.js 16, React 19, and th
 - **React 19** - Latest React with improved Server Components
 - **Tailwind CSS 4** - Utility-first styling
 - **TypeScript 5** - Full type safety
+- **Sentry** - Error tracking and performance monitoring with source maps
 - [@spree/sdk](https://github.com/spree/spree/tree/main/packages/sdk) - Official Spree Commerce SDK
 - [@spree/next](https://github.com/spree/spree/tree/main/packages/next) - Server actions, caching, and cookie-based auth
 
@@ -30,6 +31,7 @@ A modern, headless e-commerce storefront built with Next.js 16, React 19, and th
   - Saved payment methods
 - **Multi-Region Support** - Country and currency switching via URL segments
 - **Responsive Design** - Mobile-first Tailwind CSS styling
+- **Error Tracking** - Sentry integration for both server-side and client-side error monitoring with source maps
 
 ## Architecture
 
@@ -75,6 +77,15 @@ SPREE_API_KEY=your_publishable_api_key_here
 
 > Note: These are server-side only variables (no `NEXT_PUBLIC_` prefix needed).
 
+#### Optional variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `SENTRY_DSN` | Sentry DSN for error tracking (e.g. `https://key@o0.ingest.sentry.io/0`) | _(disabled)_ |
+| `SENTRY_ORG` | Sentry organization slug (for source map uploads) | _(none)_ |
+| `SENTRY_PROJECT` | Sentry project slug (for source map uploads) | _(none)_ |
+| `SENTRY_AUTH_TOKEN` | Sentry auth token (for source map uploads in CI) | _(none)_ |
+
 ### Development
 
 ```bash
@@ -217,7 +228,9 @@ The easiest way to deploy is using [Vercel](https://vercel.com/new):
 
 1. Push your code to GitHub
 2. Import the repository in Vercel
-3. Add environment variables (`SPREE_API_URL`, `SPREE_API_KEY`)
+3. Add environment variables:
+   - `SPREE_API_URL` and `SPREE_API_KEY` (required)
+   - `SENTRY_DSN`, `SENTRY_ORG`, `SENTRY_PROJECT`, `SENTRY_AUTH_TOKEN` (optional — for error tracking with readable stack traces)
 4. Deploy
 
 ## License

next.config.ts

@@ -1,6 +1,10 @@
+import { withSentryConfig } from "@sentry/nextjs";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  env: {
+    NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN || "",
+  },
   transpilePackages: ["@spree/next", "@spree/sdk"],
   turbopack: {
     rules: {
@@ -51,4 +55,23 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default process.env.SENTRY_DSN
+  ? withSentryConfig(nextConfig, {
+      org: process.env.SENTRY_ORG,
+      project: process.env.SENTRY_PROJECT,
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      silent: !process.env.CI,
+
+      // Upload a larger set of source maps for prettier stack traces (increases build time)
+      widenClientFileUpload: true,
+
+      // Automatically delete source maps after uploading to Sentry
+      // so they are not served publicly
+      sourcemaps: {
+        deleteSourcemapsAfterUpload: true,
+      },
+
+      // Disables the Sentry SDK build-time telemetry
+      telemetry: false,
+    })
+  : nextConfig;