@7365admin1/layer-common 4.97.1-staging.576 → 4.97.1-staging.578

package/components/FeedbackMain.vue

@@ -28,6 +28,14 @@
           class="ml-2"
           style="max-width: 250px"
         />
+        <v-autocomplete
+          v-model="filterByCategory"
+          :items="categoryFilterItems"
+          label="Filter by category"
+          hide-details
+          class="ml-2"
+          style="max-width: 250px"
+        />
         <v-text-field
           v-model="startDate"
           :value="standardFormatDate(startDate)"
@@ -684,6 +692,7 @@ const pageRange = ref("-- - -- of --");
 const items = ref<Array<Record<string, any>>>([]);
 
 const filterByStatus = ref("All");
+const filterByCategory = ref("All");
 const getPast30DaysDate = (): Date => {
   const today = new Date();
   const past30Days = new Date(today);
@@ -715,9 +724,10 @@ const {
       dateTo: moment(endDate.value, "DD/MM/YYYY").endOf("day"),
       search: searchText.value,
       status: filterByStatus.value == "All" ? "" : filterByStatus.value,
+      category: filterByCategory.value == "All" ? "" : filterByCategory.value,
     }),
   {
-    watch: [filterByStatus, searchText, page, startDate, endDate],
+    watch: [filterByStatus, filterByCategory, searchText, page, startDate, endDate],
   }
 );
 
@@ -1068,6 +1078,12 @@ const subjectOptions = computed(() => {
     });
 });
 
+// Same categories as the create form, plus "All" (default: nothing hidden).
+const categoryFilterItems = computed(() => [
+  "All",
+  ...subjectOptions.value.map((item) => item.title),
+]);
+
 const isFileUploading = ref<boolean>(false);
 type TFile = {
   name: string;

package/composables/useFeedback.ts

@@ -73,6 +73,7 @@ export default function useFeedback() {
     provider = "",
     service = "",
     userId = "",
+    category = "",
   }: {
     page?: number;
     limit?: number;
@@ -85,6 +86,8 @@ export default function useFeedback() {
     provider?: string | any;
     service?: string;
     userId?: string;
+    /** Optional: one category (the feedback subject) or a comma list. Empty = all. */
+    category?: string;
   } = {}) {
     try {
       return useNuxtApp().$api<Record<string, any>>("/api/feedbacks2", {
@@ -100,6 +103,7 @@ export default function useFeedback() {
           status,
           provider,
           service,
+          ...(category && { category }),
           ...(currentUser.value?.type != "site" && {
             userId,
           }),

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.97.1-staging.576",
+  "version": "4.97.1-staging.578",
   "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.
+  }
+}