jskelet 0.4.7 → 0.4.8

package/CHANGELOG.md

@@ -10,6 +10,11 @@ one is listed under a **Breaking** heading.
 
 ### Added
 
+- Dev overlay Errors tab now lists failed SSR and browser `fetch` calls with
+  page path, API URL, optional island name, and expandable response-body
+  details (JSON instead of `[object Object]`). Server `console.error` /
+  `console.warn` records also carry the current page when they fire during
+  render.
 - Visit-driven HTML prewarm (`cache().prewarm.onVisit`): after each public
   cacheable page response, same-origin links in the HTML are warmed in the
   background (document order, `perPage` cap). Mutually exclusive with classic

package/docs/09-dev-araclari.md

@@ -177,9 +177,13 @@ Tüm arayüz shadow DOM içinde durur, sayfanın CSS'i ile karışmaz.
 Gösterdikleri:
 
 - **Hatalar:** tarayıcı tarafındaki JS hataları, kaynak yükleme hataları
-  (`img`/`script`/`link`), ve sunucudaki `console.error` / `console.warn`
-  çıktıları. Sunucu tarafında `console` sarılır, böylece uyarılar terminalde
-  kaybolmaz.
+  (`img`/`script`/`link`), sunucudaki `console.error` / `console.warn`
+  çıktıları, ve SSR / tarayıcı `fetch` çağrılarının 4xx/5xx ya da ağ
+  başarısızlıkları. Her kayıt mümkün olduğunca **sayfa yolu**, **API URL** ve
+  (istemcide) **island adı** taşır; yanıt gövdesi **show details** ile açılır —
+  `[object Object]` yerine JSON. Sunucu tarafında `console` sarılır, böylece
+  uyarılar terminalde kaybolmaz; upstream hataları uygulamanın kendi logger'ı
+  stderr'e yazsa bile overlay'e düşer.
 - **SEO:** açık sayfanın istemci tarafı taraması — title ve meta description
   uzunluğu, `html lang`, viewport, canonical, robots/`noindex`, Open Graph ve
   Twitter etiketleri, H1/outline, görsel `alt`, boş linkler ve JSON-LD parse
@@ -244,9 +248,11 @@ http://localhost:3000/__jskelet/dev/report
   gezilmemiş ama ısıtılmış sayfalar da listelenir: SSR tarafı bilinir, istemci
   ölçümleri boş kalır.
 - **Sunucu API çağrıları:** SSR sırasında yapılan dış `fetch` çağrıları — URL,
-  host, metot, durum, süre, bayt. `globalThis.fetch` yalnızca development'ta
+  host, metot, durum, süre, bayt, hangi sayfa render edilirken yapıldığı ve
+  başarısız cevaplarda gövde özeti. `globalThis.fetch` yalnızca development'ta
   sarılır; üretim yolu dokunulmaz kalır. Kendi sunucumuza yapılan istekler
-  (ısıtma, sağlık kontrolü) API sayılmaz.
+  (ısıtma, sağlık kontrolü) API sayılmaz. Başarısız çağrılar overlay Errors
+  sekmesine de düşer.
 - **Build çıktısı:** manifest'teki her varlığın ham/gzip/brotli boyutu, ve
   esbuild metafile'ından chunk analizi — her çıktının boyutu, hangi kaynaklardan
   oluştuğu, hangi chunk'ları import ettiği. Kaynaklar okunur gruplara indirgenir

package/docs/en/09-dev-tools.md

@@ -181,9 +181,13 @@ the page's CSS.
 What it shows:
 
 - **Errors:** browser-side JS errors, resource loading errors
-  (`img`/`script`/`link`), and the server's `console.error` / `console.warn`
-  output. On the server side `console` is wrapped so warnings do not get lost in
-  the terminal.
+  (`img`/`script`/`link`), the server's `console.error` / `console.warn`
+  output, and failed SSR / browser `fetch` calls (4xx/5xx or network). Each
+  record carries a **page path**, **API URL**, and (on the client) an **island
+  name** when known; the response body opens under **show details** as JSON
+  instead of `[object Object]`. On the server side `console` is wrapped so
+  warnings do not get lost in the terminal; upstream failures still land in the
+  overlay even when the app's own logger writes them only to stderr.
 - **SEO:** a client-side scan of the current page — title and meta description
   length, `html lang`, viewport, canonical, robots/`noindex`, Open Graph and
   Twitter tags, H1/outline, image `alt`, empty links, and JSON-LD parse errors.
