@7365admin1/layer-common 4.141.0 → 4.142.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.142.0
+
+### Minor Changes
+
+- 38e504d: Every app now reports browser crashes, failed API calls and successful saves to the Seven365 Logger through API-core (POST /api/client-logs), filed under the app's own folder.
+
 ## 4.141.0
 
 ### Minor Changes
@@ -3401,11 +3407,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/nuxt.config.ts

@@ -17,6 +17,10 @@ export default defineNuxtConfig({
     ...(process.env.API_CORE
       ? { "/api/storage/**": { proxy: `${process.env.API_CORE}/api/files/object/**` } }
       : {}),
+    // Browser logs (utils/client-log.ts), forwarded by API-core to the Seven365 Logger.
+    ...(process.env.API_CORE
+      ? { "/api/client-logs": { proxy: `${process.env.API_CORE}/api/client-logs` } }
+      : {}),
   },
   build: {
     transpile: ["vuetify"],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.141.0",
+  "version": "4.142.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/plugins/API.ts

@@ -1,5 +1,9 @@
 import { isPermissionRefusal } from "../utils/permission-refusal";
 import { accessSuspendedMessage, SIGNIN_NOTICE_COOKIE } from "../utils/access-suspended";
+import { apiPath, clientLog } from "../utils/client-log";
+
+// Expected answers, not failures: the session lapsed, no permission, nothing there.
+const UNLOGGED_REFUSALS = new Set([401, 403, 404]);
 
 export default defineNuxtPlugin((nuxtApp) => {
   const { cookieConfig } = useRuntimeConfig().public;
@@ -33,7 +37,33 @@ export default defineNuxtPlugin((nuxtApp) => {
     // Both refusal shapes count: API-core's 403 + PERMISSION_DENIED and core's
     // 401 + "You do not have permission ..." (vehicle writes and every other
     // `requireSiteReach` gate). See utils/permission-refusal.ts.
-    onResponseError({ response }) {
+    // Saves that went through, so a client's "I clicked save" can be checked.
+    onResponse({ request, options, response }) {
+      const method = String(options.method ?? "GET").toUpperCase();
+      if (method === "GET" || !response.ok) return;
+      clientLog("info", `Saved: ${method} ${apiPath(String(request))}`, { status: response.status });
+    },
+    // Offline or the API unreachable: the click did nothing for the client.
+    onRequestError({ request, options, error }) {
+      const method = String(options.method ?? "GET").toUpperCase();
+      clientLog("error", `Request failed: ${method} ${apiPath(String(request))}: ${error?.message ?? "network error"}`, {
+        method,
+        route: apiPath(String(request)),
+        status: 0,
+        expected: !navigator.onLine || undefined,
+      });
+    },
+    onResponseError({ request, options, response }) {
+      const status = response?.status ?? 0;
+      if (!UNLOGGED_REFUSALS.has(status)) {
+        const method = String(options.method ?? "GET").toUpperCase();
+        const reason = (response as any)?._data?.message;
+        clientLog(status >= 500 ? "error" : "warn", `${method} ${apiPath(String(request))} answered ${status}${reason ? `: ${reason}` : ""}`, {
+          method,
+          route: apiPath(String(request)),
+          status,
+        });
+      }
       // Every membership suspended (2026-10-01): the server already ended the
       // session. Sign out here and let the sign-in page say why, once.
       const suspended = accessSuspendedMessage((response as any)?._data);

package/plugins/client-logs.client.ts

@@ -0,0 +1,47 @@
+import { clientLog, configureClientLog, flushClientLogs } from "../utils/client-log";
+
+// Crashes anywhere on the page go to the Seven365 Logger. Failed and successful
+// API calls are logged from plugins/API.ts, where every request passes.
+export default defineNuxtPlugin((nuxtApp) => {
+  configureClientLog(String(useRuntimeConfig().public.APP ?? ""));
+
+  const describe = (error: unknown) => {
+    const e = error as { message?: string; stack?: string; name?: string } | undefined;
+    return { message: e?.message || String(error), stack: e?.stack, name: e?.name };
+  };
+
+  // An old tab asking for a file the last deploy replaced: the page needs a
+  // reload, the code is not broken. Logged, never ticketed.
+  const isStaleBuild = (message: string) =>
+    /Failed to fetch dynamically imported module|Importing a module script failed|error loading dynamically imported module/i.test(message);
+
+  nuxtApp.hook("vue:error", (error, _instance, info) => {
+    const { message, stack } = describe(error);
+    clientLog("error", message, { stack, source: `vue:${info}`, expected: isStaleBuild(message) || undefined });
+  });
+
+  nuxtApp.hook("app:error", (error) => {
+    const { message, stack } = describe(error);
+    clientLog("error", message, { stack, source: "app", expected: isStaleBuild(message) || undefined });
+  });
+
+  window.addEventListener("error", (event) => {
+    if (!event.message) return;
+    clientLog("error", event.message, {
+      stack: (event.error as Error | undefined)?.stack,
+      source: `${event.filename}:${event.lineno}:${event.colno}`,
+      expected: isStaleBuild(event.message) || undefined,
+    });
+  });
+
+  window.addEventListener("unhandledrejection", (event) => {
+    const { message, stack, name } = describe(event.reason);
+    // Failed $api calls are already logged with their status by plugins/API.ts.
+    if (name === "FetchError") return;
+    clientLog("error", message, { stack, source: "promise", expected: isStaleBuild(message) || undefined });
+  });
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "hidden") void flushClientLogs();
+  });
+});

package/utils/client-log.ts

@@ -0,0 +1,71 @@
+// Browser logs for the Seven365 Logger. Entries are batched and sent to API-core
+// (POST /api/client-logs), which files them under this app's own folder and adds
+// the signed-in user from the session. Nothing is sent in development.
+type Level = "info" | "warn" | "error";
+
+type Entry = { level: Level; message: string; context: Record<string, unknown>; timestamp: string };
+
+const queue: Entry[] = [];
+const recent = new Map<string, number>();
+const sessionId = Math.random().toString(36).slice(2, 12);
+let app = "";
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const BATCH = 20;
+const FLUSH_MS = 5000;
+const REPEAT_WINDOW_MS = 10000;
+
+export function configureClientLog(appName: string) {
+  app = appName;
+}
+
+export function apiPath(url: string) {
+  return String(url)
+    .split("?")[0]
+    .replace(/\b[0-9a-f]{24}\b/gi, ":id")
+    .replace(/\/\d+(?=\/|$)/g, "/:n");
+}
+
+function sid() {
+  const match = document.cookie.match(/(?:^|;\s*)sid=([^;]+)/);
+  return match ? decodeURIComponent(match[1]) : "";
+}
+
+export function clientLog(level: Level, message: string, context: Record<string, unknown> = {}) {
+  if (!import.meta.client || import.meta.dev || !app || !message) return;
+
+  // The same line from the same tab within 10s is one event (a re-rendering
+  // component can throw the same error dozens of times a second).
+  const key = `${level}|${message}`;
+  const now = Date.now();
+  if ((recent.get(key) ?? 0) > now - REPEAT_WINDOW_MS) return;
+  if (recent.size > 200) recent.clear();
+  recent.set(key, now);
+
+  queue.push({
+    level,
+    message: String(message).slice(0, 2000),
+    context: { ...context, page: location.pathname, sessionId },
+    timestamp: new Date().toISOString(),
+  });
+
+  if (queue.length >= BATCH) void flushClientLogs();
+  else if (!timer) timer = setTimeout(() => void flushClientLogs(), FLUSH_MS);
+}
+
+export async function flushClientLogs() {
+  if (timer) clearTimeout(timer);
+  timer = null;
+  const logs = queue.splice(0, 50);
+  if (!logs.length) return;
+  try {
+    await fetch("/api/client-logs", {
+      method: "POST",
+      keepalive: true,
+      headers: { "Content-Type": "application/json", Authorization: sid() },
+      body: JSON.stringify({ app, logs }),
+    });
+  } catch {
+    // Logging must never break the page; a lost batch is acceptable.
+  }
+}