next-fetch-panel 0.1.0

package/dist/middleware.d.mts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+type MiddlewareHandler = (request: NextRequest) => NextResponse | Response | null | undefined | void | Promise<NextResponse | Response | null | undefined | void>;
+/**
+ * Wraps your existing middleware with the dev panel session logic.
+ *
+ * Simple (no other middleware):
+ *   export const { middleware, config } = withDevPanel()
+ *
+ * With your own logic:
+ *   export const { middleware, config } = withDevPanel(async (request) => {
+ *     if (!isAuthenticated(request))
+ *       return NextResponse.redirect(new URL("/login", request.url))
+ *     // return nothing to let the request continue normally
+ *   })
+ *
+ * Custom matcher:
+ *   export const { middleware, config } = withDevPanel(handler, {
+ *     matcher: ["/api/:path*", "/((?!_next).*)"],
+ *   })
+ */
+declare function withDevPanel(handler?: MiddlewareHandler, options?: {
+    matcher?: string[];
+}): {
+    middleware: (request: NextRequest) => Promise<NextResponse<unknown>>;
+    config: {
+        matcher: string[];
+    };
+};
+declare const middleware: (request: NextRequest) => Promise<NextResponse<unknown>>;
+declare const config: {
+    matcher: string[];
+};
+
+export { config, middleware, withDevPanel };

package/dist/middleware.d.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+type MiddlewareHandler = (request: NextRequest) => NextResponse | Response | null | undefined | void | Promise<NextResponse | Response | null | undefined | void>;
+/**
+ * Wraps your existing middleware with the dev panel session logic.
+ *
+ * Simple (no other middleware):
+ *   export const { middleware, config } = withDevPanel()
+ *
+ * With your own logic:
+ *   export const { middleware, config } = withDevPanel(async (request) => {
+ *     if (!isAuthenticated(request))
+ *       return NextResponse.redirect(new URL("/login", request.url))
+ *     // return nothing to let the request continue normally
+ *   })
+ *
+ * Custom matcher:
+ *   export const { middleware, config } = withDevPanel(handler, {
+ *     matcher: ["/api/:path*", "/((?!_next).*)"],
+ *   })
+ */
+declare function withDevPanel(handler?: MiddlewareHandler, options?: {
+    matcher?: string[];
+}): {
+    middleware: (request: NextRequest) => Promise<NextResponse<unknown>>;
+    config: {
+        matcher: string[];
+    };
+};
+declare const middleware: (request: NextRequest) => Promise<NextResponse<unknown>>;
+declare const config: {
+    matcher: string[];
+};
+
+export { config, middleware, withDevPanel };

package/dist/middleware.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/middleware.ts
+var middleware_exports = {};
+__export(middleware_exports, {
+  config: () => config,
+  middleware: () => middleware,
+  withDevPanel: () => withDevPanel
+});
+module.exports = __toCommonJS(middleware_exports);
+var import_server = require("next/server");
+function withDevPanel(handler, options) {
+  async function middleware2(request) {
+    const existing = request.cookies.get("__dev_sid")?.value;
+    const sid = existing ?? crypto.randomUUID();
+    const userResponse = await handler?.(request);
+    let response;
+    if (userResponse instanceof Response) {
+      response = userResponse;
+    } else {
+      const requestHeaders = new Headers(request.headers);
+      requestHeaders.set("x-dev-sid", sid);
+      response = import_server.NextResponse.next({ request: { headers: requestHeaders } });
+    }
+    if (!existing) {
+      response.cookies.set("__dev_sid", sid, {
+        httpOnly: true,
+        sameSite: "lax",
+        path: "/",
+        maxAge: 60 * 60 * 24 * 365
+      });
+    }
+    return response;
+  }
+  return {
+    middleware: middleware2,
+    config: {
+      matcher: options?.matcher ?? ["/((?!_next/static|_next/image|favicon.ico).*)"]
+    }
+  };
+}
+var { middleware, config } = withDevPanel();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  config,
+  middleware,
+  withDevPanel
+});

package/dist/middleware.mjs

@@ -0,0 +1,38 @@
+// src/middleware.ts
+import { NextResponse } from "next/server";
+function withDevPanel(handler, options) {
+  async function middleware2(request) {
+    const existing = request.cookies.get("__dev_sid")?.value;
+    const sid = existing ?? crypto.randomUUID();
+    const userResponse = await handler?.(request);
+    let response;
+    if (userResponse instanceof Response) {
+      response = userResponse;
+    } else {
+      const requestHeaders = new Headers(request.headers);
+      requestHeaders.set("x-dev-sid", sid);
+      response = NextResponse.next({ request: { headers: requestHeaders } });
+    }
+    if (!existing) {
+      response.cookies.set("__dev_sid", sid, {
+        httpOnly: true,
+        sameSite: "lax",
+        path: "/",
+        maxAge: 60 * 60 * 24 * 365
+      });
+    }
+    return response;
+  }
+  return {
+    middleware: middleware2,
+    config: {
+      matcher: options?.matcher ?? ["/((?!_next/static|_next/image|favicon.ico).*)"]
+    }
+  };
+}
+var { middleware, config } = withDevPanel();
+export {
+  config,
+  middleware,
+  withDevPanel
+};

package/dist/patch.d.mts

@@ -0,0 +1,15 @@
+/**
+ * Patches globalThis.fetch to capture server-side requests.
+ * Call this inside your own register() if you already have one:
+ *
+ *   export async function register() {
+ *     registerOTel("my-app")   // your existing setup
+ *     await registerDevPanel() // add the panel
+ *   }
+ *
+ * For simple use with no other setup:
+ *   export { register } from "./server-network-panel/patch"
+ */
+declare function registerDevPanel(): Promise<void>;
+
+export { registerDevPanel as register, registerDevPanel };

package/dist/patch.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Patches globalThis.fetch to capture server-side requests.
+ * Call this inside your own register() if you already have one:
+ *
+ *   export async function register() {
+ *     registerOTel("my-app")   // your existing setup
+ *     await registerDevPanel() // add the panel
+ *   }
+ *
+ * For simple use with no other setup:
+ *   export { register } from "./server-network-panel/patch"
+ */
+declare function registerDevPanel(): Promise<void>;
+
+export { registerDevPanel as register, registerDevPanel };

package/dist/patch.js

@@ -0,0 +1,244 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/store.ts
+var store_exports = {};
+__export(store_exports, {
+  devLogStore: () => devLogStore
+});
+function createStore() {
+  const subscribers = /* @__PURE__ */ new Set();
+  const buffer = [];
+  return {
+    push(entry) {
+      buffer.push(entry);
+      if (buffer.length > BUFFER_SIZE) buffer.shift();
+      subscribers.forEach((fn) => fn(entry));
+    },
+    subscribe(fn) {
+      subscribers.add(fn);
+      return () => subscribers.delete(fn);
+    },
+    getBuffer() {
+      return buffer.slice();
+    }
+  };
+}
+var BUFFER_SIZE, devLogStore;
+var init_store = __esm({
+  "src/store.ts"() {
+    "use strict";
+    BUFFER_SIZE = 100;
+    devLogStore = globalThis.__devLogStore ?? (globalThis.__devLogStore = createStore());
+  }
+});
+
+// src/redact.ts
+var redact_exports = {};
+__export(redact_exports, {
+  redactConfig: () => redactConfig,
+  redactEntry: () => redactEntry
+});
+function redactUrl(url, params) {
+  try {
+    const u = new URL(url);
+    for (const key of params) {
+      if (u.searchParams.has(key)) u.searchParams.set(key, REDACTED);
+    }
+    return u.toString();
+  } catch {
+    return url;
+  }
+}
+function redactHeaders(headers, names) {
+  const lower = new Set(names.map((n) => n.toLowerCase()));
+  const out = {};
+  for (const [k, v] of Object.entries(headers)) {
+    out[k] = lower.has(k.toLowerCase()) ? REDACTED : v;
+  }
+  return out;
+}
+function redactBody(body, keys) {
+  if (!body) return body;
+  try {
+    const parsed = JSON.parse(body);
+    for (const key of keys) {
+      if (key in parsed) parsed[key] = REDACTED;
+    }
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return body;
+  }
+}
+function redactEntry(entry) {
+  return {
+    ...entry,
+    url: redactUrl(entry.url, redactConfig.urlParams),
+    requestHeaders: redactHeaders(entry.requestHeaders, redactConfig.headers),
+    responseHeaders: redactHeaders(entry.responseHeaders, redactConfig.headers),
+    requestBody: redactBody(entry.requestBody, redactConfig.bodyKeys),
+    responseBody: redactBody(entry.responseBody, redactConfig.bodyKeys)
+  };
+}
+var redactConfig, REDACTED;
+var init_redact = __esm({
+  "src/redact.ts"() {
+    "use strict";
+    redactConfig = {
+      urlParams: ["api_key", "apikey", "secret", "token", "access_token", "password", "key"],
+      headers: ["authorization", "x-api-key", "x-secret", "x-auth-token"],
+      bodyKeys: ["password", "secret", "token", "api_key", "apiKey", "accessToken", "access_token"]
+    };
+    REDACTED = "[REDACTED]";
+  }
+});
+
+// src/patch.ts
+var patch_exports = {};
+__export(patch_exports, {
+  register: () => registerDevPanel,
+  registerDevPanel: () => registerDevPanel
+});
+module.exports = __toCommonJS(patch_exports);
+var BODY_LIMIT = 5e4;
+function headersToObject(headers) {
+  if (!headers) return {};
+  if (headers instanceof Headers) {
+    const obj = {};
+    headers.forEach((v, k) => {
+      obj[k] = v;
+    });
+    return obj;
+  }
+  if (Array.isArray(headers)) return Object.fromEntries(headers);
+  return headers;
+}
+function extractRequestBody(init) {
+  const body = init?.body;
+  if (body == null) return null;
+  if (typeof body === "string") return body.slice(0, BODY_LIMIT);
+  if (body instanceof URLSearchParams) return body.toString().slice(0, BODY_LIMIT);
+  return "[binary]";
+}
+var nextHeaders = null;
+async function getSessionId() {
+  try {
+    if (!nextHeaders) {
+      const mod = await import("next/headers");
+      nextHeaders = mod.headers;
+    }
+    return (await nextHeaders()).get("x-dev-sid");
+  } catch {
+    return null;
+  }
+}
+async function registerDevPanel() {
+  if (process.env.NEXT_RUNTIME !== "nodejs") return;
+  const { devLogStore: devLogStore2 } = await Promise.resolve().then(() => (init_store(), store_exports));
+  const { redactEntry: redactEntry2 } = await Promise.resolve().then(() => (init_redact(), redact_exports));
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async function patchedFetch(input, init) {
+    const method = (init?.method ?? "GET").toUpperCase();
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    const ts = Date.now();
+    const id = `${ts}-${Math.random().toString(36).slice(2, 8)}`;
+    const requestHeaders = headersToObject(init?.headers);
+    const requestBody = extractRequestBody(init);
+    const sessionId = await getSessionId();
+    const start = performance.now();
+    try {
+      const response = await originalFetch(input, init);
+      const duration = Math.round(performance.now() - start);
+      const responseHeaders = {};
+      response.headers.forEach((v, k) => {
+        responseHeaders[k] = v;
+      });
+      response.clone().text().then(
+        (text) => devLogStore2.push(redactEntry2({
+          id,
+          url,
+          method,
+          ts,
+          duration,
+          error: void 0,
+          status: response.status,
+          statusText: response.statusText,
+          requestHeaders,
+          responseHeaders,
+          requestBody,
+          responseBody: text.slice(0, BODY_LIMIT),
+          sessionId
+        })),
+        () => devLogStore2.push(redactEntry2({
+          id,
+          url,
+          method,
+          ts,
+          duration,
+          error: void 0,
+          status: response.status,
+          statusText: response.statusText,
+          requestHeaders,
+          responseHeaders,
+          requestBody,
+          responseBody: null,
+          sessionId
+        }))
+      );
+      return response;
+    } catch (err) {
+      const duration = Math.round(performance.now() - start);
+      const error = err instanceof Error ? err.message : String(err);
+      devLogStore2.push(redactEntry2({
+        id,
+        url,
+        method,
+        ts,
+        duration,
+        error,
+        status: null,
+        statusText: null,
+        requestHeaders,
+        responseHeaders: {},
+        requestBody,
+        responseBody: null,
+        sessionId
+      }));
+      throw err;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  register,
+  registerDevPanel
+});

package/dist/patch.mjs

@@ -0,0 +1,215 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/store.ts
+var store_exports = {};
+__export(store_exports, {
+  devLogStore: () => devLogStore
+});
+function createStore() {
+  const subscribers = /* @__PURE__ */ new Set();
+  const buffer = [];
+  return {
+    push(entry) {
+      buffer.push(entry);
+      if (buffer.length > BUFFER_SIZE) buffer.shift();
+      subscribers.forEach((fn) => fn(entry));
+    },
+    subscribe(fn) {
+      subscribers.add(fn);
+      return () => subscribers.delete(fn);
+    },
+    getBuffer() {
+      return buffer.slice();
+    }
+  };
+}
+var BUFFER_SIZE, devLogStore;
+var init_store = __esm({
+  "src/store.ts"() {
+    "use strict";
+    BUFFER_SIZE = 100;
+    devLogStore = globalThis.__devLogStore ?? (globalThis.__devLogStore = createStore());
+  }
+});
+
+// src/redact.ts
+var redact_exports = {};
+__export(redact_exports, {
+  redactConfig: () => redactConfig,
+  redactEntry: () => redactEntry
+});
+function redactUrl(url, params) {
+  try {
+    const u = new URL(url);
+    for (const key of params) {
+      if (u.searchParams.has(key)) u.searchParams.set(key, REDACTED);
+    }
+    return u.toString();
+  } catch {
+    return url;
+  }
+}
+function redactHeaders(headers, names) {
+  const lower = new Set(names.map((n) => n.toLowerCase()));
+  const out = {};
+  for (const [k, v] of Object.entries(headers)) {
+    out[k] = lower.has(k.toLowerCase()) ? REDACTED : v;
+  }
+  return out;
+}
+function redactBody(body, keys) {
+  if (!body) return body;
+  try {
+    const parsed = JSON.parse(body);
+    for (const key of keys) {
+      if (key in parsed) parsed[key] = REDACTED;
+    }
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return body;
+  }
+}
+function redactEntry(entry) {
+  return {
+    ...entry,
+    url: redactUrl(entry.url, redactConfig.urlParams),
+    requestHeaders: redactHeaders(entry.requestHeaders, redactConfig.headers),
+    responseHeaders: redactHeaders(entry.responseHeaders, redactConfig.headers),
+    requestBody: redactBody(entry.requestBody, redactConfig.bodyKeys),
+    responseBody: redactBody(entry.responseBody, redactConfig.bodyKeys)
+  };
+}
+var redactConfig, REDACTED;
+var init_redact = __esm({
+  "src/redact.ts"() {
+    "use strict";
+    redactConfig = {
+      urlParams: ["api_key", "apikey", "secret", "token", "access_token", "password", "key"],
+      headers: ["authorization", "x-api-key", "x-secret", "x-auth-token"],
+      bodyKeys: ["password", "secret", "token", "api_key", "apiKey", "accessToken", "access_token"]
+    };
+    REDACTED = "[REDACTED]";
+  }
+});
+
+// src/patch.ts
+var BODY_LIMIT = 5e4;
+function headersToObject(headers) {
+  if (!headers) return {};
+  if (headers instanceof Headers) {
+    const obj = {};
+    headers.forEach((v, k) => {
+      obj[k] = v;
+    });
+    return obj;
+  }
+  if (Array.isArray(headers)) return Object.fromEntries(headers);
+  return headers;
+}
+function extractRequestBody(init) {
+  const body = init?.body;
+  if (body == null) return null;
+  if (typeof body === "string") return body.slice(0, BODY_LIMIT);
+  if (body instanceof URLSearchParams) return body.toString().slice(0, BODY_LIMIT);
+  return "[binary]";
+}
+var nextHeaders = null;
+async function getSessionId() {
+  try {
+    if (!nextHeaders) {
+      const mod = await import("next/headers");
+      nextHeaders = mod.headers;
+    }
+    return (await nextHeaders()).get("x-dev-sid");
+  } catch {
+    return null;
+  }
+}
+async function registerDevPanel() {
+  if (process.env.NEXT_RUNTIME !== "nodejs") return;
+  const { devLogStore: devLogStore2 } = await Promise.resolve().then(() => (init_store(), store_exports));
+  const { redactEntry: redactEntry2 } = await Promise.resolve().then(() => (init_redact(), redact_exports));
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async function patchedFetch(input, init) {
+    const method = (init?.method ?? "GET").toUpperCase();
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    const ts = Date.now();
+    const id = `${ts}-${Math.random().toString(36).slice(2, 8)}`;
+    const requestHeaders = headersToObject(init?.headers);
+    const requestBody = extractRequestBody(init);
+    const sessionId = await getSessionId();
+    const start = performance.now();
+    try {
+      const response = await originalFetch(input, init);
+      const duration = Math.round(performance.now() - start);
+      const responseHeaders = {};
+      response.headers.forEach((v, k) => {
+        responseHeaders[k] = v;
+      });
+      response.clone().text().then(
+        (text) => devLogStore2.push(redactEntry2({
+          id,
+          url,
+          method,
+          ts,
+          duration,
+          error: void 0,
+          status: response.status,
+          statusText: response.statusText,
+          requestHeaders,
+          responseHeaders,
+          requestBody,
+          responseBody: text.slice(0, BODY_LIMIT),
+          sessionId
+        })),
+        () => devLogStore2.push(redactEntry2({
+          id,
+          url,
+          method,
+          ts,
+          duration,
+          error: void 0,
+          status: response.status,
+          statusText: response.statusText,
+          requestHeaders,
+          responseHeaders,
+          requestBody,
+          responseBody: null,
+          sessionId
+        }))
+      );
+      return response;
+    } catch (err) {
+      const duration = Math.round(performance.now() - start);
+      const error = err instanceof Error ? err.message : String(err);
+      devLogStore2.push(redactEntry2({
+        id,
+        url,
+        method,
+        ts,
+        duration,
+        error,
+        status: null,
+        statusText: null,
+        requestHeaders,
+        responseHeaders: {},
+        requestBody,
+        responseBody: null,
+        sessionId
+      }));
+      throw err;
+    }
+  };
+}
+export {
+  registerDevPanel as register,
+  registerDevPanel
+};

package/dist/route.d.mts

@@ -0,0 +1,23 @@
+declare const dynamic = "force-dynamic";
+type GuardFn = (request: Request) => Response | null | undefined | void | Promise<Response | null | undefined | void>;
+/**
+ * Returns a Next.js Route Handler GET function for the SSE stream.
+ * Use the guard option to add authentication or any other access control:
+ *
+ *   export const dynamic = "force-dynamic"
+ *   export const GET = createDevPanelRoute({
+ *     guard: (request) => {
+ *       const token = request.headers.get("authorization")
+ *       if (!isValidToken(token)) return new Response("Forbidden", { status: 403 })
+ *     },
+ *   })
+ *
+ * For simple use with no access control:
+ *   export { dynamic, GET } from "@/server-network-panel/route"
+ */
+declare function createDevPanelRoute(options?: {
+    guard?: GuardFn;
+}): (request: Request) => Promise<Response>;
+declare const GET: (request: Request) => Promise<Response>;
+
+export { GET, createDevPanelRoute, dynamic };