Add 'error-overlay' flag to theme dev command to toggle error overlay rendering

Author: jamesmengo

packages/theme/src/cli/commands/theme/dev.ts

@@ -9,7 +9,7 @@ import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
 import {Theme} from '@shopify/cli-kit/node/themes/types'
 import {ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session'
-import type {LiveReload} from '../../utilities/theme-environment/types.js'
+import type {ErrorOverlayMode, LiveReload} from '../../utilities/theme-environment/types.js'
 
 export default class Dev extends ThemeCommand {
   static summary =
@@ -54,6 +54,15 @@ You can run this command only in a directory that matches the [default Shopify t
       options: ['hot-reload', 'full-page', 'off'],
       env: 'SHOPIFY_FLAG_LIVE_RELOAD',
     }),
+    'error-overlay': Flags.string({
+      description: `Controls the visibility of the error overlay when an theme asset upload fails:
+- silent Prevents the error overlay from appearing.
+- default Displays the error overlay.
+      `,
+      options: ['silent', 'default'],
+      default: 'default',
+      env: 'SHOPIFY_FLAG_ERROR_OVERLAY',
+    }),
     poll: Flags.boolean({
       hidden: true,
       description: 'Force polling to detect file changes.',
@@ -147,6 +156,7 @@ You can run this command only in a directory that matches the [default Shopify t
       host: flags.host,
       port: flags.port,
       'live-reload': flags['live-reload'] as LiveReload,
+      'error-overlay': flags['error-overlay'] as ErrorOverlayMode,
       force: flags.force,
       open: flags.open,
       'theme-editor-sync': flags['theme-editor-sync'],

packages/theme/src/cli/services/dev.test.ts

@@ -50,6 +50,7 @@ describe('dev', () => {
     noDelete: false,
     ignore: [],
     only: [],
+    'error-overlay': 'default',
   }
 
   const session: DevServerSession = {
@@ -101,6 +102,7 @@ describe('dev', () => {
           ignore: [],
           noDelete: false,
           only: [],
+          errorOverlay: 'default',
         },
       })
     })

packages/theme/src/cli/services/dev.ts

@@ -1,7 +1,7 @@
 import {hasRequiredThemeDirectories, mountThemeFileSystem} from '../utilities/theme-fs.js'
 import {ensureDirectoryConfirmed} from '../utilities/theme-ui.js'
 import {setupDevServer} from '../utilities/theme-environment/theme-environment.js'
-import {DevServerContext, LiveReload} from '../utilities/theme-environment/types.js'
+import {DevServerContext, ErrorOverlayMode, LiveReload} from '../utilities/theme-environment/types.js'
 import {isStorefrontPasswordProtected} from '../utilities/theme-environment/storefront-session.js'
 import {ensureValidPassword} from '../utilities/theme-environment/storefront-password-prompt.js'
 import {emptyThemeExtFileSystem} from '../utilities/theme-fs-empty.js'
@@ -31,6 +31,7 @@ export interface DevOptions {
   force: boolean
   'theme-editor-sync': boolean
   'live-reload': LiveReload
+  'error-overlay': ErrorOverlayMode
   noDelete: boolean
   ignore: string[]
   only: string[]
@@ -90,6 +91,7 @@ export async function dev(options: DevOptions) {
       noDelete: options.noDelete,
       ignore: options.ignore,
       only: options.only,
+      errorOverlay: options['error-overlay'],
     },
   }
 

packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts

@@ -330,6 +330,7 @@ function createTestContext(options?: {files?: [string, string][]}) {
       liveReload: 'hot-reload',
       open: false,
       themeEditorSync: false,
+      errorOverlay: 'default',
     },
   }
 

packages/theme/src/cli/utilities/theme-environment/html.ts

@@ -32,7 +32,7 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
 
         assertThemeId(response, html, String(theme.id))
 
-        if (ctx.localThemeFileSystem.uploadErrors.size > 0) {
+        if (ctx.options.errorOverlay !== 'silent' && ctx.localThemeFileSystem.uploadErrors.size > 0) {
           html = getErrorPage({
             title: 'Failed to Upload Theme Files',
             header: 'Upload Errors',

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

@@ -96,6 +96,7 @@ describe('setupDevServer', () => {
       liveReload: 'hot-reload',
       open: false,
       themeEditorSync: false,
+      errorOverlay: 'default',
     },
   }
 

packages/theme/src/cli/utilities/theme-environment/types.ts

@@ -49,6 +49,13 @@ export interface DevServerSession extends AdminSession {
  */
 export type LiveReload = 'hot-reload' | 'full-page' | 'off'
 
+/**
+ * Controls the visibility of the error overlay when an asset upload fails. Options: ['silent', 'default']
+ * - silent: Prevents the error overlay from appearing.
+ * - default: Displays the error overlay.
+ */
+export type ErrorOverlayMode = 'silent' | 'default'
+
 /**
  * Maintains the state of local and remote assets in theme development server.
  */
@@ -117,6 +124,11 @@ export interface DevServerContext {
      * Automatically open the theme preview in the default browser.
      */
     open: boolean
+
+    /**
+     * Controls the visibility of the error overlay when an asset upload fails.
+     */
+    errorOverlay: ErrorOverlayMode
   }
 }
 

packages/theme/src/cli/utilities/theme-ext-environment/theme-ext-server.ts

@@ -90,6 +90,7 @@ async function contextDevServerContext(
       port: port.toString(),
       liveReload: 'hot-reload',
       open: false,
+      errorOverlay: 'default',
     },
   }
 }