diff --git a/src/server.ts b/src/server.ts
index cc613a0..a31f648 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -2,13 +2,14 @@ import { Hono } from 'hono'
 import { serveStatic } from 'hono/bun'
 import { join, resolve } from 'path'
 import { wrapAndRunCode } from './ribbit'
+import { AnsiUp } from 'ansi_up'
 
 export function startWeb(rootPath: string) {
   const root = resolve(rootPath)
   const app = new Hono()
 
   // console logging
-  app.use("*", async (c, next) => {
+  app.use('*', async (c, next) => {
     const start = Date.now()
     await next()
     const end = Date.now()
@@ -18,13 +19,22 @@ export function startWeb(rootPath: string) {
   // static files get served out of pub/
   app.use('/*', serveStatic({ root: join(root, 'pub') }))
 
-  app.on(['GET', 'POST'], ['/', '/:page{.+}'], async c => {
+  app.on(['GET', 'POST'], ['/', '/:page{.+}'], async (c) => {
     const page = c.req.param('page') || 'index'
     const params = c.req.query()
 
-    const file = Bun.file(join(root, `${page}.sh`))
+    const path = join(root, `${page}.sh`)
+    const file = Bun.file(path)
     if (await file.exists()) {
-      return c.html(await wrapAndRunCode(await file.text(), { params }))
+      try {
+        return c.html(await wrapAndRunCode(await file.text(), { params }))
+      } catch (e) {
+        let error = e instanceof Error ? e.message : String(e)
+        const ansiUp = new AnsiUp()
+        const errorHtml = ansiUp.ansi_to_html(error)
+        const blue = '#42A5F5'
+        return c.html(`<h1 style='color:${blue}'>🫧 Error in <a href='vscode://file/${path}' style='text-decoration:none;border-bottom:1px dotted ${blue};color:${blue}'>${path}</a></h1><pre>${errorHtml}</pre>`)
+      }
     } else {
       return c.text('404 Not Found', 404)
     }
@@ -35,4 +45,4 @@ export function startWeb(rootPath: string) {
     fetch: app.fetch,
     port: 3000,
   })
-}
\ No newline at end of file
+}