jskelet 0.4.7 → 0.5.0

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.
@@ -503,7 +630,7 @@ function handleServerMessage(payload) {
   }
 
   if (payload.type === "css") {
-    swapStylesheet(payload.href);
+    swapStylesheet(payload.href, payload.name);
     return;
   }
 
@@ -537,13 +664,18 @@ function startFallback() {
 
 /**
  * Yeni sheet yüklenmeden eskisi kaldırılmaz; böylece stilsiz bir kare oluşmaz.
+ * `name` varsa `data-jskelet-css` ile doğru link seçilir (sayfa sheet'leri).
+ *
  * @param {string} href
+ * @param {string} [name] Manifest anahtarı (`app.css`, `home.css`, …)
  */
-function swapStylesheet(href) {
-  const current = document.querySelector('link[rel="stylesheet"]');
+function swapStylesheet(href, name) {
+  const current = name
+    ? document.querySelector(`link[rel="stylesheet"][data-jskelet-css="${CSS.escape(name)}"]`)
+    : document.querySelector('link[rel="stylesheet"]');
   if (!current || current.getAttribute("href") === href) return;
 
-  const next = current.cloneNode();
+  const next = /** @type {HTMLLinkElement} */ (current.cloneNode());
   next.href = href;
   next.addEventListener("load", () => current.remove(), { once: true });
   current.after(next);
@@ -847,7 +979,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 +1237,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 +1318,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 +1381,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} */
@@ -313,8 +426,12 @@ function watchManifest() {
         // sayfa silinmiş dosyayı istemeye devam eder.
         clearHtmlCache();
 
-        if (changed.length === 1 && changed[0] === "app.css") {
-          broadcast({ type: "css", href: next["app.css"] });
+        // Yalnızca stylesheet anahtarları değiştiyse hot-swap; JS/sprite için
+        // tam yenileme gerekir. Birden fazla sayfa sheet'i de desteklenir.
+        if (changed.every((key) => key.endsWith(".css"))) {
+          for (const name of changed) {
+            broadcast({ type: "css", name, href: next[name] });
+          }
           return;
         }
 
@@ -448,7 +565,7 @@ export function mountDevtools(app) {
 
   restore();
   patchConsole();
-  trackServerFetch();
+  trackServerFetch({ onFailure: recordApiFailure });
   watchManifest();
   startVersionCheck();
   startHeartbeat();