feat: add basic html error

unjs · Mar 30, 2022 · d090aac · d090aac
1 parent 0929bcd
commit d090aac
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 27 deletions.
diff --git a/playground/api/error.ts b/playground/api/error.ts
@@ -0,0 +1,5 @@
+import { defineEventHandler } from 'h3'
+
+export default defineEventHandler((_event) => {
+  throw new Error('Booo')
+})
diff --git a/playground/app.ts b/playground/app.ts
@@ -2,24 +2,27 @@ import { defineEventHandler } from 'h3'
 
 export default defineEventHandler(() => {
   return `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
-    <title>Nitro Playground</title>
-  </head>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <link rel="icon" type="image/x-icon" href="/favicon.ico">
+      <title>Nitro Playground</title>
+    </head>
 
-  <body>
-    <h1>Welcome to Nitro playground!</h1>
-    <ul>
-      <li>
-        <a href="/api/test">/api/test</a>
-      </li>
-      <li>
-        <a href="/api/cache">/api/cache</a>
-      </li>
-    </ul>
-  </body>
+    <body>
+      <h1>Welcome to Nitro playground!</h1>
+      <ul>
+        <li>
+          <a href="/api/test">/api/test</a>
+        </li>
+        <li>
+          <a href="/api/cache">/api/cache</a>
+        </li>
+        <li>
+          <a href="/api/error">/api/error</a>
+        </li>
+      </ul>
+    </body>
 
 </html>`
 })
diff --git a/src/runtime/error.ts b/src/runtime/error.ts
@@ -1,20 +1,28 @@
 // import ansiHTML from 'ansi-html'
 import type { CompatibilityEvent } from 'h3'
-import { normalizeError } from './utils'
+import { normalizeError, isJsonRequest } from './utils'
 
 const isDev = process.env.NODE_ENV === 'development'
 
+interface ParsedError {
+  url: string
+  statusCode: number
+  statusMessage: number
+  message: string
+  stack: string[]
+}
+
 export default function handleError (error: any, event: CompatibilityEvent) {
   const { stack, statusCode, statusMessage, message } = normalizeError(error)
 
+  const showDetails = isDev && statusCode !== 404
+
   const errorObject = {
     url: event.req.url,
     statusCode,
     statusMessage,
     message,
-    description: isDev && statusCode !== 404
-      ? `<pre>${stack.map(i => `<span class="stack${i.internal ? ' internal' : ''}">${i.text}</span>`).join('\n')}</pre>`
-      : ''
+    stack: showDetails ? stack.map(i => i.text) : undefined
   }
 
   // Console output
@@ -24,6 +32,31 @@ export default function handleError (error: any, event: CompatibilityEvent) {
 
   event.res.statusCode = statusCode
   event.res.statusMessage = statusMessage
-  event.res.setHeader('Content-Type', 'application/json')
-  event.res.end(JSON.stringify(errorObject))
+
+  if (isJsonRequest(event)) {
+    event.res.setHeader('Content-Type', 'application/json')
+    event.res.end(JSON.stringify(errorObject))
+  } else {
+    event.res.setHeader('Content-Type', 'text/html')
+    event.res.end(renderHTMLError(errorObject))
+  }
+}
+
+function renderHTMLError (error: ParsedError): string {
+  return `<!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <title>${error.statusMessage} (${error.statusCode})</title>
+    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css">
+    <style> body { margin: 2em; } </style>
+  </head>
+  <body>
+    <h1>${error.statusMessage} (${error.statusCode})</h1>
+    <p>Error: ${error.message}</p>
+    <ul>${'\n' + error.stack.map(i => `      <li>${i}</li>`).join('\n')}
+    </ul>
+    <hr>
+    Generated by Nitro at ${new Date().toISOString()}
+  </body>
+</html>`
 }
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
@@ -27,11 +27,19 @@ export async function useRequestBody (request: globalThis.Request): Promise<any>
   }
 }
 
-const hasReqHeader = (req, header, includes) => req.headers[header] && req.headers[header].toLowerCase().includes(includes)
+export function hasReqHeader (req, header, includes) {
+  return req.headers[header] && req.headers[header].toLowerCase().includes(includes)
+}
 
-export const isJsonRequest = (event: CompatibilityEvent) => hasReqHeader(event.req, 'accept', 'application/json') || hasReqHeader(event.req, 'user-agent', 'curl/') || hasReqHeader(event.req, 'user-agent', 'httpie/')
+export function isJsonRequest (event: CompatibilityEvent) {
+  return hasReqHeader(event.req, 'accept', 'application/json') ||
+    hasReqHeader(event.req, 'user-agent', 'curl/') ||
+    hasReqHeader(event.req, 'user-agent', 'httpie/') ||
+    event.req.url.endsWith('.json') ||
+    event.req.url.includes('/api/')
+}
 
-export const normalizeError = (error: any) => {
+export function normalizeError (error: any) {
   const cwd = process.cwd()
   const stack = (error.stack || '')
     .split('\n')
@@ -41,6 +49,7 @@ export const normalizeError = (error: any) => {
       const text = line
         .replace(cwd + '/', './')
         .replace('webpack:/', '')
+        .replace('file://', '')
         .trim()
       return {
         text,
@@ -51,7 +60,7 @@ export const normalizeError = (error: any) => {
     })
 
   const statusCode = error.statusCode || 500
-  const statusMessage = error.statusMessage ?? (statusCode === 404 ? 'Page Not Found' : 'Internal Server Error')
+  const statusMessage = error.statusMessage ?? (statusCode === 404 ? 'Route Not Found' : 'Internal Server Error')
   const message = error.message || error.toString()
 
   return {