Fix infinite loop when checkout domain isn't supplied (#2235)

.changeset/spicy-zebras-build.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix infinite loop when checkoutDomain isn't supplied

examples/gtm/README.md

@@ -1,4 +1,4 @@
-# Hydrogen example: Shopify Analytics & Consent (unstable)
+# Hydrogen example: Shopify Analytics & Consent
 
 This folder contains an end-to-end example of how to implement Google Tag Manager for Hydrogen. Hydrogen supports both Shopify analytics, as well as third-party services.
 

packages/hydrogen/package.json

@@ -67,7 +67,6 @@
     "content-security-policy-builder": "^2.2.0",
     "type-fest": "^4.5.0",
     "source-map-support": "^0.5.21",
-    "tiny-invariant": "^1.3.1",
     "use-resize-observer": "^9.1.0",
     "worktop": "^0.7.3"
   },

packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx

@@ -37,6 +37,7 @@ import {ShopifyAnalytics} from './ShopifyAnalytics';
 import {CartAnalytics} from './CartAnalytics';
 import type {CustomerPrivacyApiProps} from '../customer-privacy/ShopifyCustomerPrivacy';
 import type {Storefront} from '../storefront';
+import {errorOnce, warnOnce} from '../utils/warning';
 
 export type ShopAnalytics = {
   /** The shop ID. */
@@ -67,7 +68,7 @@ export type AnalyticsProviderProps = {
       'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner'
     >
   >;
-  /** Disable throwing errors when required props are missing. */
+  /** @deprecated Disable throwing errors when required props are missing. */
   disableThrowOnError?: boolean;
   /** The domain scope of the cookie set with `useShopifyCookies`. **/
   cookieDomain?: string;
@@ -265,6 +266,10 @@ function shopifyCanTrack(): boolean {
   return false;
 }
 
+function messageOnError(field: string, envVar: string) {
+  return `[h2:error:Analytics.Provider] - ${field} is required. Make sure ${envVar} is defined in your environment variables. See https://h2o.fyi/analytics/consent to learn how to setup environment variables in the Shopify admin.`;
+}
+
 function AnalyticsProvider({
   canTrack: customCanTrack,
   cart: currentCart,
@@ -285,6 +290,31 @@ function AnalyticsProvider({
     customCanTrack ? () => customCanTrack : () => shopifyCanTrack,
   );
 
+  if (!!shop) {
+    // If mock shop is used, log error instead of throwing
+    if (/\/68817551382$/.test(shop.shopId)) {
+      warnOnce(
+        '[h2:error:Analytics.Provider] - Mock shop is used. Analytics will not work properly.',
+      );
+    } else {
+      if (!consent.checkoutDomain) {
+        const errorMsg = messageOnError(
+          'consent.checkoutDomain',
+          'PUBLIC_CHECKOUT_DOMAIN',
+        );
+        errorOnce(errorMsg);
+      }
+
+      if (!consent.storefrontAccessToken) {
+        const errorMsg = messageOnError(
+          'consent.storefrontAccessToken',
+          'PUBLIC_STOREFRONT_API_TOKEN',
+        );
+        errorOnce(errorMsg);
+      }
+    }
+  }
+
   const value = useMemo<AnalyticsContextValue>(() => {
     return {
       canTrack,
@@ -318,7 +348,7 @@ function AnalyticsProvider({
       {!!shop && !!currentCart && (
         <CartAnalytics cart={currentCart} setCarts={setCarts} />
       )}
-      {!!shop && (
+      {!!shop && consent.checkoutDomain && (
         <ShopifyAnalytics
           consent={consent}
           onReady={() => {
@@ -327,8 +357,6 @@ function AnalyticsProvider({
             setCanTrack(() => shopifyCanTrack);
           }}
           domain={cookieDomain}
-          disableThrowOnError={disableThrowOnError}
-          isMockShop={/\/68817551382$/.test(shop.shopId)}
         />
       )}
     </AnalyticsContext.Provider>