effect-start 0.10.0 → 0.11.1

package/src/HttpAppExtra.ts

@@ -1,9 +1,11 @@
 import {
   HttpRouter,
+  HttpServerRequest,
   HttpServerResponse,
 } from "@effect/platform"
 import * as HttpApp from "@effect/platform/HttpApp"
 import * as HttpMiddleware from "@effect/platform/HttpMiddleware"
+
 import {
   RequestError,
   RouteNotFound,
@@ -27,10 +29,242 @@ type GraciousError =
   | RequestError
   | ParseResult.ParseError
 
+type StackFrame = {
+  function: string
+  file: string
+  type: "application" | "framework" | "node_modules"
+}
+
+const ERROR_PAGE_CSS = `
+  :root {
+    --error-red: #c00;
+    --error-red-dark: #a00;
+    --bg-error: #fee;
+    --bg-light: #f5f5f5;
+    --bg-white: #fff;
+    --border-color: #ddd;
+    --text-dark: #333;
+    --text-gray: #666;
+    --text-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  }
+
+  * { box-sizing: border-box; }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    color: var(--text-dark);
+    line-height: 1.6;
+    min-height: 100dvh;
+  }
+
+  .error-page { width: 100%; margin: 0; }
+
+  .error-header {
+    background: var(--error-red);
+    color: white;
+    padding: 2rem 2.5rem;
+    margin: 0;
+    font-family: var(--text-mono);
+  }
+
+  .error-header h1 {
+    margin: 0 0 0.5rem 0;
+    font-size: 2rem;
+    font-weight: 600;
+    font-family: var(--text-mono);
+  }
+
+  .error-message {
+    margin: 0;
+    font-size: 1.1rem;
+    opacity: 0.95;
+    font-family: var(--text-mono);
+  }
+
+  .error-content {
+    background: var(--bg-white);
+    padding: 2rem 2.5rem;
+  }
+
+  .stack-trace {
+    margin: 1.5rem 0;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .stack-trace-header {
+    font-weight: 600;
+    padding: 0.75rem 1rem;
+    background: var(--bg-light);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .stack-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .stack-list li {
+    padding: 0.5rem 1rem;
+    font-family: var(--text-mono);
+    font-size: 0.875rem;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-white);
+  }
+
+  .stack-list li:last-child { border-bottom: none; }
+
+  .stack-list li:hover { background: #fafafa; }
+
+  .stack-list code {
+    background: transparent;
+    padding: 0;
+    font-weight: 600;
+    color: var(--error-red-dark);
+  }
+
+  .stack-list .path { color: var(--text-gray); margin-left: 0.5rem; }
+
+  .request-info {
+    margin: 1.5rem 0;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .request-info-header {
+    font-weight: 700;
+    padding: 0.75rem 1rem;
+    background: var(--bg-light);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .request-info-content {
+    padding: 1rem;
+    font-family: var(--text-mono);
+    font-size: 0.875rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  @media (max-width: 768px) {
+    .error-header, .error-content { padding: 1.5rem 1rem; }
+    .error-header h1 { font-size: 1.5rem; }
+  }
+`
+
+type ErrorHtmlData = {
+  status: number
+  tag: string
+  message?: string
+  details?: object
+  requestContext?: RequestContext
+  errorName?: string
+}
+
+function errorHtml(data: ErrorHtmlData): HttpServerResponse.HttpServerResponse {
+  let detailsHtml = ""
+
+  if (data.details) {
+    const detailsObj = data.details as Record<string, unknown>
+
+    if ("stack" in detailsObj && Array.isArray(detailsObj.stack)) {
+      const stackFrames = detailsObj.stack as StackFrame[]
+      detailsHtml = renderStackTrace(stackFrames)
+    }
+  }
+
+  const requestHtml = data.requestContext
+    ? renderRequestContext(data.requestContext)
+    : ""
+
+  const messageHtml = data.message
+    ? `<p class="error-message">${escapeHtml(data.message)}</p>`
+    : ""
+
+  const headerTitle = data.errorName ?? "UnexpectedError"
+
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${headerTitle} - Error ${data.status}</title>
+  <style>${ERROR_PAGE_CSS}</style>
+</head>
+<body>
+  <div class="error-header">
+    <h1>${escapeHtml(headerTitle)}</h1>
+    ${messageHtml}
+  </div>
+  <div class="error-content">
+    ${detailsHtml}
+    ${requestHtml}
+  </div>
+</body>
+</html>`
+  return HttpServerResponse.text(html, {
+    status: data.status,
+    contentType: "text/html",
+  })
+}
+
+function errorText(
+  status: number,
+  tag: string,
+  details?: object,
+): HttpServerResponse.HttpServerResponse {
+  const text = details ? `${tag}\n${JSON.stringify(details, null, 2)}` : tag
+  return HttpServerResponse.text(text, { status })
+}
+
+function respondWithError(
+  accept: string,
+  status: number,
+  tag: string,
+  message?: string,
+  details?: object,
+  requestContext?: RequestContext,
+  errorName?: string,
+): HttpServerResponse.HttpServerResponse {
+  if (accept.includes("text/html")) {
+    return errorHtml({
+      status,
+      tag,
+      message,
+      details,
+      requestContext,
+      errorName,
+    })
+  }
+  if (accept.includes("text/plain")) {
+    return errorText(status, tag, details)
+  }
+  return HttpServerResponse.unsafeJson(
+    { error: { _tag: tag, ...details } },
+    { status },
+  )
+}
+
 export const renderError = (
   error: unknown,
+  accept: string = "",
 ) =>
   Effect.gen(function*() {
+    const request = yield* HttpServerRequest.HttpServerRequest
+
+    const requestContext: RequestContext = {
+      url: request.url,
+      method: request.method,
+      headers: filterSensitiveHeaders(request.headers),
+    }
+
     let unwrappedError: GraciousError | undefined
 
     if (Cause.isCause(error)) {
@@ -45,68 +279,175 @@ export const renderError = (
 
     switch (unwrappedError?._tag) {
       case "RouteNotFound":
-        return yield* HttpServerResponse.unsafeJson({
-          error: {
-            _tag: unwrappedError._tag,
-          },
-        }, {
-          status: 404,
-        })
+        return respondWithError(
+          accept,
+          404,
+          "RouteNotFound",
+          "The page you were looking for doesn't exist",
+          undefined,
+          requestContext,
+        )
       case "RequestError": {
         const message = unwrappedError.reason === "Decode"
           ? "Request body is invalid"
-          : undefined
+          : "Request could not be processed"
 
-        return yield* HttpServerResponse.unsafeJson({
-          error: {
-            _tag: unwrappedError._tag,
+        return respondWithError(
+          accept,
+          400,
+          "RequestError",
+          message,
+          {
             reason: unwrappedError.reason,
-            message,
           },
-        }, {
-          status: 400,
-        })
+          requestContext,
+        )
       }
       case "ParseError": {
         const issues = yield* ParseResult.ArrayFormatter.formatIssue(
           unwrappedError.issue,
         )
-        const cleanIssues = issues.map(v => Record.remove(v, "_tag"))
+        const cleanIssues = issues.map((v) => Record.remove(v, "_tag"))
 
-        return yield* HttpServerResponse.unsafeJson({
-          error: {
-            _tag: unwrappedError._tag,
+        return respondWithError(
+          accept,
+          400,
+          "ParseError",
+          "Validation failed",
+          {
             issues: cleanIssues,
           },
-        }, {
-          status: 400,
-        })
+          requestContext,
+        )
       }
     }
 
-    return yield* HttpServerResponse.unsafeJson({
-      error: {
-        _tag: "UnexpectedError",
-      },
-    }, {
-      status: 500,
-    })
+    if (Cause.isCause(error)) {
+      const defects = [...Cause.defects(error)]
+      const defect = defects[0]
+      if (defect instanceof Error) {
+        const stackFrames = extractPrettyStack(defect.stack ?? "")
+        return respondWithError(
+          accept,
+          500,
+          "UnexpectedError",
+          defect.message,
+          {
+            name: defect.name,
+            stack: stackFrames,
+          },
+          requestContext,
+          defect.name,
+        )
+      }
+    }
+
+    return respondWithError(
+      accept,
+      500,
+      "UnexpectedError",
+      "An unexpected error occurred",
+      undefined,
+      requestContext,
+      "UnexpectedError",
+    )
   })
 
-function extractPrettyStack(stack: string) {
+function parseStackFrame(line: string): StackFrame | null {
+  const match = line.trim().match(StackLinePattern)
+  if (!match) return null
+
+  const [_, fn, fullPath] = match
+  const relativePath = fullPath.replace(process.cwd(), ".")
+
+  let type: "application" | "framework" | "node_modules"
+  if (relativePath.includes("node_modules")) {
+    type = "node_modules"
+  } else if (
+    relativePath.startsWith("./src")
+    || relativePath.startsWith("./examples")
+  ) {
+    type = "application"
+  } else {
+    type = "framework"
+  }
+
+  return {
+    function: fn,
+    file: relativePath,
+    type,
+  }
+}
+
+function extractPrettyStack(stack: string): StackFrame[] {
   return stack
     .split("\n")
     .slice(1)
-    .map((line) => {
-      const match = line.trim().match(StackLinePattern)
+    .map(parseStackFrame)
+    .filter((frame): frame is StackFrame => frame !== null)
+}
 
-      if (!match) return line
+function renderStackFrames(frames: StackFrame[]): string {
+  if (frames.length === 0) {
+    return "<li>No stack frames</li>"
+  }
+  return frames
+    .map(
+      (f) =>
+        `<li><code>${f.function}</code> at <span class="path">${f.file}</span></li>`,
+    )
+    .join("")
+}
 
-      const [_, fn, path] = match
-      const relativePath = path.replace(process.cwd(), ".")
-      return [fn, relativePath]
-    })
-    .filter(Boolean)
+function renderStackTrace(frames: StackFrame[]): string {
+  return `
+    <div class="stack-trace">
+      <div class="stack-trace-header">Stack Trace (${frames.length})</div>
+      <ul class="stack-list">${renderStackFrames(frames)}</ul>
+    </div>
+  `
+}
+
+function escapeHtml(unsafe: string): string {
+  return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;")
+}
+
+function filterSensitiveHeaders(
+  headers: Record<string, string>,
+): Record<string, string> {
+  const sensitive = ["authorization", "cookie", "x-api-key"]
+  return Object.fromEntries(
+    Object.entries(headers).filter(
+      ([key]) => !sensitive.includes(key.toLowerCase()),
+    ),
+  )
+}
+
+type RequestContext = {
+  url: string
+  method: string
+  headers: Record<string, string>
+}
+
+function renderRequestContext(context: RequestContext): string {
+  const headersText = Object
+    .entries(context.headers)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join("\n")
+
+  const requestText = `${context.method} ${context.url}\n${headersText}`
+
+  return `
+    <div class="request-info">
+      <div class="request-info-header">Request</div>
+      <div class="request-info-content">${escapeHtml(requestText)}</div>
+    </div>
+  `
 }
 
 export function handleErrors<
@@ -114,14 +455,25 @@ export function handleErrors<
   R,
 >(
   app: HttpApp.Default<E, R>,
-): HttpApp.Default<Exclude<E, RouteNotFound>, R> {
-  return app.pipe(
-    Effect.catchAllCause(renderError),
-  )
+): HttpApp.Default<
+  Exclude<E, RouteNotFound>,
+  R | HttpServerRequest.HttpServerRequest
+> {
+  return Effect.gen(function*() {
+    const request = yield* HttpServerRequest.HttpServerRequest
+    const accept = request.headers.accept ?? ""
+    return yield* app.pipe(
+      Effect.catchAllCause((cause) => renderError(cause, accept)),
+    )
+  })
 }
 
-export const withErrorHandled = HttpMiddleware.make(app => {
-  return app.pipe(
-    Effect.catchAllCause(renderError),
-  )
-})
+export const withErrorHandled = HttpMiddleware.make(app =>
+  Effect.gen(function*() {
+    const request = yield* HttpServerRequest.HttpServerRequest
+    const accept = request.headers.accept ?? ""
+    return yield* app.pipe(
+      Effect.catchAllCause((cause) => renderError(cause, accept)),
+    )
+  })
+)

package/src/Route.test.ts

@@ -472,6 +472,37 @@ t.it("context has only request and url when no schemas provided", () => {
     )
 })
 
+t.it("context.next() returns correct type for text handler", () => {
+  Route.text(function*(context) {
+    const next = context.next()
+    type NextType = Effect.Effect.Success<typeof next>
+    type _check = [NextType] extends [string] ? true : false
+    const _assert: _check = true
+    return "hello"
+  })
+})
+
+t.it("context.next() returns correct type for html handler", () => {
+  Route.html(function*(context) {
+    const next = context.next()
+    type NextType = Effect.Effect.Success<typeof next>
+    type _check = [NextType] extends [string | Route.GenericJsxObject] ? true
+      : false
+    const _assert: _check = true
+    return "<div>hello</div>"
+  })
+})
+
+t.it("context.next() returns correct type for json handler", () => {
+  Route.json(function*(context) {
+    const next = context.next()
+    type NextType = Effect.Effect.Success<typeof next>
+    type _check = [NextType] extends [Route.JsonValue] ? true : false
+    const _assert: _check = true
+    return { message: "hello" }
+  })
+})
+
 t.it("schemas work with all media types", () => {
   const PathSchema = Schema.Struct({
     id: Schema.String,
@@ -479,23 +510,19 @@ t.it("schemas work with all media types", () => {
 
   Route
     .schemaPathParams(PathSchema)
-    .html(
-      (context) => {
-        Function.satisfies<string>()(context.pathParams.id)
+    .html((context) => {
+      Function.satisfies<string>()(context.pathParams.id)
 
-        return Effect.succeed("<h1>Hello</h1>")
-      },
-    )
+      return Effect.succeed("<h1>Hello</h1>")
+    })
 
   Route
     .schemaPathParams(PathSchema)
-    .json(
-      (context) => {
-        Function.satisfies<string>()(context.pathParams.id)
+    .json((context) => {
+      Function.satisfies<string>()(context.pathParams.id)
 
-        return Effect.succeed({ message: "hello" })
-      },
-    )
+      return Effect.succeed({ message: "hello" })
+    })
 })
 
 t.it("schemas work with generator functions", () => {
@@ -505,13 +532,11 @@ t.it("schemas work with generator functions", () => {
 
   Route
     .schemaPathParams(IdSchema)
-    .text(
-      function*(context) {
-        Function.satisfies<string>()(context.pathParams.id)
+    .text(function*(context) {
+      Function.satisfies<string>()(context.pathParams.id)
 
-        return "hello"
-      },
-    )
+      return "hello"
+    })
 })
 
 t.it("schema property is correctly set on RouteSet", () => {
@@ -901,7 +926,7 @@ t.it("Route.layer creates RouteLayer with middleware", () => {
 
 t.it("Route.layer merges multiple route sets", () => {
   const routes1 = Route.html(Effect.succeed("<div>1</div>"))
-  const routes2 = Route.text(Effect.succeed("text"))
+  const routes2 = Route.text("text")
 
   const layer = Route.layer(routes1, routes2)
 
@@ -1093,7 +1118,7 @@ t.it("Route.matches returns false for different methods", () => {
 
 t.it("Route.matches returns false for different media types", () => {
   const route1 = Route.get(Route.html(Effect.succeed("<div>test</div>")))
-  const route2 = Route.get(Route.json(Effect.succeed({ data: "test" })))
+  const route2 = Route.get(Route.json({ data: "test" }))
 
   t.expect(Route.matches(route1.set[0]!, route2.set[0]!)).toBe(false)
 })
@@ -1119,7 +1144,8 @@ t.it("Route.matches returns true when one route has wildcard method", () => {
 
 t.describe("Route.merge", () => {
   t.it("types merged routes with union of methods", () => {
-    const textRoute = Route.text(Effect.succeed("hello"))
+    const textRoute = Route.text("hello")
+
     const htmlRoute = Route.html(Effect.succeed("<div>world</div>"))
 
     const merged = Route.merge(textRoute, htmlRoute)
@@ -1138,8 +1164,8 @@ t.describe("Route.merge", () => {
   })
 
   t.it("types merged routes with different methods", () => {
-    const getRoute = Route.get(Route.text(Effect.succeed("get")))
-    const postRoute = Route.post(Route.json(Effect.succeed({ ok: true })))
+    const getRoute = Route.get(Route.text("get"))
+    const postRoute = Route.post(Route.json({ ok: true }))
 
     const merged = Route.merge(getRoute, postRoute)
 
@@ -1186,8 +1212,8 @@ t.describe("Route.merge", () => {
   })
 
   t.it("merged route does content negotiation for text/plain", async () => {
-    const textRoute = Route.text(Effect.succeed("plain text"))
-    const htmlRoute = Route.html(Effect.succeed("<div>html</div>"))
+    const textRoute = Route.text("plain text")
+    const htmlRoute = Route.html("<div>html</div>")
 
     const merged = Route.merge(textRoute, htmlRoute)
     const route = merged.set[0]!
@@ -1217,8 +1243,8 @@ t.describe("Route.merge", () => {
   })
 
   t.it("merged route does content negotiation for text/html", async () => {
-    const textRoute = Route.text(Effect.succeed("plain text"))
-    const htmlRoute = Route.html(Effect.succeed("<div>html</div>"))
+    const textRoute = Route.text("plain text")
+    const htmlRoute = Route.html("<div>html</div>")
 
     const merged = Route.merge(textRoute, htmlRoute)
     const route = merged.set[0]!
@@ -1250,8 +1276,8 @@ t.describe("Route.merge", () => {
   t.it(
     "merged route does content negotiation for application/json",
     async () => {
-      const textRoute = Route.text(Effect.succeed("plain text"))
-      const jsonRoute = Route.json(Effect.succeed({ message: "json" }))
+      const textRoute = Route.text("plain text")
+      const jsonRoute = Route.json({ message: "json" })
 
       const merged = Route.merge(textRoute, jsonRoute)
       const route = merged.set[0]!
@@ -1282,8 +1308,8 @@ t.describe("Route.merge", () => {
   )
 
   t.it("merged route defaults to html for */* accept", async () => {
-    const textRoute = Route.text(Effect.succeed("plain text"))
-    const htmlRoute = Route.html(Effect.succeed("<div>html</div>"))
+    const textRoute = Route.text("plain text")
+    const htmlRoute = Route.html("<div>html</div>")
 
     const merged = Route.merge(textRoute, htmlRoute)
     const route = merged.set[0]!
@@ -1314,8 +1340,8 @@ t.describe("Route.merge", () => {
   t.it(
     "merged route defaults to first route when no Accept header",
     async () => {
-      const textRoute = Route.text(Effect.succeed("plain text"))
-      const htmlRoute = Route.html(Effect.succeed("<div>html</div>"))
+      const textRoute = Route.text("plain text")
+      const htmlRoute = Route.html("<div>html</div>")
 
       const merged = Route.merge(textRoute, htmlRoute)
       const route = merged.set[0]!