@@ -248,9 +252,10 @@ Its contents:
   status of the SSR output. Pages that were never visited but were warmed are
   listed too: the SSR side is known, the client measurements stay empty.
 - **Server API calls:** outbound `fetch` calls made during SSR — URL, host,
-  method, status, duration, bytes. `globalThis.fetch` is only wrapped in
-  development; the production path is left untouched. Requests to our own server
-  (warming, health check) do not count as API calls.
+  method, status, duration, bytes, which page was rendering, and a body summary
+  on failures. `globalThis.fetch` is only wrapped in development; the production
+  path is left untouched. Requests to our own server (warming, health check) do
+  not count as API calls. Failures also appear on the overlay Errors tab.
 - **Build output:** the raw/gzip/brotli size of every asset in the manifest, and
   chunk analysis from esbuild's metafile — the size of each output, which
   sources it is made of, which chunks it imports. Sources are reduced to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jskelet",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "A framework that feels like no framework: Express 5 + build-time .jsk (or EJS) SSR, vanilla JS islands, Tailwind v4 and an in-process HTML TTL cache.",
   "type": "module",
   "license": "MIT",

package/src/client/devtools/overlay.js

@@ -17,7 +17,7 @@ const BASE = "/__jskelet/dev";
 const POLL_MS = 2000;
 const MAX_ERRORS = 100;
 
-/** @type {{ id: number, level: string, message: string, stack: string | null, source: string, at: number }[]} */
+/** @type {{ id: number, level: string, message: string, stack: string | null, source: string, page?: string | null, island?: string | null, url?: string | null, details?: unknown, at: number }[]} */
 const clientErrors = [];
 let nextId = 1;
 
