Ignore the API collect endpoint in the shopify theme dev and shopify app dev commands

karreiro · karreiro · commit 12a4037cf98d · 2026-02-03T19:16:52.000+01:00
diff --git a/.changeset/quiet-toys-admire.md b/.changeset/quiet-toys-admire.md
@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Ignore API collect endpoint in `shopify theme dev` and `shopify app dev` commands
diff --git a/packages/theme/src/cli/utilities/theme-environment/proxy.test.ts b/packages/theme/src/cli/utilities/theme-environment/proxy.test.ts
@@ -126,6 +126,50 @@ describe('dev proxy', () => {
         `"<https://cdn.shopify.com>; rel=\\"preconnect\\", <https://cdn.shopify.com>; rel=\\"preconnect\\"; crossorigin,</cdn/shop/t/10/assets/component-localization-form.css?v=120620094879297847921723560016>; as=\\"style\\"; rel=\\"preload\\""`,
       )
     })
+
+    test('proxies beacon endpoint URLs to local server', () => {
+      const content = html`<html>
+        <head></head>
+        <body>
+          <div data-shs-beacon-endpoint="https://my-store.myshopify.com/api/collect"></div>
+        </body>
+      </html>`
+
+      expect(injectCdnProxy(content, ctx)).toMatchInlineSnapshot(`
+        "<html>
+                <head></head>
+                <body>
+                  <div data-shs-beacon-endpoint=\\"/api/collect\\"></div>
+                </body>
+              </html>"
+      `)
+    })
+
+    test('proxies beacon endpoint URLs with single quotes', () => {
+      const content = `<div data-shs-beacon-endpoint='https://my-store.myshopify.com/api/collect'></div>`
+
+      expect(injectCdnProxy(content, ctx)).toMatchInlineSnapshot(
+        `"<div data-shs-beacon-endpoint='/api/collect'></div>"`,
+      )
+    })
+
+    test('proxies multiple beacon endpoint URLs in the same content', () => {
+      const content = html`<html>
+        <body>
+          <div data-shs-beacon-endpoint="https://my-store.myshopify.com/api/collect"></div>
+          <span data-shs-beacon-endpoint="https://my-store.myshopify.com/api/collect"></span>
+        </body>
+      </html>`
+
+      expect(injectCdnProxy(content, ctx)).toMatchInlineSnapshot(`
+        "<html>
+                <body>
+                  <div data-shs-beacon-endpoint=\\"/api/collect\\"></div>
+                  <span data-shs-beacon-endpoint=\\"/api/collect\\"></span>
+                </body>
+              </html>"
+      `)
+    })
   })
 
   describe('patchRenderingResponse', () => {
diff --git a/packages/theme/src/cli/utilities/theme-environment/proxy.ts b/packages/theme/src/cli/utilities/theme-environment/proxy.ts
@@ -14,6 +14,7 @@ import type {DevServerContext} from './types.js'
 export const VANITY_CDN_PREFIX = '/cdn/'
 export const EXTENSION_CDN_PREFIX = '/ext/cdn/'
 
+const API_COLLECT_PATH = '/api/collect'
 const CART_PATTERN = /^\/cart\//
 const CHECKOUT_PATTERN = /^\/checkouts\/(?!internal\/)/
 const ACCOUNT_PATTERN = /^\/account(\/login\/multipass(\/[^/]+)?|\/logout)?\/?$/
@@ -28,7 +29,7 @@ const IGNORED_ENDPOINTS = [
   '/web-pixels@',
   '/wpm',
   '/services/',
-  '/api/collect',
+  API_COLLECT_PATH,
   // Cloudflare's turnstile challenge #6416
   '/cdn-cgi/challenge-platform',
 ]
@@ -125,6 +126,11 @@ function getStoreFqdnForRegEx(ctx: DevServerContext) {
 export function injectCdnProxy(originalContent: string, ctx: DevServerContext) {
   let content = originalContent
 
+  // -- The beacon endpoint is patched in injectCdnProxy to be proxied and ignored locally
+  const beaconEndpointREStr = `(data-shs-beacon-endpoint=["'])https://${getStoreFqdnForRegEx(ctx)}${API_COLLECT_PATH}`
+  const beaconEndpointRE = new RegExp(beaconEndpointREStr, 'g')
+  content = content.replace(beaconEndpointRE, `$1${API_COLLECT_PATH}`)
+
   // -- Redirect all usages to the vanity CDN to the local server:
   const vanityCdnRE = new RegExp(`(https?:)?//${getStoreFqdnForRegEx(ctx)}${VANITY_CDN_PREFIX}`, 'g')
   content = content.replace(vanityCdnRE, VANITY_CDN_PREFIX)

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@shopify/theme': patch
 +---
++
 +Ignore API collect endpoint in `shopify theme dev` and `shopify app dev` commands