@visulima/error-handler 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+## @visulima/error-handler 1.0.0 (2025-09-10)
+
+### Features
+
+* **error-handler:** Added new error-handler package with various error handling utilities. ([585cae3](https://github.com/visulima/visulima/commit/585cae3f680cce87117936dafbbe0b0dad328725))
+
+### Miscellaneous Chores
+
+* **error-handler:** add Prettier configuration and ignore file, remove outdated test file ([a715d18](https://github.com/visulima/visulima/commit/a715d18d39b95eab51b69908e323ff332f78160d))

package/LICENSE.md

@@ -0,0 +1,193 @@
+MIT License
+
+Copyright (c) 2025 visulima
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+<!-- DEPENDENCIES -->
+
+# Licenses of bundled dependencies
+The published @visulima/error-handler artifact additionally contains code with the following licenses:
+ISC, MIT
+
+# Bundled dependencies:
+## depd
+License: MIT
+By: Douglas Christopher Wilson
+Repository: dougwilson/nodejs-depd
+
+> (The MIT License)
+>
+> Copyright (c) 2014-2018 Douglas Christopher Wilson
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---------------------------------------
+
+## http-errors
+License: MIT
+By: Jonathan Ong, Alan Plum, Douglas Christopher Wilson
+Repository: jshttp/http-errors
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014 Jonathan Ong me@jongleberry.com
+> Copyright (c) 2016 Douglas Christopher Wilson doug@somethingdoug.com
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+---------------------------------------
+
+## inherits
+License: ISC
+Repository: git://github.com/isaacs/inherits
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+> REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+> FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+> INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+> LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+> OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+> PERFORMANCE OF THIS SOFTWARE.
+
+---------------------------------------
+
+## setprototypeof
+License: ISC
+By: Wes Todd
+Repository: https://github.com/wesleytodd/setprototypeof.git
+
+> Copyright (c) 2015, Wes Todd
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
+> SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
+> OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+> CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---------------------------------------
+
+## statuses
+License: MIT
+By: Douglas Christopher Wilson, Jonathan Ong
+Repository: jshttp/statuses
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014 Jonathan Ong <me@jongleberry.com>
+> Copyright (c) 2016 Douglas Christopher Wilson <doug@somethingdoug.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+---------------------------------------
+
+## toidentifier
+License: MIT
+By: Douglas Christopher Wilson, Nick Baugh
+Repository: component/toidentifier
+
+> MIT License
+>
+> Copyright (c) 2016 Douglas Christopher Wilson <doug@somethingdoug.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+<!-- /DEPENDENCIES -->
+
+<!-- TYPE_DEPENDENCIES -->
+<!-- /TYPE_DEPENDENCIES -->

package/README.md

@@ -0,0 +1,388 @@
+<div align="center">
+  <h3>visulima error-handler</h3>
+  <p>
+  Error handlers for use in development and production environments.
+  </p>
+</div>
+
+<br />
+
+<div align="center">
+
+[![typescript-image]][typescript-url] [![npm-image]][npm-url] [![license-image]][license-url]
+
+</div>
+
+---
+
+<div align="center">
+    <p>
+        <sup>
+            Daniel Bannert's open source work is supported by the community on <a href="https://github.com/sponsors/prisis">GitHub Sponsors</a>
+        </sup>
+    </p>
+</div>
+
+---
+
+## Install
+
+```sh
+npm install @visulima/error-handler
+```
+
+```sh
+yarn add @visulima/error-handler
+```
+
+```sh
+pnpm add @visulima/error-handler
+```
+
+## Features
+
+- **Content Negotiation** - Automatically serves HTML, JSON, Problem JSON, or JSON:API based on `Accept` header
+- **Framework Agnostic** - Works with Node.js HTTP, Express, Fastify, Koa, Hono, and any Fetch-based runtime
+- **Production Ready** - Configurable error pages, trace control, and custom handlers
+- **TypeScript Support** - Full type safety with comprehensive TypeScript definitions
+- **Extensible** - Custom error handlers via regex matching on Accept headers
+- **CSP Support** - Built-in Content Security Policy nonce support for inline styles
+
+## Quick Start
+
+### Node.js HTTP Server
+
+```ts
+import { createServer } from "node:http";
+import httpHandler from "@visulima/error-handler/handler/http/node";
+
+const server = createServer(async (req, res) => {
+    try {
+        // your app logic...
+        throw new Error("Boom!");
+    } catch (error) {
+        const handler = await httpHandler(error as Error, {
+            showTrace: process.env.NODE_ENV !== "production"
+        });
+        return handler(req, res);
+    }
+});
+
+server.listen(3000);
+```
+
+### Express Setup
+
+```ts
+import express from "express";
+import httpHandler from "@visulima/error-handler/handler/http/node";
+
+const app = express();
+app.use(express.json());
+
+app.get("/", async (req, res) => {
+    try {
+        throw new Error("Example error");
+    } catch (error) {
+        const handler = await httpHandler(error as Error, {
+            showTrace: process.env.NODE_ENV !== "production"
+        });
+        return handler(req, res);
+    }
+});
+
+app.listen(3000);
+```
+
+### Hono (Fetch Runtime)
+
+```ts
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+import fetchHandler from "@visulima/error-handler/handler/fetch";
+
+const app = new Hono();
+
+app.get("/", (c) => c.text("OK"));
+app.get("/error", () => {
+    throw new Error("Boom from Hono");
+});
+
+app.onError(async (error, c) => {
+    const handler = await fetchHandler(error as Error, {
+        showTrace: process.env.NODE_ENV !== "production"
+    });
+    return handler(c.req.raw);
+});
+
+serve({ fetch: app.fetch, port: 3000 });
+```
+
+### Fetch-based Runtimes
+
+```ts
+// Cloudflare Workers
+import fetchHandler from "@visulima/error-handler/handler/fetch";
+
+export default {
+    async fetch(request: Request): Promise<Response> {
+        try {
+            throw new Error("Boom");
+        } catch (error) {
+            const handler = await fetchHandler(error as Error, {
+                showTrace: process.env.NODE_ENV !== "production"
+            });
+            return handler(request);
+        }
+    },
+};
+```
+
+```ts
+// Deno
+import fetchHandler from "@visulima/error-handler/handler/fetch";
+
+Deno.serve(async (request: Request) => {
+    try {
+        throw new Error("Boom");
+    } catch (error) {
+        const handler = await fetchHandler(error as Error, {
+            showTrace: process.env.NODE_ENV !== "production"
+        });
+        return handler(request);
+    }
+});
+```
+
+## Content Negotiation
+
+The error handler automatically serves different content types based on the `Accept` header:
+
+- `text/html` → HTML error page
+- `application/problem+json` → Problem JSON (RFC 7807)
+- `application/json` → Simple JSON response
+- `application/vnd.api+json` → JSON:API format
+- `text/plain` → Plain text
+- `application/javascript` → JavaScript error throw
+
+### Custom Handlers
+
+Add custom handlers for specific content types:
+
+```ts
+import httpHandler from "@visulima/error-handler/handler/http/node";
+
+const handler = await httpHandler(error, {
+    extraHandlers: [
+        {
+            regex: /application\/yaml/u,
+            handler: (error, req, res) => {
+                res.setHeader("content-type", "application/yaml");
+                res.end(`error: ${error.message}`);
+            },
+        },
+    ],
+});
+```
+
+## API
+
+### httpHandler(error, options?) => Promise<(req, res) => Promise<void>>
+
+Node.js HTTP handler for Express, Connect, Fastify, Koa, and similar frameworks.
+
+**Parameters:**
+- `error: Error` - The error to handle
+- `options?: HtmlErrorHandlerOptions & { showTrace?: boolean; extraHandlers?: ErrorHandlers }`
+
+**Options:**
+- `showTrace?: boolean` - Include stack trace in responses (default: `true`)
+- `extraHandlers?: ErrorHandlers` - Custom handlers for specific Accept headers
+- `errorPage?: string | ((params) => string | Promise<string>)` - Custom HTML error page
+- `cspNonce?: string` - Content Security Policy nonce for inline styles
+- `onError?: (error, request, response) => void | Promise<void>` - Callback for custom error logging
+
+### fetchHandler(error, options?) => Promise<(request) => Promise<Response>>
+
+Fetch API handler for Cloudflare Workers, Deno, Bun, and other Fetch-based runtimes.
+
+**Parameters:**
+- `error: Error` - The error to handle
+- `options?: HtmlErrorHandlerOptions & { showTrace?: boolean; extraHandlers?: FetchErrorHandlers }`
+
+**Options:**
+- Same as `httpHandler` but uses `FetchErrorHandlers` for custom handlers
+- `onError?: (error, request, response) => void | Promise<void>` - Callback for custom error logging
+
+### Error Handler Types
+
+```ts
+type ErrorHandlers = {
+    handler: ErrorHandler;
+    regex: RegExp;
+}[];
+
+type FetchErrorHandlers = {
+    handler: FetchErrorHandler;
+    regex: RegExp;
+}[];
+
+type HtmlErrorHandlerOptions = {
+    errorPage?: string | ((params: {
+        error: Error;
+        request: IncomingMessage;
+        response: ServerResponse;
+        reasonPhrase: string;
+        statusCode: number;
+    }) => string | Promise<string>);
+    cspNonce?: string;
+    onError?: (error: Error, request: IncomingMessage, response: ServerResponse) => void | Promise<void>;
+};
+```
+
+## Content Negotiation Examples
+
+### Basic Usage
+
+```ts
+import { createServer } from "node:http";
+import httpHandler from "@visulima/error-handler/handler/http/node";
+
+const server = createServer(async (req, res) => {
+    try {
+        throw new Error("Test error");
+    } catch (error) {
+        const handler = await httpHandler(error as Error, {
+            showTrace: process.env.NODE_ENV !== "production"
+        });
+        return handler(req, res);
+    }
+}).listen(3000);
+```
+
+### With Custom HTML Error Page
+
+```ts
+import httpHandler from "@visulima/error-handler/handler/http/node";
+
+const handler = await httpHandler(error, {
+    errorPage: ({ error, statusCode }) =>
+        `<!DOCTYPE html>
+        <html>
+        <head><title>Error ${statusCode}</title></head>
+        <body>
+            <h1>Error ${statusCode}</h1>
+            <p>${error.message}</p>
+        </body>
+        </html>`,
+    showTrace: false
+});
+```
+
+### With CSP Nonce Support
+
+```ts
+import httpHandler from "@visulima/error-handler/handler/http/node";
+
+const handler = await httpHandler(error, {
+    cspNonce: "nonce-abc123", // Will be added to <style> tags
+    showTrace: process.env.NODE_ENV !== "production"
+});
+```
+
+### With Custom Error Logging
+
+```ts
+import httpHandler from "@visulima/error-handler/handler/http/node";
+
+const handler = await httpHandler(error, {
+    onError: (error, request, response) => {
+        // Log to your preferred logging service
+        console.error(`[${new Date().toISOString()}] ${request.method} ${request.url} - ${error.message}`);
+
+        // Or send to external logging service
+        // logToService({ error: error.message, url: request.url, method: request.method });
+    },
+    showTrace: process.env.NODE_ENV !== "production"
+});
+```
+
+## Additional Exports
+
+This package provides additional exports for different use cases:
+
+### Runtime-Specific Handlers
+
+For convenience, you can also import runtime-specific handlers:
+
+```ts
+// Deno
+import fetchHandler from "@visulima/error-handler/handler/http/deno";
+
+// Bun
+import fetchHandler from "@visulima/error-handler/handler/http/bun";
+
+// Cloudflare Workers
+import fetchHandler from "@visulima/error-handler/handler/http/cloudflare";
+
+// Edge Runtime
+import fetchHandler from "@visulima/error-handler/handler/http/edge";
+
+// Hono
+import fetchHandler from "@visulima/error-handler/handler/http/hono";
+
+// CLI applications
+import cliHandler from "@visulima/error-handler/handler/cli";
+```
+
+### Individual Error Handlers
+
+You can also import individual error handlers for specific content types:
+
+```ts
+import { htmlErrorHandler } from "@visulima/error-handler/error-handler/html";
+import { problemErrorHandler } from "@visulima/error-handler/error-handler/problem";
+import { jsonErrorHandler } from "@visulima/error-handler/error-handler/json";
+import { jsonapiErrorHandler } from "@visulima/error-handler/error-handler/jsonapi";
+import { textErrorHandler } from "@visulima/error-handler/error-handler/text";
+import { jsonpErrorHandler } from "@visulima/error-handler/error-handler/jsonp";
+import { xmlErrorHandler } from "@visulima/error-handler/error-handler/xml";
+```
+
+### Main Export
+
+```ts
+import { createNegotiatedErrorHandler } from "@visulima/error-handler";
+```
+
+## Related
+
+- [@visulima/flare](https://github.com/visulima/visulima/tree/main/packages/flare) - Full-featured error overlay with inspector
+- [@visulima/error](https://github.com/visulima/visulima/tree/main/packages/error) - Error utilities and solution finders
+
+## Supported Node.js Versions
+
+Libraries in this ecosystem make the best effort to track [Node.js’ release schedule](https://github.com/nodejs/release#release-schedule).
+Here’s [a post on why we think this is important](https://medium.com/the-node-js-collection/maintainers-should-consider-following-node-js-release-schedule-ab08ed4de71a).
+
+## Contributing
+
+If you would like to help take a look at the [list of issues](https://github.com/visulima/visulima/issues) and check our [Contributing](.github/CONTRIBUTING.md) guidelines.
+
+> **Note:** please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
+
+## Credits
+
+-   [Daniel Bannert](https://github.com/prisis)
+-   [All Contributors](https://github.com/visulima/visulima/graphs/contributors)
+
+## License
+
+The visulima error-handler is open-sourced software licensed under the [MIT][license-url]
+
+[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
+[typescript-url]: https://www.typescriptlang.org/ "TypeScript"
+[license-image]: https://img.shields.io/npm/l/@visulima/error-handler?color=blueviolet&style=for-the-badge
+[license-url]: LICENSE.md "license"
+[npm-image]: https://img.shields.io/npm/v/@visulima/error-handler/latest.svg?style=for-the-badge&logo=npm
+[npm-url]: https://www.npmjs.com/package/@visulima/error-handler/v/latest "npm"

package/dist/error-handler/html-error-handler.d.ts

@@ -0,0 +1,16 @@
+import { IncomingMessage, ServerResponse } from 'node:http';
+import { a as ErrorHandler } from '../packem_shared/types.d-DLy8CCca.js';
+
+type HtmlErrorHandlerOptions = {
+    errorPage?: string | ((params: {
+        error: Error;
+        request: IncomingMessage;
+        response: ServerResponse;
+        reasonPhrase: string;
+        statusCode: number;
+    }) => string | Promise<string>);
+    cspNonce?: string;
+};
+declare const htmlErrorHandler: (options?: HtmlErrorHandlerOptions) => ErrorHandler;
+
+export { type HtmlErrorHandlerOptions, htmlErrorHandler };

package/dist/error-handler/html-error-handler.js

@@ -0,0 +1,63 @@
+import { getReasonPhrase } from 'http-status-codes';
+import { a as addStatusCodeToResponse } from '../packem_shared/add-status-code-to-response-DdfxTQsK.js';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const htmlErrorHandler = /* @__PURE__ */ __name((options = {}) => {
+  return async (error, request, response) => {
+    addStatusCodeToResponse(response, error);
+    response.setHeader("content-type", "text/html; charset=utf-8");
+    const title = getReasonPhrase(response.statusCode) || "Error";
+    const nonceAttr = options.cspNonce ? ` nonce="${options.cspNonce}"` : "";
+    if (options.errorPage) {
+      const override = typeof options.errorPage === "function" ? await options.errorPage({
+        error,
+        request,
+        response,
+        reasonPhrase: title,
+        statusCode: response.statusCode
+      }) : options.errorPage;
+      if (override) {
+        response.end(override);
+        return;
+      }
+    }
+    response.end(`<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>${title}</title>
+        <meta name="robots" content="noindex">
+
+        <style${nonceAttr}>
+            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}code{font-family:monospace,monospace;font-size:1em}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}code{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-gray-400{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.border-r{border-right-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-xl{max-width:36rem}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-wider{letter-spacing:.05em}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\\:rounded-lg{border-radius:.5rem}.sm\\:block{display:block}.sm\\:items-center{align-items:center}.sm\\:justify-start{justify-content:flex-start}.sm\\:justify-between{justify-content:space-between}.sm\\:h-20{height:5rem}.sm\\:ml-0{margin-left:0}.sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\\:pt-0{padding-top:0}.sm\\:text-left{text-align:left}.sm\\:text-right{text-align:right}}@media (min-width:768px){.md\\:border-t-0{border-top-width:0}.md\\:border-l{border-left-width:1px}.md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
+        </style>
+
+        <style${nonceAttr}>
+            body {
+                font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            }
+        </style>
+    </head>
+    <body class="antialiased">
+        <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+            <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
+                <div class="flex items-center justify-center">
+                    <div class="px-6 text-lg text-gray-600 dark:text-gray-400 border-r border-gray-400 dark:border-gray-700 tracking-wider font-semibold">
+                        ${response.statusCode}
+                    </div>
+
+                    <div class="ml-4 text-lg text-gray-600 dark:text-gray-400 uppercase tracking-wider">
+                        ${title}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>`);
+  };
+}, "htmlErrorHandler");
+
+export { htmlErrorHandler };