@jx3box/jx3box-ui 2.4.4 → 2.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.4.4",
+    "version": "2.4.6",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/src/utils/traffic-analytics.js

@@ -10,14 +10,114 @@ import {
     installVueRouterAnalytics,
 } from "@jx3box/jx3box-common/js/analytics.js";
 
-const DEFAULT_CONFIG_ENDPOINT = "/api/cms/system/traffic/config";
-const DEFAULT_BATCH_ENDPOINT = "/api/cms/system/traffic/visits/batch";
+const DEFAULT_CONFIG_ENDPOINT = "https://cms.jx3box.com/api/cms/system/traffic/config";
+const DEFAULT_BATCH_ENDPOINT = "https://cms.jx3box.com/api/cms/system/traffic/visits/batch";
 const DEFAULT_QUEUE_STORAGE_KEY = "jx3box:analytics:traffic:queue:v1";
 const DEFAULT_BLOCK_STORAGE_KEY = "jx3box:analytics:traffic:block:v1";
 const EMBEDDED_SURFACES = new Set(["app", "miniprogram", "pc_game", "mobile_game"]);
 const COMMON_HEADER_INSTALLATIONS = new WeakMap();
 const COMMON_HEADER_TRAFFIC_PROJECT = "jx3box-ui";
 
+function normalizeRoutePath(value) {
+    let path = String(value || "")
+        .split(/[?#]/, 1)[0]
+        .trim();
+    if (!path) return "";
+    if (!path.startsWith("/")) path = `/${path}`;
+    path = path.replace(/\/{2,}/g, "/");
+    return path.length > 1 ? path.replace(/\/+$/, "") : path;
+}
+
+function normalizeVueRouteTemplate(value) {
+    const path = normalizeRoutePath(value);
+    if (!path || path === "/") return path;
+    return `/${path
+        .slice(1)
+        .split("/")
+        .map(function (segment) {
+            if (!segment.startsWith(":")) return segment;
+            const name = segment.slice(1).match(/^[A-Za-z_][A-Za-z0-9_]*/)?.[0];
+            if (!name) return segment;
+            // Backend rules own parameter validation. Vue Router custom regexes
+            // such as :id(\d+) are local matching details and must normalize to
+            // the registered cross-client template :id.
+            return `:${name}${segment.endsWith("?") ? "?" : ""}`;
+        })
+        .join("/")}`;
+}
+
+function routeTemplate(route) {
+    const source = route || {};
+    const meta = source.meta && typeof source.meta === "object" ? source.meta : {};
+    const analytics = meta.analytics && typeof meta.analytics === "object" ? meta.analytics : {};
+    const matched = Array.isArray(source.matched) ? source.matched : [];
+    const record = matched.length ? matched[matched.length - 1] : null;
+    return normalizeVueRouteTemplate(
+        analytics.route_pattern || analytics.routePattern || (record && record.path) || source.path || ""
+    );
+}
+
+function routerBase(router) {
+    return normalizeRoutePath(router?.options?.history?.base || router?.history?.base || "/") || "/";
+}
+
+function resolveAbsoluteRoutePattern(router, route, runtime) {
+    const pattern = routeTemplate(route);
+    if (!pattern) return "";
+    const base = routerBase(router);
+    if (base === "/" || pattern === base || pattern.startsWith(`${base}/`)) return pattern;
+
+    // Multi-entry PC projects mount their Router below paths such as /macro or /pet.
+    // Vue Router exposes only / and /:id inside that base, so retain the route
+    // template while restoring its public prefix. location.pathname is used only
+    // to verify that this Router currently owns the browser path; real IDs never
+    // replace the template or enter the long-term page key.
+    const pathname = normalizeRoutePath(runtime?.location?.pathname || "");
+    if (pathname && pathname !== base && !pathname.startsWith(`${base}/`)) return pattern;
+    return pattern === "/" ? base : `${base}${pattern}`;
+}
+
+function createAbsoluteRouteRouter(router, runtime) {
+    if (!router || typeof router.afterEach !== "function") return router;
+    const adaptRoute = function (route) {
+        if (!route) return route;
+        const routePattern = resolveAbsoluteRoutePattern(router, route, runtime);
+        if (!routePattern) return route;
+        const meta = route.meta && typeof route.meta === "object" ? route.meta : {};
+        const analytics = meta.analytics && typeof meta.analytics === "object" ? meta.analytics : {};
+        return Object.assign({}, route, {
+            meta: Object.assign({}, meta, {
+                analytics: Object.assign({}, analytics, { route_pattern: routePattern }),
+            }),
+        });
+    };
+    const adapter = Object.create(router);
+    adapter.afterEach = function (handler) {
+        return router.afterEach(function (to, from, failure) {
+            return handler(adaptRoute(to), adaptRoute(from), failure);
+        });
+    };
+    if (typeof router.isReady === "function") adapter.isReady = router.isReady.bind(router);
+    const currentRoute = router.currentRoute;
+    if (currentRoute && typeof currentRoute === "object" && "value" in currentRoute) {
+        adapter.currentRoute = {};
+        Object.defineProperty(adapter.currentRoute, "value", {
+            enumerable: true,
+            get: function () {
+                return adaptRoute(currentRoute.value);
+            },
+        });
+    } else {
+        Object.defineProperty(adapter, "currentRoute", {
+            enumerable: true,
+            get: function () {
+                return adaptRoute(router.currentRoute);
+            },
+        });
+    }
+    return adapter;
+}
+
 function queryValue(runtime, key) {
     const location = (runtime && runtime.location) || {};
     const sources = [location.search, String(location.hash || "").split("?")[1]];
@@ -465,12 +565,13 @@ function installCommonHeaderTrafficAnalytics(options) {
     const surface = settings.surface || "pc_web";
     if (surface !== "pc_web" && surface !== "mobile_web") return Promise.resolve(null);
     const project = COMMON_HEADER_TRAFFIC_PROJECT;
+    const analyticsRouter = createAbsoluteRouteRouter(router, runtime);
 
     const task = Promise.resolve(typeof router.isReady === "function" ? router.isReady() : undefined)
         .then(function () {
             const collector = createJx3boxTrafficAnalytics({
                 runtime,
-                router,
+                router: analyticsRouter,
                 project,
                 product: "jx3box",
                 client: surface,
@@ -497,8 +598,10 @@ export {
     DEFAULT_CONFIG_ENDPOINT,
     DEFAULT_QUEUE_STORAGE_KEY,
     createJx3boxTrafficAnalytics,
+    createAbsoluteRouteRouter,
     installCommonHeaderTrafficAnalytics,
     normalizeRecipientDomain,
     normalizeTrafficPermission,
     resolvePcTrafficGameClient,
+    resolveAbsoluteRoutePattern,
 };

package/tests/traffic-analytics-contract.test.js

@@ -24,10 +24,12 @@ const { createEventQueue, createQueueStorage, createTrafficSink } = require("@jx
 const {
     DEFAULT_BLOCK_STORAGE_KEY,
     DEFAULT_QUEUE_STORAGE_KEY,
+    createAbsoluteRouteRouter,
     createJx3boxTrafficAnalytics,
     normalizeRecipientDomain,
     normalizeTrafficPermission,
     resolvePcTrafficGameClient,
+    resolveAbsoluteRoutePattern,
 } = require("../src/utils/traffic-analytics.js");
 const trafficSource = fs.readFileSync(path.resolve(__dirname, "../src/utils/traffic-analytics.js"), "utf8");
 
@@ -91,6 +93,39 @@ function createRouter() {
     };
 }
 
+test("CommonHeader restores a multi-entry Router base without exposing real path IDs", () => {
+    const router = createRouter();
+    router.options = { history: { base: "/macro/" } };
+    const runtime = { location: { pathname: "/macro/123" } };
+    const detail = {
+        name: "single",
+        matched: [{ path: "/:id(\\d+)" }],
+        meta: {},
+        params: { id: "123" },
+    };
+    assert.equal(resolveAbsoluteRoutePattern(router, detail, runtime), "/macro/:id");
+    assert.equal(resolveAbsoluteRoutePattern(router, { matched: [{ path: "/" }], meta: {} }, runtime), "/macro");
+
+    const adapted = createAbsoluteRouteRouter(router, runtime);
+    let received = null;
+    adapted.afterEach((to) => {
+        received = to;
+    });
+    router.navigate(detail);
+    assert.equal(received.meta.analytics.route_pattern, "/macro/:id");
+    assert.equal(received.meta.analytics.route_pattern.includes("123"), false);
+});
+
+test("CommonHeader does not duplicate an already absolute route template", () => {
+    const router = createRouter();
+    router.options = { history: { base: "/pet" } };
+    const runtime = { location: { pathname: "/pet/456" } };
+    assert.equal(
+        resolveAbsoluteRoutePattern(router, { matched: [{ path: "/pet/:id" }], meta: {} }, runtime),
+        "/pet/:id"
+    );
+});
+
 function createRuntime(options) {
     const settings = options || {};
     const listeners = new Map();
@@ -236,7 +271,7 @@ test("headless opt-in emits the official Traffic fixture once and honors per-id
         ids: [fixture.canonical_event.page_view_id, fixture.canonical_event.event_id],
         async fetch(url, options) {
             requests.push({ url, options: options || {} });
-            if (String(url).startsWith("/api/cms/system/traffic/config")) {
+            if (String(url).startsWith("https://cms.jx3box.com/api/cms/system/traffic/config")) {
                 return createResponse(200, {
                     code: 0,
                     data: {
@@ -313,7 +348,7 @@ test("headless opt-in emits the official Traffic fixture once and honors per-id
     await waitForRouter();
 
     assert.equal(requests.length, 1, "navigation should request config but defer Traffic until finalization");
-    assert.match(requests[0].url, /^\/api\/cms\/system\/traffic\/config\?/);
+    assert.match(requests[0].url, /^https:\/\/cms\.jx3box\.com\/api\/cms\/system\/traffic\/config\?/);
     assert.equal(requests[0].url.includes("must-stay-local"), false);
     assert.equal(requests[0].url.includes("section=home"), false);
     assert.equal(traffic.getState().analytics.queue.pending, 1);
@@ -387,7 +422,7 @@ test("embedded hosts use the backend recipient domain in both Config and envelop
     const runtime = createRuntime({
         async fetch(url, options) {
             requests.push({ url, options: options || {} });
-            if (String(url).startsWith("/api/cms/system/traffic/config")) {
+            if (String(url).startsWith("https://cms.jx3box.com/api/cms/system/traffic/config")) {
                 return createResponse(200, {
                     code: 0,
                     data: {
@@ -450,7 +485,7 @@ test("an explicit unknown permission pauses in memory until the host unblocks",
         localStorage,
         async fetch(url, options) {
             requests.push({ url, options: options || {} });
-            if (String(url).startsWith("/api/cms/system/traffic/config")) {
+            if (String(url).startsWith("https://cms.jx3box.com/api/cms/system/traffic/config")) {
                 return createResponse(200, {
                     code: 0,
                     data: {
@@ -510,7 +545,7 @@ test("an explicit unknown permission pauses in memory until the host unblocks",
         "unknown state is not a persistent device block"
     );
     await traffic.flush({ reason: "permission_unknown" });
-    assert.equal(requests.filter((request) => request.url === "/api/cms/system/traffic/visits/batch").length, 0);
+    assert.equal(requests.filter((request) => request.url === "https://cms.jx3box.com/api/cms/system/traffic/visits/batch").length, 0);
 
     assert.deepEqual(traffic.unblock(), { known: true, allow: true });
     assert.equal(traffic.getState().analytics.queue.blocked, false);
@@ -787,7 +822,7 @@ test("a trusted server ACK block is persisted before the queue is cleared", asyn
     const runtime = createRuntime({
         localStorage,
         async fetch(url, options) {
-            if (String(url).startsWith("/api/cms/system/traffic/config")) {
+            if (String(url).startsWith("https://cms.jx3box.com/api/cms/system/traffic/config")) {
                 return createResponse(200, {
                     code: 0,
                     data: {
@@ -854,7 +889,7 @@ test("the Traffic-only Journal never consumes or rewrites a shared Tracking Jour
         runtime: createRuntime({
             localStorage,
             async fetch(url, options) {
-                if (String(url).startsWith("/api/cms/system/traffic/config")) {
+                if (String(url).startsWith("https://cms.jx3box.com/api/cms/system/traffic/config")) {
                     return createResponse(200, {
                         code: 0,
                         data: {