@7365admin1/layer-common 4.2.2 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @iservice365/layer-common
 
+## 4.2.3
+
+### Patch Changes
+
+- b2d7f77: Render a plain sentence when a request fails without reaching the API.
+
+  `errorConverter` — the app-wide error mapper used by 29 call sites in this layer — only understood a JSON API error. A gateway 502, a 503/504, an nginx or Cloudflare HTML error page, a timeout or a dropped connection fell through it, so `ofetch`'s own developer string reached the screen: `[PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502`. It now maps those to a sentence chosen from the status, never renders HTML, a JSON dump or a raw object, and still returns our own API's message unchanged whenever there is one.
+
+  The vehicle dialogs had their own local copy of that logic (`readServerMessage`), which fell back to `error.message` and was where the leak was seen. It is gone; delete, restore, update-type, approve and the add/edit form all use the shared mapper.
+
 ## 4.2.2
 
 ### Patch Changes
@@ -458,11 +468,11 @@
   `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/components/VehicleForm.vue

@@ -411,6 +411,7 @@
 </template>
 
 <script setup lang="ts">
+import { errorConverter } from "../utils/data";
 const prop = defineProps({
   type: {
     type: String as PropType<TVehicleType | "seasonpass">,
@@ -865,12 +866,11 @@ async function submit() {
     // A refused create is fail-closed on the server and its message names the
     // camera that would not take the plate. `$fetch` puts it on `data`, `ofetch`
     // on `response._data`; reading only one of them dropped the reason.
-    errorMessage.value =
-      error?.data?.message ||
-      error?.response?._data?.message ||
-      `Failed to ${
-        prop.mode === "add" ? "add" : "update"
-      } vehicle. Please try again.`;
+    // `errorConverter` reads both shapes and, when the failure never reached
+    // the API at all (a gateway 502 answers with HTML, a dropped connection
+    // with nothing), returns a plain sentence instead of ofetch's
+    // `[POST] "/api/vehicles": 502`.
+    errorMessage.value = errorConverter(error);
   } finally {
     processing.value = false;
   }

package/components/VehicleManagement.vue

@@ -210,6 +210,11 @@ import {
   vehiclePlateActions,
   type VehicleActionKey,
 } from '../utils/vehicle-actions';
+// The app-wide error mapper. A gateway 502 answers with an HTML page, not a
+// JSON API error, so reading `_data.message` and then falling back to
+// `error.message` put ofetch's own developer string in the delete dialog:
+// `[PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502`.
+import { errorConverter } from '../utils/data';
 
 
 
@@ -289,21 +294,6 @@ function closeActionDialog(key: "approveVehicle" | "restoreVehicle" | "updateVeh
   actionError.value = "";
 }
 
-/**
- * The server's own sentence, or a plain fallback.
- *
- * `error.response._data` is undefined on a network failure, so reading it
- * unguarded threw out of the catch and the operator saw nothing at all.
- */
-function readServerMessage(error: any, fallback: string) {
-  return (
-    error?.response?._data?.message ||
-    error?.data?.message ||
-    error?.message ||
-    fallback
-  );
-}
-
 function showMessage(msg: string, color: string) {
   message.value = msg;
   messageColor.value = color;
@@ -566,7 +556,7 @@ async function submitDelete() {
     // request is refused. Say so. This used to assign to `message` WITHOUT
     // raising the snackbar - and `error.response._data` throws on a network
     // error - so a refused delete showed the operator nothing at all.
-    deleteError.value = readServerMessage(error, "Failed to delete vehicle.");
+    deleteError.value = errorConverter(error);
     // The dialog stays open and the row stays in the table - nothing is removed
     // optimistically, so what is on screen still matches the database.
   } finally {
@@ -595,7 +585,7 @@ async function submitRestore() {
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    actionError.value = readServerMessage(error, "Failed to restore vehicle.");
+    actionError.value = errorConverter(error);
   } finally {
     restoringVehicle.value = false;
   }
@@ -642,7 +632,7 @@ async function submitUpdateType() {
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    actionError.value = readServerMessage(error, "Failed to update vehicle type.");
+    actionError.value = errorConverter(error);
   } finally {
     updatingType.value = false;
   }
@@ -667,7 +657,7 @@ async function submitApprove() {
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    actionError.value = readServerMessage(error, "Failed to approve vehicle.");
+    actionError.value = errorConverter(error);
   } finally {
     approvingVehicle.value = false;
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "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/utils/data.ts

@@ -1,33 +1,113 @@
+/**
+ * The app-wide "turn a failed request into a sentence" helper. 29 call sites in
+ * this layer alone, so every module gets whatever this returns.
+ *
+ * It only ever understood a JSON API error - `{ message: "..." }` from our own
+ * Express error handler. Anything else fell through to a developer string. A
+ * gateway 502 put this in front of an operator, verbatim, inside the delete
+ * dialog:
+ *
+ *     [PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502
+ *
+ * That is ofetch's own `error.message`. It names an internal route and a record
+ * id, and tells the person nothing they can do. nginx and Cloudflare answer
+ * with HTML, not JSON, so `_data` has no `.message` at all - and on a dropped
+ * connection there is no `response` either.
+ *
+ * The rules below, in order:
+ *   1. our own API said something -> say exactly that, unchanged. This is the
+ *      path every working screen already takes and it must not move.
+ *   2. otherwise -> a plain sentence chosen from the status.
+ *   3. never -> HTML, a JSON dump, an ofetch `[METHOD] "url": status` string,
+ *      or a raw object.
+ */
+
+/** ofetch builds `[GET] "/api/thing": 502 Bad Gateway`. Never show it. */
+const OFETCH_MESSAGE = /^\[[A-Z]+\]\s+"/;
+
+/** A body that is a document, not an API error. */
+const LOOKS_LIKE_HTML = /^\s*(<!doctype|<html|<)/i;
+
+const GENERIC =
+  "Something went wrong. Please try again or contact support if the problem persists.";
+
+/**
+ * The server's own sentence, if there is one that is safe to show.
+ *
+ * Returns `""` when the body is not one of ours - an HTML error page, a JSON
+ * object with no `message`, or an empty response.
+ */
+function apiMessage(error: any): string {
+  const data = error?.response?._data ?? error?.data ?? error?._data;
+
+  const candidate =
+    typeof data === "string" ? data : (data?.message ?? data?.error);
+
+  if (typeof candidate !== "string") return "";
+
+  const text = candidate.trim();
+  if (!text) return "";
+  if (LOOKS_LIKE_HTML.test(text)) return "";
+  // A whole HTML page that starts with whitespace/JSON-ish noise still has no
+  // business on screen; anything this long is a document, not a message.
+  if (text.length > 400) return "";
+
+  return text;
+}
+
+/** A plain sentence for a request that failed without telling us anything. */
+function sentenceForStatus(status: number | null): string {
+  if (status === null) {
+    // No response at all: DNS, a dropped connection, a cancelled request.
+    return "Could not reach the server. Check your internet connection and try again.";
+  }
+  if (status === 401) return "Your session has expired. Please sign in again.";
+  if (status === 403) {
+    return "You do not have permission to do this. Ask your iService365 administrator for access.";
+  }
+  if (status === 404) return "That record no longer exists. Refresh the page and try again.";
+  if (status === 408 || status === 504) {
+    return "The server took too long to answer. Please try again in a few moments.";
+  }
+  if (status === 429) return "Too many attempts in a short time. Please wait a moment and try again.";
+  if (status === 502 || status === 503) {
+    return "The server is temporarily unavailable. Please try again in a few moments.";
+  }
+  if (status >= 500) {
+    return "The server could not complete this request. Please try again, and contact support if it keeps happening.";
+  }
+  return GENERIC;
+}
+
 export const errorConverter = (data: any): string => {
-  let error =
-    "Something went wrong. Please try again or contact support if the problem persists.";
-
-  if (data?.response) {
-    console.log("errorConverter response: ", data.response);
-    if (
-      data.response.status == 400 ||
-      data.response.status == 500 ||
-      data.response.status == 502 ||
-      (data.response.status == 404 && data.response._data.message)
-    ) {
-      if (data.response._data) {
-        return (error = data.response._data.message || data.response._data);
-      }
-    } else if (data.response._data) {
-      return (error = data.response._data.message || data.response._data);
-    } else if (data.response.status == 404) {
-      return "Server Endpoint Not Found";
-    } else if (data.response.status == 502) {
-      return "The server is temporarily unavailable. Please try again in a few moments.";
-    }
-    error = `Error ${data.response.status}: ${JSON.stringify(
-      data.response._data
-    )}`;
-  } else if (data?.message) {
-    console.log("converter: ", data);
-    error = data?.message;
+  // 1. Our own API's sentence wins, whatever the status is. Unchanged
+  //    behaviour for every screen that works today.
+  const fromApi = apiMessage(data);
+  if (fromApi) return fromApi;
+
+  // 2. No usable body. Decide from the status alone.
+  const status =
+    data?.response?.status ?? data?.statusCode ?? data?.status ?? null;
+
+  if (typeof status === "number") return sentenceForStatus(status);
+
+  // 3. No status either. An ofetch error with no response means the request
+  //    never completed at all - DNS, a dropped connection, a cancelled
+  //    request - and its `message` is the developer string that leaked.
+  const message = typeof data?.message === "string" ? data.message.trim() : "";
+
+  if (OFETCH_MESSAGE.test(message) || data?.name === "FetchError") {
+    return sentenceForStatus(null);
+  }
+
+  // 4. A plain `throw new Error("...")` from our own code. Several of those are
+  //    written FOR the toast (see `findServiceProviderIdBySite` below), so they
+  //    still pass through unchanged.
+  if (message && message.length <= 400 && !LOOKS_LIKE_HTML.test(message)) {
+    return message;
   }
-  return error;
+
+  return GENERIC;
 };
 
 /**