Render error page on theme asset upload error

jamesmengo · jamesmengo · commit d7665cdf6680 · 2025-01-16T15:32:03.000-08:00
diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts
@@ -0,0 +1,28 @@
+interface Error {
+  message: string
+  code: string
+}
+
+export function getErrorPage(options: {title: string; header: string; errors: Error[]}) {
+  const html = String.raw
+
+  return html`<html>
+    <head>
+      <title>${options.title ?? 'Unknown error'}</title>
+    </head>
+    <body
+      id="full-error-page"
+      style="display: flex; flex-direction: column; align-items: center; padding-top: 20px; font-family: Arial"
+    >
+      <h1>${options.header}</h1>
+
+      ${options.errors
+        .map(
+          (error) =>
+            `<p>${error.message}</p>
+              <pre>${error.code}</pre>`,
+        )
+        .join('')}
+    </body>
+  </html>`
+}
diff --git a/packages/theme/src/cli/utilities/theme-environment/html.ts b/packages/theme/src/cli/utilities/theme-environment/html.ts
@@ -1,6 +1,7 @@
 import {getProxyStorefrontHeaders, patchRenderingResponse} from './proxy.js'
 import {getInMemoryTemplates, injectHotReloadScript} from './hot-reload/server.js'
 import {render} from './storefront-renderer.js'
+import {getErrorPage} from './hot-reload/error-page.js'
 import {getExtensionInMemoryTemplates} from '../theme-ext-environment/theme-ext-server.js'
 import {logRequestLine} from '../log-request-line.js'
 import {defineEventHandler, getCookie, setResponseHeader, setResponseStatus, type H3Error} from 'h3'
@@ -31,6 +32,17 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
 
         assertThemeId(response, html, String(theme.id))
 
+        if (ctx.localThemeFileSystem.uploadErrors.size > 0) {
+          html = getErrorPage({
+            title: 'Failed to Upload Theme Files',
+            header: 'Upload Errors',
+            errors: Array.from(ctx.localThemeFileSystem.uploadErrors.entries()).map(([file, errors]) => ({
+              message: file,
+              code: errors.join('\n'),
+            })),
+          })
+        }
+
         if (ctx.options.liveReload !== 'off') {
           html = injectHotReloadScript(html)
         }
@@ -52,8 +64,12 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
         let errorPageHtml = getErrorPage({
           title,
           header: title,
-          message: [...rest, cause?.message ?? error.message].join('<br>'),
-          code: error.stack?.replace(`${error.message}\n`, '') ?? '',
+          errors: [
+            {
+              message: [...rest, cause?.message ?? error.message].join('<br>'),
+              code: error.stack?.replace(`${error.message}\n`, '') ?? '',
+            },
+          ],
         })
 
         if (ctx.options.liveReload !== 'off') {
@@ -65,24 +81,6 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
   })
 }
 
-function getErrorPage(options: {title: string; header: string; message: string; code: string}) {
-  const html = String.raw
-
-  return html`<html>
-    <head>
-      <title>${options.title ?? 'Unknown error'}</title>
-    </head>
-    <body
-      id="full-error-page"
-      style="display: flex; flex-direction: column; align-items: center; padding-top: 20px; font-family: Arial"
-    >
-      <h2>${options.header}</h2>
-      <p>${options.message}</p>
-      <pre>${options.code}</pre>
-    </body>
-  </html>`
-}
-
 function assertThemeId(response: Response, html: string, expectedThemeId: string) {
   /**
    * DOM example:
