Make shopify theme dev more resilient to HTTP errors with the Admin API

.changeset/silent-ghosts-hide.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Make `shopify theme dev` more resilient to HTTP errors with the Admin API

packages/cli-kit/src/public/node/themes/api.test.ts

@@ -17,6 +17,7 @@ import {restRequest} from '@shopify/cli-kit/node/api/admin'
 import {AbortError} from '@shopify/cli-kit/node/error'
 
 vi.mock('@shopify/cli-kit/node/api/admin')
+vi.mock('@shopify/cli-kit/node/system')
 
 const session = {token: 'token', storeFqdn: 'my-shop.myshopify.com'}
 
@@ -305,9 +306,14 @@ describe('deleteTheme', () => {
 })
 
 describe('request errors', () => {
- const httpErrors = [401, 403, 500, 999]
-
- httpErrors.forEach((httpError) => {
+ const httpResponses = [
+ {httpError: 401, expectedRetries: 3},
+ {httpError: 403, expectedRetries: 1},
+ {httpError: 500, expectedRetries: 3},
+ {httpError: 999, expectedRetries: 1},
+ ]
+
+ httpResponses.forEach(({httpError, expectedRetries}) => {
  test(`${httpError} errors`, async () => {
  // Given
  vi.mocked(restRequest).mockResolvedValue({
@@ -316,12 +322,12 @@ describe('request errors', () => {
  headers: {},
  })
 
- await expect(async () => {
- // When
- return deleteTheme(1, session)
+ // When
+ const deletePromise = async () => deleteTheme(1, session)
 
- // Then
- }).rejects.toThrowError(AbortError)
+ // Then
+ await expect(deletePromise).rejects.toThrowError(AbortError)
+ expect(restRequest).toBeCalledTimes(expectedRetries)
  })
  })
 })

packages/cli-kit/src/public/node/themes/api.ts

@@ -10,6 +10,8 @@ import {
  buildThemeAsset,
 } from '@shopify/cli-kit/node/themes/factories'
 import {Result, Checksum, Key, Theme, ThemeAsset} from '@shopify/cli-kit/node/themes/types'
+import {outputDebug} from '@shopify/cli-kit/node/output'
+import {sleep} from '@shopify/cli-kit/node/system'
 
 export type ThemeParams = Partial<Pick<Theme, 'name' | 'role' | 'processing' | 'src'>>
 export type AssetParams = Pick<ThemeAsset, 'key'> & Partial<Pick<ThemeAsset, 'value' | 'attachment'>>
@@ -108,6 +110,7 @@ async function request<T>(
  session: AdminSession,
  params?: T,
  searchParams: {[name: string]: string} = {},
+ retries = 1,
 ): Promise<RestResponse> {
  const response = await throttler.throttle(() => restRequest(method, path, session, params, searchParams))
 
@@ -128,13 +131,33 @@ async function request<T>(
  case status === 403:
  return handleForbiddenError(response, session)
  case status === 401:
- throw new AbortError(`[${status}] API request unauthorized error`)
+ // Retry 401 errors to be resilient to authentication errors.
+ return handleRetriableError({
+ path,
+ retries,
+ retry: () => {
+ return request(method, path, session, params, searchParams, retries + 1)
+ },
+ fail: () => {
+ throw new AbortError(`[${status}] API request unauthorized error`)
+ },
+ })
  case status === 422:
  throw new AbortError(`[${status}] API request unprocessable content: ${errors(response)}`)
  case status >= 400 && status <= 499:
  throw new AbortError(`[${status}] API request client error`)
  case status >= 500 && status <= 599:
- throw new AbortError(`[${status}] API request server error`)
+ // Retry 500-family of errors as that may solve the issue (especially in 503 errors)
+ return handleRetriableError({
+ path,
+ retries,
+ retry: () => {
+ return request(method, path, session, params, searchParams, retries + 1)
+ },
+ fail: () => {
+ throw new AbortError(`[${status}] API request server error`)
+ },
+ })
  default:
  throw new AbortError(`[${status}] API request unexpected error`)
  }
@@ -175,3 +198,21 @@ function errorMessage(response: RestResponse): string {
 
  return ''
 }
+
+interface RetriableErrorOptions {
+ path: string
+ retries: number
+ retry: () => Promise<RestResponse>
+ fail: () => never
+}
+
+async function handleRetriableError({path, retries, retry, fail}: RetriableErrorOptions): Promise<RestResponse> {
+ if (retries >= 3) {
+ fail()
+ }
+
+ outputDebug(`[${retries}] Retrying '${path}' request...`)
+
+ await sleep(0.2)
+ return retry()
+}