feat(remix): Support sourcemap uploads of Hydrogen apps. (#474)

getsentry · Sep 29, 2023 · 930f0ec · 930f0ec
1 parent d38a344
commit 930f0ec
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- feat(remix): Support sourcemap uploads of Hydrogen apps (#474)
 - fix(remix): Use captureRemixServerException inside handleError (#466)
 - fix(remix): Fix `request` arg in `handleError` template (#469)
 - fix(remix): Update documentation links to the new routes (#470)

diff --git a/src/remix/remix-wizard.ts b/src/remix/remix-wizard.ts
@@ -25,6 +25,8 @@ import {
 } from './sdk-setup';
 import { debug } from '../utils/debug';
 import { traceStep, withTelemetry } from '../telemetry';
+import { isHydrogenApp } from './utils';
+import { DEFAULT_URL } from '../../lib/Constants';
 
 export async function runRemixWizard(options: WizardOptions): Promise<void> {
   return withTelemetry(
@@ -73,7 +75,8 @@ async function runRemixWizardWithTelemetry(
       await updateBuildScript({
         org: selectedProject.organization.slug,
         project: selectedProject.name,
-        url: sentryUrl,
+        url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl,
+        isHydrogen: isHydrogenApp(packageJson),
       });
     } catch (e) {
       clack.log

diff --git a/src/remix/sdk-setup.ts b/src/remix/sdk-setup.ts
@@ -164,6 +164,7 @@ export async function updateBuildScript(args: {
   org: string;
   project: string;
   url?: string;
+  isHydrogen: boolean;
 }): Promise<void> {
   /* eslint-disable @typescript-eslint/no-unsafe-member-access */
   // Add sourcemaps option to build script
@@ -177,17 +178,24 @@ export async function updateBuildScript(args: {
     packageJson.scripts = {};
   }
 
+  const buildCommand = args.isHydrogen
+    ? 'shopify hydrogen build'
+    : 'remix build';
+
+  const instrumentedBuildCommand =
+    `${buildCommand} --sourcemap && sentry-upload-sourcemaps --org ${args.org} --project ${args.project}` +
+    (args.url ? ` --url ${args.url}` : '') +
+    (args.isHydrogen ? ' --buildPath ./dist' : '');
+
   if (!packageJson.scripts.build) {
-    packageJson.scripts.build =
-      `remix build --sourcemap && sentry-upload-sourcemaps --org ${args.org} --project ${args.project}` +
-      (args.url ? ` --url ${args.url}` : '');
+    packageJson.scripts.build = instrumentedBuildCommand;
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  } else if (packageJson.scripts.build.includes('remix build')) {
+  } else if (packageJson.scripts.build.includes(buildCommand)) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     packageJson.scripts.build = packageJson.scripts.build.replace(
-      'remix build',
-      'remix build --sourcemap && sentry-upload-sourcemaps',
+      buildCommand,
+      instrumentedBuildCommand,
     );
   }
 

diff --git a/src/remix/utils.ts b/src/remix/utils.ts
@@ -5,6 +5,7 @@ import * as path from 'path';
 // @ts-expect-error - clack is ESM and TS complains about that. It works though
 import clack from '@clack/prompts';
 import chalk from 'chalk';
+import { PackageDotJson, hasPackageInstalled } from '../utils/package-json';
 
 // Copied from sveltekit wizard
 export function hasSentryContent(
@@ -39,3 +40,7 @@ export function getInitCallInsertionIndex(
 
   return 0;
 }
+
+export function isHydrogenApp(packageJson: PackageDotJson): boolean {
+  return hasPackageInstalled('@shopify/hydrogen', packageJson);
+}