fix(dev-server): handle invalid response (#45)

* fix(dev-server): handle invalid response * changeset * add comment
honojs · Dec 27, 2023 · 05b9841 · 05b9841
1 parent 679e3bd
commit 05b9841
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 5 deletions.
diff --git a/.changeset/poor-spoons-pump.md b/.changeset/poor-spoons-pump.md
@@ -0,0 +1,5 @@
+---
+'@hono/vite-dev-server': patch
+---
+
+fix: handle invalid response
diff --git a/packages/dev-server/e2e/e2e.test.ts b/packages/dev-server/e2e/e2e.test.ts
@@ -80,3 +80,10 @@ test('Should handle `env.ASSETS.fetch` function', async ({ page }) => {
   const data = await response?.json()
   expect(data['message']).toBe('Hello')
 })
+
+test('Should return an error page - /invalid-response', async ({ page }) => {
+  const response = await page.goto('/invalid-response')
+  expect(response?.status()).toBe(500)
+  expect(await response?.text()).not.toBe('')
+  expect(await response?.headerValue('content-type')).toMatch(/^text\/html/)
+})
diff --git a/packages/dev-server/e2e/mock/worker.ts b/packages/dev-server/e2e/mock/worker.ts
@@ -59,4 +59,9 @@ app.get('/assets/hello.json', async (c) => {
   return c.json(data)
 })
 
+// @ts-expect-error the response is string
+app.get('/invalid-response', () => {
+  return '<h1>Hello!</h1>'
+})
+
 export default app
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@hono/node-server": "^1.2.0",
-    "miniflare": "^3.20231016.0",
+    "miniflare": "^3.20231030.4",
     "minimatch": "^9.0.3"
   }
-}
+}
diff --git a/packages/dev-server/src/dev-server.ts b/packages/dev-server/src/dev-server.ts
@@ -84,12 +84,22 @@ export function devServer(options?: DevServerOptions): Plugin {
               env = await cloudflarePagesGetEnv(options.cf)()
             }
 
-            const response = await app.fetch(request, env, {
+            let response = await app.fetch(request, env, {
               waitUntil: async (fn) => fn,
               passThroughOnException: () => {
                 throw new Error('`passThroughOnException` is not supported')
               },
             })
+
+            /**
+             * If the response is not instance of `Response`, it returns simple HTML with error messages.
+             */
+            if (!(response instanceof Response)) {
+              const message = 'The response is not an instance of "Response", but: ' + response
+              console.error(message)
+              response = createErrorResponse(message)
+            }
+
             if (
               options?.injectClientScript !== false &&
               response.headers.get('content-type')?.match(/^text\/html/)
@@ -108,6 +118,29 @@ export function devServer(options?: DevServerOptions): Plugin {
   return plugin
 }
 
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function createErrorResponse(body: BodyInit) {
+  return new Response(
+    `<html><body><pre style="white-space:pre-wrap;">${escapeHtml(
+      body.toString()
+    )}</pre></body></html>`,
+    {
+      status: 500,
+      headers: {
+        'content-type': 'text/html;charset=utf-8',
+      },
+    }
+  )
+}
+
 function injectStringToResponse(response: Response, content: string) {
   const stream = response.body
   const newContent = new TextEncoder().encode(content)

diff --git a/yarn.lock b/yarn.lock
@@ -752,7 +752,7 @@ __metadata:
     "@playwright/test": ^1.37.1
     glob: ^10.3.10
     hono: ^3.11.7
-    miniflare: ^3.20231016.0
+    miniflare: ^3.20231030.4
     minimatch: ^9.0.3
     playwright: ^1.39.0
     publint: ^0.2.5
@@ -3973,7 +3973,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"miniflare@npm:^3.20231016.0":
+"miniflare@npm:^3.20231030.4":
   version: 3.20231030.4
   resolution: "miniflare@npm:3.20231030.4"
   dependencies: