Hydrogen react router v7 not uploading source maps when deployed via shopify hydrogen CLI

[mparq]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react-router

SDK Version

10.18.0

Framework Version

@shopify/hydrogen 2025.7.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

No response

Steps to Reproduce

I onboarded Sentry to my new hydrogen react router v7 project. Everything works well except for source map uploads, due to the buildEnd react router hook not executing, when I set things up as mentioned in the docs.

What is the recommendation for setting up sentry given buildEnd in react router build is not available in hydrogen deployments?

Details below:

//react-router.config.ts
import type { Config } from "@react-router/dev/config";
import { hydrogenPreset } from "@shopify/hydrogen/react-router-preset";
import { sentryOnBuildEnd } from "@sentry/react-router";

export default {
  ...hydrogenPreset(),
  buildEnd: async ({ viteConfig, reactRouterConfig }) => {
    console.log("🔥 This never prints - buildEnd hook not called!");
    await sentryOnBuildEnd({ viteConfig, reactRouterConfig });
  }
} satisfies Config;

//vite.config.ts
import { defineConfig } from "vite";
import { hydrogen } from "@shopify/hydrogen/vite";
import { reactRouter } from "@react-router/dev/vite";
import { sentryReactRouter } from "@sentry/react-router";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    hydrogen(),
    reactRouter(),
    sentryReactRouter(
      {
        org: "my-org",
        project: "my-project",
        authToken: process.env.SENTRY_AUTH_TOKEN,
        release: {
          name: "test-release",
        },
        debug: true,
      },
      { command: 'build', mode: 'production' }
    ),
    tsconfigPaths(),
  ],
  build: {
    sourcemap: true,
  },
});

Repro:

// hydrogen by default disables client source map. enable generating as sentry will delete after uploading
npx shopify hydrogen deploy --force-client-sourcemap

Expected Result

Expected sourcemaps to be uploaded for the sentry release

Actual Result

No sourcemaps uploaded

Additional Context

The below is AI-generated from https://github.com/Shopify/hydrogen, hope it helps:

⏺ The Hydrogen CLI skips React Router's buildEnd hook because the CLI directly calls Vite's build API instead of using React Router's build orchestrator.

Looking at the build implementation (packages/cli/src/commands/hydrogen/build.ts:115-370):

1. The CLI manually invokes Vite builds - It calls vite.build() twice directly (once for client at line 171, once for server at line 211), completely
   bypassing React Router's build wrapper
2. Custom build lifecycle hooks - The CLI implements its own lifecycle hooks through custom Vite plugins (hydrogen:cli:client and hydrogen:cli:server at
   lines 186-202 and 226-252)
3. React Router's buildEnd never executes - Since React Router's build orchestration layer is bypassed, hooks like buildEnd configured in
   react-router.config.ts are never invoked

The preset explicitly blocks buildEnd usage (packages/hydrogen/src/react-router-preset.ts:86-92) and suggests workarounds:

• Use external build scripts
• Use package.json post-build hooks (e.g., "postbuild": "node ./my-script.js")

This architecture gives the Hydrogen CLI fine-grained control over the build process for Oxygen deployment optimization, but at the cost of React Router
configuration flexibility.

_{Tip: React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear]

JS-1032

[mparq]

In case it helps anybody, here is the workaround for now I created.

What ended up working