@@ -109,7 +109,14 @@ function loadState() {
 /**
  * @param {string} level
  * @param {string} message
- * @param {{ stack?: string | null, source?: string }} [extra]
+ * @param {{
+ *   stack?: string | null,
+ *   source?: string,
+ *   page?: string | null,
+ *   island?: string | null,
+ *   url?: string | null,
+ *   details?: unknown,
+ * }} [extra]
  */
 function pushError(level, message, extra = {}) {
   clientErrors.unshift({
@@ -118,6 +125,10 @@ function pushError(level, message, extra = {}) {
     message,
     stack: extra.stack ?? null,
     source: extra.source ?? "client",
+    page: extra.page ?? location.pathname,
+    island: extra.island ?? null,
+    url: extra.url ?? null,
+    details: extra.details ?? null,
     at: Date.now(),
   });
   if (clientErrors.length > MAX_ERRORS) clientErrors.length = MAX_ERRORS;
@@ -318,6 +329,8 @@ const clientApi = [];
 /**
  * Tarayıcıdaki veri çağrıları. Panelin kendi uçları ve statik varlıklar
  * sayılmaz; amaç sayfanın hangi API'lere kaç ms harcadığını görmek.
+ * 4xx/5xx ve ağ hataları Errors sekmesine de düşer — hangi sayfa / island
+ * bağlamı mümkün olduğunca doldurulur.
  */
 function captureFetch() {
   const original = window.fetch.bind(window);
@@ -326,13 +339,34 @@ function captureFetch() {
     const url = typeof input === "string" ? input : (input?.url ?? String(input));
     if (url.includes(BASE)) return original(input, init);
 
+    const method = String(init?.method ?? "GET").toUpperCase();
     const started = performance.now();
     try {
       const response = await original(input, init);
       record(url, performance.now() - started, response.status, response);
+      if (!response.ok) {
+        void reportFailedFetch({
+          url,
+          method,
+          status: response.status,
+          response,
+        });
+      }
       return response;
     } catch (error) {
       record(url, performance.now() - started, 0, null);
+      pushError(
+        "error",
+        `${method} ${shortUrl(url)} → network error`,
+        {
+          source: "fetch",
+          url,
+          page: location.pathname + location.search,
+          island: inferIsland(),
+          stack: error instanceof Error ? error.stack : null,
+          details: error instanceof Error ? error.message : String(error),
+        },
+      );
       throw error;
     }
   };
@@ -355,6 +389,99 @@ function captureFetch() {
   }
 }
 
+/**
+ * Başarısız bir tarayıcı fetch'ini Errors listesine yazar. Gövdeyi klonlayıp
+ * okur; asıl Response tüketilmez.
+ *
+ * @param {{ url: string, method: string, status: number, response: Response }} call
+ */
+async function reportFailedFetch(call) {
+  const details = await readResponseDetails(call.response);
+  const summary = detailSummary(details);
+  pushError(
+    "error",
+    `${call.method} ${shortUrl(call.url)} → ${call.status}${
+      summary ? `: ${summary}` : ""
+    }`,
+    {
+      source: "fetch",
+      url: call.url,
+      page: location.pathname + location.search,
+      island: inferIsland(),
+      details,
+    },
+  );
+}
+
+/**
+ * @param {Response} response
+ * @returns {Promise<unknown>}
+ */
+async function readResponseDetails(response) {
+  try {
+    const text = (await response.clone().text()).slice(0, 4000);
+    if (!text) return null;
+    try {
+      return JSON.parse(text);
+    } catch {
+      return text;
+    }
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * @param {unknown} details
+ * @returns {string | null}
+ */
+function detailSummary(details) {
+  if (details == null) return null;
+  if (typeof details === "string") return details.slice(0, 200);
+  if (typeof details !== "object") return String(details);
+  const record = /** @type {Record<string, unknown>} */ (details);
+  for (const key of ["details", "detail", "message", "error", "title"]) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value.slice(0, 200);
+    if (value && typeof value === "object") {
+      const nested = detailSummary(value);
+      if (nested) return nested;
+    }
+  }
+  try {
+    return JSON.stringify(details).slice(0, 200);
+  } catch {
+    return null;
+  }
+}
+
+/** @param {string} url */
+function shortUrl(url) {
+  try {
+    const parsed = new URL(url, location.origin);
+    return parsed.origin === location.origin
+      ? parsed.pathname + parsed.search
+      : parsed.host + parsed.pathname + parsed.search;
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * Çağrı yığınında `islands/ad` izi varsa ya da bir island mount edilirken
+ * yakalanmışsa ada bağlar.
+ *
+ * @returns {string | null}
+ */
+function inferIsland() {
+  const mounting = globalThis.__JSKELET_MOUNTING_ISLAND;
+  if (typeof mounting === "string" && mounting) return mounting;
+
+  const stack = new Error().stack ?? "";
+  const match = stack.match(/islands[/\\]([A-Za-z0-9_-]+)/);
+  return match?.[1] ?? null;
+}
+
 /**
  * Sayfa ölçümlerini rapora gönderir. Sekme kapanırken de gitmesi gerektiği
  * için mümkünse `sendBeacon` kullanılır.
@@ -847,7 +974,11 @@ h4:first-child { margin-top: 0; }
 .item.warn { border-inline-start-color: var(--mid); }
 .item.selected { border-color: rgba(255,255,255,.22); background: var(--surface-hover); }
 .item .meta { color: var(--muted); font-size: 10.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
+.item .ctx-row { flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
+.item .ctx { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10.5px; color: #cfd6de; }
+.item .ctx.muted { color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tag { border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 9.5px; }
+.tag.island { text-transform: none; letter-spacing: 0; color: #c4b5fd; border-color: rgba(196,181,253,.35); }
 .msg { word-break: break-word; color: var(--text); }
 .item pre { margin: 8px 0 0; padding: 8px 10px; background: rgba(0,0,0,.4); border-radius: 8px; white-space: pre-wrap; word-break: break-word; color: #b8c0cb; font-size: 11px; font-family: ui-monospace, SFMono-Regular, monospace; max-height: 150px; overflow: auto; }
 .item .detail-text { margin: 8px 0 0; color: #b8c0cb; font-size: 12px; line-height: 1.55; }
@@ -1101,29 +1232,80 @@ const clipboard = new Map();
 let copiedKey = null;
 
 /**
- * @param {{ level: string, message: string, stack?: string | null, source?: string, at: number }} item
+ * @param {{
+ *   level: string,
+ *   message: string,
+ *   stack?: string | null,
+ *   source?: string,
+ *   page?: string | null,
+ *   island?: string | null,
+ *   url?: string | null,
+ *   details?: unknown,
+ *   at: number,
+ * }} item
  * @returns {string}
  */
 function asText(item) {
   const time = new Date(item.at).toISOString();
+  const details =
+    item.details == null
+      ? ""
+      : typeof item.details === "string"
+        ? item.details
+        : safeJson(item.details);
   return [
     `[${item.level}] ${item.source ?? "server"} · ${time}`,
+    item.page ? `page: ${item.page}` : "",
+    item.island ? `island: ${item.island}` : "",
+    item.url ? `url: ${item.url}` : "",
     item.message,
+    details,
     item.stack ?? "",
   ]
     .filter(Boolean)
     .join("\n");
 }
 
-/** @param {{ id?: number, level: string, message: string, stack?: string | null, source?: string, at: number }[]} list */
+/**
+ * @param {unknown} value
+ * @returns {string}
+ */
+function formatDetails(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return safeJson(value);
+  }
+}
+
+/** @param {{ id?: number, level: string, message: string, stack?: string | null, source?: string, page?: string | null, island?: string | null, url?: string | null, details?: unknown, at: number }[]} list */
 function errorList(list, scope) {
   if (!list.length) return `<div class="empty">No records.</div>`;
   return list
     .map((item) => {
       const key = `${scope}:${item.id ?? item.at}`;
       const shown = expanded.has(key);
+      const detailsKey = `${key}:details`;
+      const detailsShown = expanded.has(detailsKey);
+      const detailsText = formatDetails(item.details);
       clipboard.set(key, asText(item));
 
+      const context = [
+        item.page
+          ? `<span class="ctx" title="Page">${pathLink(item.page)}</span>`
+          : "",
+        item.island
+          ? `<span class="tag island" title="Island">${escapeHtml(item.island)}</span>`
+          : "",
+        item.url && item.url !== item.page
+          ? `<span class="ctx muted" title="Request">${escapeHtml(shortUrl(item.url))}</span>`
+          : "",
+      ]
+        .filter(Boolean)
+        .join("");
+
       return `<div class="item ${item.level === "warn" ? "warn" : ""}">
         <div class="meta">
           <span class="tag">${escapeHtml(item.source ?? "server")}</span>
@@ -1131,7 +1313,14 @@ function errorList(list, scope) {
           <span class="spacer"></span>
           ${copyButton(key)}
         </div>
+        ${context ? `<div class="meta ctx-row">${context}</div>` : ""}
         <div class="msg">${escapeHtml(item.message)}</div>
+        ${
+          detailsText
+            ? `<button class="link" data-action="stack" data-key="${escapeHtml(detailsKey)}">${detailsShown ? "▾ hide details" : "▸ show details"}</button>
+               ${detailsShown ? `<pre>${escapeHtml(detailsText)}</pre>` : ""}`
+            : ""
+        }
         ${
           item.stack
             ? `<button class="link" data-action="stack" data-key="${escapeHtml(key)}">${shown ? "▾ hide stack" : "▸ show stack"}</button>
@@ -1187,7 +1376,7 @@ function errorsTab() {
     ${lede(
       errorCount ? "bad" : total ? "mid" : "good",
       errorCount
-        ? `<strong>${errorCount} errors</strong> captured${total - errorCount ? `, plus ${total - errorCount} warnings` : ""}. Newest first; expand the stack trace and copy a record with one click.`
+        ? `<strong>${errorCount} errors</strong> captured${total - errorCount ? `, plus ${total - errorCount} warnings` : ""}. Newest first; expand details or the stack, and copy a record with one click. Failed fetch calls include the page and API path.`
         : total
           ? `No errors, <strong>${total} warnings</strong>. Warnings usually come from missing data or islands that were never ported.`
           : "No browser or server side errors were seen in this session.",

package/src/client/devtools/report.js

@@ -556,6 +556,7 @@ function apiTab() {
       "api-calls",
       [
         { key: "url", label: "URL" },
+        { key: "page", label: "Page", render: (row) => (row.page ? link(row.page) : "—") },
         { key: "method", label: "Method" },
         { key: "status", label: "Status", render: (row) => `<span class="status ${row.error ? "bad" : ""}">${row.status || "—"}</span>` },
         { key: "ms", label: "Time", value: (row) => row.ms, render: (row) => `<span class="${tone(row.ms, [200, 800])}">${ms(row.ms)}</span>` },
@@ -589,6 +590,25 @@ function errorsTab() {
       "errors",
       [
         { key: "message", label: "Message" },
+        { key: "page", label: "Page", render: (row) => (row.page ? link(row.page) : "—") },
+        {
+          key: "details",
+          label: "Details",
+          render: (row) => {
+            if (row.details == null) return "—";
+            const text =
+              typeof row.details === "string"
+                ? row.details
+                : (() => {
+                    try {
+                      return JSON.stringify(row.details);
+                    } catch {
+                      return String(row.details);
+                    }
+                  })();
+            return `<span class="hint" title="${escapeHtml(text)}">${escapeHtml(text.slice(0, 120))}${text.length > 120 ? "…" : ""}</span>`;
+          },
+        },
         { key: "level", label: "Level", render: (row) => `<span class="tag">${escapeHtml(row.level)}</span>` },
         { key: "at", label: "Time", value: (row) => row.at, render: (row) => new Date(row.at).toLocaleTimeString() },
       ],

package/src/client/registry.js

@@ -110,6 +110,12 @@ async function mountIsland(element) {
 
   markMounted(element);
 
+  // Dev overlay başarısız fetch'i hangi island'dan geldiğine bağlayabilsin.
+  // Mount bittikten sonra (event handler'lar) bu işaret kalkar; o durumda
+  // yığın izine düşülür.
+  const previous = globalThis.__JSKELET_MOUNTING_ISLAND;
+  globalThis.__JSKELET_MOUNTING_ISLAND = name;
+
   try {
     const module = await loader();
     const cleanup = module.mount(element, readProps(element));
@@ -130,6 +136,8 @@ async function mountIsland(element) {
     element.dataset.islandReady = "true";
   } catch (error) {
     console.error(`[island] ${name} failed to load`, error);
+  } finally {
+    globalThis.__JSKELET_MOUNTING_ISLAND = previous;
   }
 }
 

package/src/http/request-context.js

@@ -25,13 +25,15 @@ import { AsyncLocalStorage } from "node:async_hooks";
  * @property {string[]} taintReasons Hangi erişimler işaretledi (teşhis için).
  * @property {string | null} csrfToken
  * @property {import('express').Response | null} res
+ * @property {string | null} pathname Devtools: bu isteğin sayfa yolu (SSR
+ *   sırasında upstream hatasına "hangi sayfa" bağlamak için).
  */
 
 /** @type {AsyncLocalStorage<RequestContext>} */
 const storage = new AsyncLocalStorage();
 
 /**
- * @param {{ private?: boolean, res?: import('express').Response }} [initial]
+ * @param {{ private?: boolean, res?: import('express').Response, pathname?: string | null }} [initial]
  * @returns {RequestContext}
  */
 export function createRequestContext(initial = {}) {
@@ -41,6 +43,7 @@ export function createRequestContext(initial = {}) {
     taintReasons: [],
     csrfToken: null,
     res: initial.res ?? null,
+    pathname: initial.pathname ?? null,
   };
 }
 

package/src/server/dev/devtools.js

@@ -13,6 +13,7 @@ import { createHash } from "node:crypto";
 import express from "express";
 import * as log from "../../log.mjs";
 import { FRAMEWORK_ROOT, getConfig } from "../../config/index.js";
+import { getRequestContext } from "../../http/request-context.js";
 import { prewarm, prewarmProgress } from "../prewarm.js";
 import { clearHtmlCache } from "../html-cache.js";
 import {
@@ -55,7 +56,21 @@ const STATE_FILE = path.join(
 /** @type {{ id: number, method: string, url: string, status: number, ms: number, cache: string | null, at: number }[]} */
 let requests = [];
 
-/** @type {{ id: number, level: string, message: string, stack: string | null, url: string | null, at: number }[]} */
+/**
+ * @typedef {{
+ *   id: number,
+ *   level: string,
+ *   message: string,
+ *   stack: string | null,
+ *   url: string | null,
+ *   page: string | null,
+ *   island: string | null,
+ *   details: unknown,
+ *   at: number,
+ * }} ServerError
+ */
+
+/** @type {ServerError[]} */
 let errors = [];
 
 let nextId = 1;
@@ -103,7 +118,13 @@ function trim(list) {
 /**
  * @param {string} level
  * @param {string} message
- * @param {{ stack?: string | null, url?: string | null }} [extra]
+ * @param {{
+ *   stack?: string | null,
+ *   url?: string | null,
+ *   page?: string | null,
+ *   island?: string | null,
+ *   details?: unknown,
+ * }} [extra]
  */
 export function recordServerError(level, message, extra = {}) {
   errors.push({
@@ -112,6 +133,9 @@ export function recordServerError(level, message, extra = {}) {
     message,
     stack: extra.stack ?? null,
     url: extra.url ?? null,
+    page: extra.page ?? null,
+    island: extra.island ?? null,
+    details: extra.details ?? null,
     at: Date.now(),
   });
   trim(errors);
@@ -121,21 +145,49 @@ export function recordServerError(level, message, extra = {}) {
 
 /**
  * `console.error` / `console.warn` çıktısını da overlay'e taşır: sunucudaki
- * uyarılar terminalde kaybolmasın.
+ * uyarılar terminalde kaybolmasın. Render bağlamındaysa sayfa yolu da yazılır.
  */
 function patchConsole() {
   for (const level of /** @type {const} */ (["error", "warn"])) {
     const original = console[level].bind(console);
     console[level] = (...args) => {
       const error = args.find((arg) => arg instanceof Error);
+      const page = currentPage();
       recordServerError(level, args.map(format).join(" "), {
         stack: error?.stack ?? null,
+        page,
+        url: page,
+        details: extractDetails(args),
       });
       original(...args);
     };
   }
 }
 
+/** @returns {string | null} */
+function currentPage() {
+  return getRequestContext()?.pathname ?? null;
+}
+
+/**
+ * console argümanlarından yapılandırılmış bir `details` alanı ayıklar.
+ * Uygulama `console.error("msg", { details: {...} })` yazdığında overlay
+ * nesneyi `[object Object]` yerine açılabilir JSON olarak görsün.
+ *
+ * @param {unknown[]} args
+ * @returns {unknown}
+ */
+function extractDetails(args) {
+  for (const arg of args) {
+    if (!arg || typeof arg !== "object" || arg instanceof Error) continue;
+    const record = /** @type {Record<string, unknown>} */ (arg);
+    if ("details" in record) return record.details;
+    if ("detail" in record) return record.detail;
+    return record;
+  }
+  return null;
+}
+
 /**
  * @param {unknown} value
  * @returns {string}
@@ -144,12 +196,73 @@ function format(value) {
   if (typeof value === "string") return value;
   if (value instanceof Error) return `${value.name}: ${value.message}`;
   try {
-    return JSON.stringify(value);
+    return JSON.stringify(value, (_key, nested) => {
+      // Döngüsel referanslarda stringify zaten fırlar; burada yalnızca
+      // Error örneklerini okunabilir kılmak yeterli.
+      if (nested instanceof Error) {
+        return { name: nested.name, message: nested.message };
+      }
+      return nested;
+    });
   } catch {
     return String(value);
   }
 }
 
+/**
+ * Upstream `fetch` başarısızlığını overlay hata listesine yazar.
+ *
+ * @param {{
+ *   url: string,
+ *   method: string,
+ *   status: number,
+ *   ms: number,
+ *   bytes: number,
+ *   error: string | null,
+ *   page: string | null,
+ *   details: unknown,
+ * }} call
+ */
+function recordApiFailure(call) {
+  // Aynı SSR turunda hem fetch sarmalayıcısı hem uygulama logger'ı aynı
+  // hatayı basabiliyor; kısa pencerede tekilleştir.
+  const last = errors.at(-1);
+  if (
+    last &&
+    last.url === call.url &&
+    last.page === call.page &&
+    Date.now() - last.at < 2000
+  ) {
+    // İlk kayıtta details yoksa sonrakinin gövdesini birleştir.
+    if (last.details == null && call.details != null) {
+      last.details = call.details;
+      if (call.error && !last.message.includes(call.error)) {
+        last.message = `${call.method} ${shortApiPath(call.url)} → ${call.error}`;
+      }
+      persist();
+      pushStats();
+    }
+    return;
+  }
+
+  recordServerError("error", `${call.method} ${shortApiPath(call.url)} → ${call.error ?? call.status}`, {
+    url: call.url,
+    page: call.page,
+    details: call.details,
+    stack: null,
+  });
+}
+
+/** @param {string} url */
+function shortApiPath(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.pathname + parsed.search;
+  } catch {
+    return url;
+  }
+}
+
 /** Her HTML isteğinin süresini ve cache durumunu kaydeder. */
 function timing() {
   /** @type {import('express').RequestHandler} */
@@ -448,7 +561,7 @@ export function mountDevtools(app) {
 
   restore();
   patchConsole();
-  trackServerFetch();
+  trackServerFetch({ onFailure: recordApiFailure });
   watchManifest();
   startVersionCheck();
   startHeartbeat();

package/src/server/dev/report.js

@@ -18,6 +18,7 @@ import { getRedisStatus } from "../redis.js";
 import { getUpstreamLimiterStatus } from "../upstream-limiter.js";
 import { prewarmProgress } from "../prewarm.js";
 import { getConfig } from "../../config/index.js";
+import { getRequestContext } from "../../http/request-context.js";
 
 /** Yollar config'ten: framework paket içine taşındığında `../..` sayan her hesap bozulur. */
 const ROOT = getConfig().root;
@@ -78,61 +79,176 @@ export function clearPageReports() {
 /* --------------------------------------------------- sunucu tarafı API çağrıları */
 
 /**
- * @type {{ url: string, host: string, method: string, status: number, ms: number,
- *   bytes: number, at: number, error: string | null }[]}
+ * @typedef {{
+ *   url: string,
+ *   host: string,
+ *   method: string,
+ *   status: number,
+ *   ms: number,
+ *   bytes: number,
+ *   at: number,
+ *   error: string | null,
+ *   page: string | null,
+ *   details: unknown,
+ * }} ServerApiCall
  */
+
+/** @type {ServerApiCall[]} */
 const serverApiCalls = [];
 const MAX_API_CALLS = 300;
 
+/** Başarısız çağrı gövdesinin overlay'e taşınacak üst sınırı. */
+const DETAILS_MAX = 4_000;
+
+/**
+ * @typedef {{
+ *   url: string,
+ *   method: string,
+ *   status: number,
+ *   ms: number,
+ *   bytes: number,
+ *   error: string | null,
+ *   page: string | null,
+ *   details: unknown,
+ * }} ApiFailure
+ */
+
 /**
  * SSR sırasında yapılan dış çağrıları ölçer. `globalThis.fetch` sarılır;
  * yalnızca dev'de çağrıldığı için üretim yolu dokunulmaz kalır.
+ *
+ * Başarısız cevaplar (4xx/5xx ya da ağ) isteğe bağlı `onFailure` ile
+ * overlay hata günlüğüne de düşer — uygulama kendi logger'ıyla stderr'e
+ * yazsa bile panel "hangi sayfa hangi API" bilgisini görsün.
+ *
+ * @param {{ onFailure?: (call: ApiFailure) => void }} [options]
  */
-export function trackServerFetch() {
+export function trackServerFetch(options = {}) {
   const original = globalThis.fetch;
-  if (original.__jskeletWrapped) return;
+  if (/** @type {any} */ (original).__jskeletWrapped) return;
+
+  const { onFailure } = options;
 
   /** @type {typeof fetch} */
   const wrapped = async (input, init) => {
     const url = typeof input === "string" ? input : (input?.url ?? String(input));
+    const method = String(init?.method ?? "GET").toUpperCase();
     const started = Date.now();
+    const page = currentPage();
 
     // Kendi sunucumuza yapılan istekler (ısıtma, sağlık kontrolü) API sayılmaz.
-    const isSelf = /^https?:\/\/(127\.0\.0\.1|localhost)/i.test(url);
+    const isSelf = /^https?:\/\/(127\.0\.0\.1|\[::1\]|localhost)(:|\/|$)/i.test(url);
 
     try {
       const response = await original(input, init);
       if (!isSelf) {
-        push({
+        const details = response.ok
+          ? null
+          : await readFailureDetails(response);
+        const error = response.ok ? null : summarizeFailure(response.status, details);
+        const call = {
           url,
-          method: init?.method ?? "GET",
+          method,
           status: response.status,
           ms: Date.now() - started,
           bytes: Number(response.headers.get("content-length") ?? 0),
-          error: response.ok ? null : `HTTP ${response.status}`,
-        });
+          error,
+          page,
+          details,
+        };
+        push(call);
+        if (error) onFailure?.(call);
       }
       return response;
     } catch (error) {
       if (!isSelf) {
-        push({
+        const message = error instanceof Error ? error.message : String(error);
+        const call = {
           url,
-          method: init?.method ?? "GET",
+          method,
           status: 0,
           ms: Date.now() - started,
           bytes: 0,
-          error: error instanceof Error ? error.message : String(error),
-        });
+          error: message,
+          page,
+          details: null,
+        };
+        push(call);
+        onFailure?.(call);
       }
       throw error;
     }
   };
 
-  wrapped.__jskeletWrapped = true;
+  /** @type {any} */ (wrapped).__jskeletWrapped = true;
   globalThis.fetch = wrapped;
 }
 
-/** @param {{ url: string, method: string, status: number, ms: number, bytes: number, error: string | null }} call */
+/** @returns {string | null} */
+function currentPage() {
+  return getRequestContext()?.pathname ?? null;
+}
+
+/**
+ * @param {Response} response
+ * @returns {Promise<unknown>}
+ */
+async function readFailureDetails(response) {
+  try {
+    const text = (await response.clone().text()).slice(0, DETAILS_MAX);
+    if (!text) return null;
+    try {
+      return JSON.parse(text);
+    } catch {
+      return text;
+    }
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Overlay başlığı: durum + varsa API'nin kendi doğrulama mesajı.
+ *
+ * @param {number} status
+ * @param {unknown} details
+ * @returns {string}
+ */
+function summarizeFailure(status, details) {
+  const label = `HTTP ${status}`;
+  const detail = failureMessage(details);
+  return detail ? `${label}: ${detail}` : label;
+}
+
+/**
+ * Upstream gövdesinden kısa, okunabilir bir cümle çıkarır. `[object Object]`
+ * basmamak için nesneleri bilinçli dolaşır.
+ *
+ * @param {unknown} details
+ * @returns {string | null}
+ */
+function failureMessage(details) {
+  if (details == null) return null;
+  if (typeof details === "string") return details.slice(0, 280);
+  if (typeof details !== "object") return String(details);
+
+  const record = /** @type {Record<string, unknown>} */ (details);
+  for (const key of ["details", "detail", "message", "error", "title"]) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value.slice(0, 280);
+    if (value && typeof value === "object") {
+      const nested = failureMessage(value);
+      if (nested) return nested;
+    }
+  }
+  try {
+    return JSON.stringify(details).slice(0, 280);
+  } catch {
+    return null;
+  }
+}
+
+/** @param {Omit<ServerApiCall, "host" | "at">} call */
 function push(call) {
   let host = "—";
   try {

package/src/server/render.js

@@ -304,7 +304,11 @@ export function route(controller, options = {}) {
   const isPrivate = options.private === true;
 
   return async (req, res, next) => {
-    const context = createRequestContext({ private: isPrivate, res });
+    const context = createRequestContext({
+      private: isPrivate,
+      res,
+      pathname: req.path,
+    });
     const ctx = {
       params: req.params ?? {},
       query: req.query ?? {},
@@ -442,7 +446,11 @@ export function route(controller, options = {}) {
  */
 export function fragment(controller) {
   return async (req, res, next) => {
-    const context = createRequestContext({ private: true, res });
+    const context = createRequestContext({
+      private: true,
+      res,
+      pathname: req.path,
+    });
     const ctx = {
       params: req.params ?? {},
       query: req.query ?? {},