Merge pull request #5997 from Shopify/shopify_essential

Fix `_shopify_essential` issues related to data replication and unstable connections

Author: karreiro

.changeset/tame-mugs-arrive.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix `_shopify_essential` issues related to data replication and unstable connections

packages/theme/src/cli/utilities/theme-environment/storefront-session.test.ts

@@ -12,6 +12,7 @@ import {type AdminSession} from '@shopify/cli-kit/node/session'
 
 vi.mock('@shopify/cli-kit/node/http')
 vi.mock('@shopify/cli-kit/node/themes/api')
+vi.mock('@shopify/cli-kit/node/system')
 
 describe('Storefront API', () => {
   describe('isStorefrontPasswordProtected', () => {
@@ -76,6 +77,20 @@ describe('Storefront API', () => {
     test(`throws an ShopifyEssentialError when _shopify_essential can't be defined`, async () => {
       // Given
       vi.mocked(shopifyFetch)
+        .mockResolvedValueOnce(
+          response({
+            status: 200,
+            headers: {'set-cookie': ''},
+            text: () => Promise.resolve(''),
+          }),
+        )
+        .mockResolvedValueOnce(
+          response({
+            status: 200,
+            headers: {'set-cookie': ''},
+            text: () => Promise.resolve(''),
+          }),
+        )
         .mockResolvedValueOnce(
           response({
             status: 200,
@@ -129,6 +144,39 @@ describe('Storefront API', () => {
         ),
       )
     })
+
+    test('retries to obtain _shopify_essential cookie and succeeds', async () => {
+      // Given: first 2 calls return no cookie, 3rd returns the cookie
+      vi.mocked(shopifyFetch)
+        .mockResolvedValueOnce(
+          response({
+            status: 200,
+            headers: {'set-cookie': ''},
+            text: () => Promise.resolve(''),
+          }),
+        )
+        .mockResolvedValueOnce(
+          response({
+            status: 200,
+            headers: {'set-cookie': ''},
+            text: () => Promise.resolve(''),
+          }),
+        )
+        .mockResolvedValueOnce(
+          response({
+            status: 200,
+            headers: {'set-cookie': '_shopify_essential=:AABBCCDDEEFFGGHH==RETRYCOOKIE:; path=/; HttpOnly'},
+            text: () => Promise.resolve(''),
+          }),
+        )
+
+      // When
+      const cookies = await getStorefrontSessionCookies('https://example-store.myshopify.com', '123456')
+
+      // Then
+      expect(cookies).toEqual({_shopify_essential: ':AABBCCDDEEFFGGHH==RETRYCOOKIE:'})
+      expect(shopifyFetch).toHaveBeenCalledTimes(3)
+    })
   })
 
   // Tests rely on this function because the 'packages/theme' package cannot

packages/theme/src/cli/utilities/theme-environment/storefront-session.ts

@@ -5,6 +5,7 @@ import {AbortError} from '@shopify/cli-kit/node/error'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 import {type AdminSession} from '@shopify/cli-kit/node/session'
 import {passwordProtected} from '@shopify/cli-kit/node/themes/api'
+import {sleep} from '@shopify/cli-kit/node/system'
 
 export class ShopifyEssentialError extends Error {}
 
@@ -83,7 +84,12 @@ export async function getStorefrontSessionCookies(
   return cookieRecord
 }
 
-async function sessionEssentialCookie(storeUrl: string, themeId: string, headers: {[key: string]: string}) {
+async function sessionEssentialCookie(
+  storeUrl: string,
+  themeId: string,
+  headers: {[key: string]: string},
+  retries = 1,
+) {
   const params = new URLSearchParams({
     preview_theme_id: themeId,
     _fd: '0',
@@ -112,11 +118,20 @@ async function sessionEssentialCookie(storeUrl: string, themeId: string, headers
     outputDebug(
       `Failed to obtain _shopify_essential cookie.\n
        -Request ID: ${response.headers.get('x-request-id') ?? 'unknown'}\n
-       -Body: ${await response.text()}`,
-    )
-    throw new ShopifyEssentialError(
-      'Your development session could not be created because the "_shopify_essential" could not be defined. Please, check your internet connection.',
+       -Body: ${await response.text()}\n
+       -Status: ${response.status}\n`,
     )
+
+    if (retries > 3) {
+      throw new ShopifyEssentialError(
+        'Your development session could not be created because the "_shopify_essential" could not be defined. Please, check your internet connection.',
+      )
+    }
+
+    outputDebug('Retrying to obtain the _shopify_essential cookie...')
+    await sleep(retries)
+
+    return sessionEssentialCookie(storeUrl, themeId, headers, retries + 1)
   }
 
   return shopifyEssential