Instead of using the buildEnd hook in react-router.config.ts (which doesn't seem to fire with shopify hydrogen deploy), I moved the sourcemap upload to a postbuild script.

Created sentry-upload.mjs:

#!/usr/bin/env node
import { rm } from 'node:fs/promises';
import { existsSync } from 'node:fs';
import { execSync } from 'node:child_process';
import SentryCli from '@sentry/cli';
import { glob } from 'glob';

// probably should just use SENTRY_RELEASE from env
const getRelease = () => {
  try {
    return execSync('git rev-parse --short HEAD').toString().trim();
  } catch (e) {
    return process.env.SENTRY_RELEASE || 'unknown';
  }
};

const detectBuildDirectory = () => {
  if (existsSync('./build')) return 'build';
  if (existsSync('./dist')) return 'dist';
  throw new Error('Could not find build directory');
};

const sentryConfig = {
  authToken: process.env.SENTRY_AUTH_TOKEN,
  org: process.env.SENTRY_ORG,
  project: process.env.SENTRY_PROJECT,
  release: getRelease(),
};

const buildDirectory = detectBuildDirectory();

async function uploadSourceMaps() {
  if (!sentryConfig.authToken) {
    console.log('[Sentry] No auth token - skipping upload');
    return;
  }

  const cliInstance = new SentryCli(null, {
    authToken: sentryConfig.authToken,
    org: sentryConfig.org,
    project: sentryConfig.project,
  });

  await cliInstance.releases.new(sentryConfig.release);
  await cliInstance.execute(['sourcemaps', 'inject', buildDirectory]);
  await cliInstance.releases.uploadSourceMaps(sentryConfig.release, {
    include: [{ paths: [buildDirectory] }],
  });

  const maps = await glob(`${buildDirectory}/**/*.map`, { absolute: true, nodir: true });
  await Promise.all(maps.map(f => rm(f, { force: true })));

  console.log(`[Sentry] ✅ Uploaded ${maps.length} sourcemaps`);
}

uploadSourceMaps();

Updated package.json with postbuild script:

{
  "scripts": {
    "build": "shopify hydrogen build --codegen --force-client-sourcemap",
    "postbuild": "node sentry-upload.mjs"
  }
}

NOTE: - had to use --build-command flag in hydrogen deploy otherwise hydrogen cli runs build on its own:

shopify hydrogen deploy --force-client-sourcemap --build-command "npm run build"

Without the --build-command flag, postbuild doesn't run.

In GitHub Actions:

- name: Build and Publish to Oxygen
  run: npx shopify hydrogen deploy --force-client-sourcemap --build-command "npm run build"
  env:
    SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
    SENTRY_ORG: your-org
    SENTRY_PROJECT: your-project

Also cleaned up react-router.config.ts to just the preset as recommended by hydrogen team:

// react-router.config.ts
import type {Config} from '@react-router/dev/config';
import {hydrogenPreset} from '@shopify/hydrogen/react-router-preset';

export default {
  presets: [hydrogenPreset()],
} satisfies Config;

Now sourcemaps upload successfully and I'm seeing unminified stack traces in Sentry. Not sure if this is the "right" way, but it's working for our deployment. I guess there is some nicer integration between sentry/hydrogen react router 7 that can be done, but hope this helps!

[chargome]

@mparq thanks for reaching out!

We were not aware of this hook not being executed. Good idea moving this logic into your own script – alternatively you can use the Sentry CLI directly to do this work for you:

# inject debug IDs first
sentry-cli sourcemaps inject /your/build/directory

# upload afterwards
sentry-cli sourcemaps upload /your/build/directory

Closing this for now as this seems to be a limitation on the shopify hydrogen side!

[mparq]

Thanks @chargome! It may be worth updating the documentation here too because it recommends this react-router.config.ts which won't work. The unfortunate thing is that because the buildEnd hook doesn't even run, there's no error - it's just that source maps don't work. Makes it hard to figure out if you're new to everything :)

Took your cue to use sentry-cli. Ends up looking like this:

// package.json
{
// ...
  "scripts": {
    "build": "shopify hydrogen build --codegen --force-client-sourcemap",
    "postbuild": "./sentry-upload.sh",
  },
  // ...
  "devDependencies": {
    "@sentry/cli": "^2.56.0"
  }
   }

#!/usr/bin/env bash
set -e

# Skip if missing required env vars
if [ -z "$SENTRY_ORG" ] || [ -z "$SENTRY_PROJECT" ]; then
  echo "[Sentry] Missing SENTRY_ORG or SENTRY_PROJECT - skipping upload"
  exit 1
fi

if [ -z "$SENTRY_AUTH_TOKEN" ]; then
  echo "[Sentry] No auth token - skipping upload"
  exit 1
fi

# Detect build directory
if [ -d "./build" ]; then
  BUILD_DIR="build"
elif [ -d "./dist" ]; then
  BUILD_DIR="dist"
else
  echo "[Sentry] Could not find build directory"
  exit 1
fi

# Get release version
RELEASE=$(git rev-parse --short HEAD 2>/dev/null || echo "${SENTRY_RELEASE:-unknown}")

# Inject debug IDs
sentry-cli sourcemaps inject "$BUILD_DIR"
# Upload sourcemaps
sentry-cli sourcemaps upload --release="$RELEASE" "$BUILD_DIR"

echo "[Sentry] Removing source map files after sentry upload"
# Remove map files
find "$BUILD_DIR" -name "*.map" -type f -delete
echo "[Sentry] Removed source map files after sentry upload"

echo "[Sentry] ✅ Uploaded sourcemaps (release: $RELEASE)"

[chargome]

@mparq did you open any issue regarding the build-end hook not being executed on their side? Will update the docs 👍

[mparq]

Thanks! I added a request here to their project: Shopify/hydrogen#3252 (comment). It seems it's intentional but maybe there's a way to better support integrations which relied on buildEnd hook on their side.