Fix async error stack in Storefront and Customer Account clients

.changeset/tidy-starfishes-warn.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix error stack traces thrown from Storefront API and Customer Account API clients when promises are not awaited.

packages/hydrogen/src/customer/customer.ts

@@ -33,7 +33,7 @@ import {
 import {parseJSON} from '../utils/parse-json';
 import {hashKey} from '../utils/hash';
 import {CrossRuntimeRequest, getDebugHeaders} from '../utils/request';
-import {getCallerStackLine} from '../utils/callsites';
+import {getCallerStackLine, withSyncStack} from '../utils/callsites';
 
 type CustomerAPIResponse<ReturnType> = {
   data: ReturnType;
@@ -355,13 +355,17 @@ export function createCustomerClient({
       mutation = minifyQuery(mutation);
       assertMutation(mutation, 'customer.mutate');
 
-      return fetchCustomerAPI({query: mutation, type: 'mutation', ...options});
+      return withSyncStack(
+        fetchCustomerAPI({query: mutation, type: 'mutation', ...options}),
+      );
     },
     query(query, options?) {
       query = minifyQuery(query);
       assertQuery(query, 'customer.query');
 
-      return fetchCustomerAPI({query, type: 'query', ...options});
+      return withSyncStack(
+        fetchCustomerAPI({query, type: 'query', ...options}),
+      );
     },
     authorize: async () => {
       const code = url.searchParams.get('code');

packages/hydrogen/src/storefront.ts

@@ -46,7 +46,7 @@ import {
   type GraphQLApiResponse,
   type GraphQLErrorOptions,
 } from './utils/graphql';
-import {getCallerStackLine} from './utils/callsites';
+import {getCallerStackLine, withSyncStack} from './utils/callsites';
 
 export type I18nBase = {
   language: LanguageCode;
@@ -399,16 +399,7 @@ export function createStorefrontClient<TI18n extends I18nBase>(
         query = minifyQuery(query);
         assertQuery(query, 'storefront.query');
 
-        const result = fetchStorefrontApi({
-          ...options,
-          query,
-        });
-
-        // This is a no-op, but we need to catch the promise to avoid unhandled rejections
-        // we cannot return the catch no-op, or it would swallow the error
-        result.catch(() => {});
-
-        return result;
+        return withSyncStack(fetchStorefrontApi({...options, query}));
       },
       /**
        * Sends a GraphQL mutation to the Storefront API.
@@ -427,16 +418,7 @@ export function createStorefrontClient<TI18n extends I18nBase>(
         mutation = minifyQuery(mutation);
         assertMutation(mutation, 'storefront.mutate');
 
-        const result = fetchStorefrontApi({
-          ...options,
-          mutation,
-        });
-
-        // This is a no-op, but we need to catch the promise to avoid unhandled rejections
-        // we cannot return the catch no-op, or it would swallow the error
-        result.catch(() => {});
-
-        return result;
+        return withSyncStack(fetchStorefrontApi({...options, mutation}));
       },
       cache,
       CacheNone,

packages/hydrogen/src/utils/callsites.ts

@@ -1,3 +1,20 @@
+/**
+ * Ensures that the error of an async rejected promise
+ * contains the entire synchronous stack trace.
+ */
+export function withSyncStack<T>(promise: Promise<T>): Promise<T> {
+  const syncError = new Error();
+
+  return promise.catch((error: Error) => {
+    // Remove error message, caller function and current function from the stack.
+    const syncStack = (syncError.stack ?? '').split('\n').slice(3).join('\n');
+
+    error.stack = `Error: ${error.message}\n` + syncStack;
+
+    throw error;
+  });
+}
+
 export type StackInfo = {
   file?: string;
   func?: string;