feat(modal): add rollout telemetry foundation

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

assets/js/core/modal-telemetry.js

@@ -0,0 +1,112 @@
+/**
+ * Frontend modal performance marks.
+ *
+ * Records only bounded domain/event names and timing data. Never include
+ * payment credentials, order contents, identity evidence, or user payloads.
+ *
+ * @package AKSRT
+ */
+(function (window) {
+  'use strict';
+
+  var allowedKinds = {
+    identity: true,
+    badges: true,
+    orders: true,
+    vip: true,
+  };
+  var allowedEvents = {
+    click: true,
+    shell: true,
+    'first-content': true,
+    ready: true,
+    'action-start': true,
+    'action-end': true,
+    unauthorized: true,
+    error: true,
+  };
+  var sessions = Object.create(null);
+  var sequence = 0;
+  var maxSessions = 100;
+
+  function normalize(value, fallback) {
+    var normalized = String(value || fallback || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+    return normalized || fallback;
+  }
+
+  function now() {
+    return window.performance && typeof window.performance.now === 'function'
+      ? window.performance.now()
+      : 0;
+  }
+
+  function markName(session, event) {
+    return 'aksrt-modal-' + session.kind + '-' + session.id + '-' + event;
+  }
+
+  function emit(session, event) {
+    if (!window.performance || typeof window.performance.mark !== 'function') return;
+
+    var name = markName(session, event);
+    window.performance.mark(name);
+    session.marks[event] = name;
+
+    if (typeof window.performance.measure === 'function' && session.marks.click && event !== 'click') {
+      try {
+        window.performance.measure(
+          'aksrt-modal-' + session.kind + '-' + session.id + '-click-to-' + event,
+          session.marks.click,
+          name
+        );
+      } catch (error) {
+        // A missing mark must never affect the modal interaction.
+      }
+    }
+  }
+
+  function start(kind) {
+    var safeKind = normalize(kind, 'unknown');
+    if (!allowedKinds[safeKind]) safeKind = 'unknown';
+
+    sequence += 1;
+    var id = String(sequence);
+    var session = {
+      id: id,
+      kind: safeKind,
+      startedAt: now(),
+      marks: Object.create(null),
+    };
+
+    sessions[id] = session;
+    emit(session, 'click');
+
+    var ids = Object.keys(sessions);
+    while (ids.length > maxSessions) {
+      delete sessions[ids.shift()];
+    }
+
+    return id;
+  }
+
+  function mark(id, event) {
+    var session = sessions[String(id || '')];
+    var safeEvent = normalize(event, 'error');
+    if (!session || !allowedEvents[safeEvent]) return;
+    emit(session, safeEvent);
+  }
+
+  function finish(id) {
+    mark(id, 'ready');
+  }
+
+  function fail(id) {
+    mark(id, 'error');
+  }
+
+  window.AksrtModalTelemetry = {
+    start: start,
+    mark: mark,
+    finish: finish,
+    error: fail,
+  };
+})(window);

assets/js/order-center.js

@@ -98,18 +98,28 @@
     function openDetail(orderNumber) {
         if (!detailModal || !detailBody) return;
         detailOrderNumber = orderNumber;
+        var telemetry = window.AksrtModalTelemetry;
+        var telemetryId = telemetry && typeof telemetry.start === "function" ? telemetry.start("orders") : "";
+        function telemetryMark(event) {
+            if (telemetry && telemetryId && typeof telemetry.mark === "function") telemetry.mark(telemetryId, event);
+        }
         detailBody.innerHTML = '<p class="muted-2-color">加载中…</p>';
         detailFooter.innerHTML = "";
         detailModal.hidden = false;
         document.documentElement.classList.add("aksrt-modal-open");
+        telemetryMark("shell");
         request(orderPath(orderNumber), undefined, "GET").then(function (result) {
             if (orderNumber !== detailOrderNumber) return;
             if (!result.success || !result.data) {
+                telemetryMark("error");
                 detailBody.innerHTML = '<p class="c-red">' + escapeHtml(result.message || "订单不存在") + "</p>";
                 return;
             }
+            telemetryMark("first-content");
             renderDetail(result.data);
+            telemetryMark("ready");
         }).catch(function () {
+            telemetryMark("error");
             detailBody.innerHTML = '<p class="c-red">网络错误，请稍后重试</p>';
         });
     }

assets/js/pay-vip.js

@@ -252,21 +252,29 @@
     }
     if (loading) return;
     loading = true;
+    var telemetry = window.AksrtModalTelemetry;
+    var telemetryId = telemetry && typeof telemetry.start === "function" ? telemetry.start("vip") : "";
+    function telemetryMark(event) {
+      if (telemetry && telemetryId && typeof telemetry.mark === "function") telemetry.mark(telemetryId, event);
+    }
     var shell = ensureModalShell();
     var body = shell.querySelector("[data-aksrt-vip-modal-body]");
     if (body) body.innerHTML = '<div class="text-center padding-20 muted-2-color">加载中…</div>';
     openModal();
+    telemetryMark("shell");
 
     api("/pay/vip/modal", { query: { vip_level: level } })
       .then(function (r) {
         loading = false;
         if (r.status === 401) {
+          telemetryMark("unauthorized");
           closeModal();
           var login = document.querySelector(".signin-loader");
           if (login) login.click();
           return;
         }
         if (!r.ok || !r.json || !r.json.html) {
+          telemetryMark("error");
           if (body) {
             body.innerHTML =
               '<div class="text-center padding-20 c-red">' +
@@ -277,11 +285,14 @@
         }
         if (body) {
           body.innerHTML = r.json.html;
+          telemetryMark("first-content");
           bindModalUi(body);
+          telemetryMark("ready");
         }
       })
       .catch(function () {
         loading = false;
+        telemetryMark("error");
         if (body) {
           body.innerHTML = '<div class="text-center padding-20 c-red">网络错误</div>';
         }

assets/js/routes/user-center-auth.js

@@ -63,8 +63,20 @@
     var currentUuid = config.currentUuid || '';
     var pollTimer = null;
     var shouldPoll = false;
+    var telemetry = window.AksrtModalTelemetry;
+    var telemetryId = '';
 
-    function open() { modal.classList.add('is-open'); modal.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; }
+    function telemetryMark(event) {
+      if (telemetry && telemetryId && typeof telemetry.mark === 'function') telemetry.mark(telemetryId, event);
+    }
+
+    function open() {
+      telemetryId = telemetry && typeof telemetry.start === 'function' ? telemetry.start('identity') : '';
+      modal.classList.add('is-open');
+      modal.setAttribute('aria-hidden', 'false');
+      document.body.style.overflow = 'hidden';
+      telemetryMark('shell');
+    }
     function close() { modal.classList.remove('is-open'); modal.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; }
     root.querySelectorAll('[data-auth-modal-open]').forEach(function (button) { button.addEventListener('click', open); });
     modal.querySelectorAll('[data-auth-modal-close]').forEach(function (button) { button.addEventListener('click', close); });
@@ -80,6 +92,7 @@
 
     function render(data) {
       if (!data) return;
+      telemetryMark('first-content');
       currentUuid = data.uuid || currentUuid;
       if (statusBox) statusBox.hidden = false;
       if (createForm) createForm.hidden = true;
@@ -102,6 +115,7 @@
       } else {
         stopPolling();
       }
+      telemetryMark('ready');
     }
 
     function refresh() {

assets/js/user-badges.js

@@ -93,6 +93,12 @@
     var wearSlot = modal.querySelector('[data-aksrt-badges-wear-slot]');
 
     var state = { data: null, detailSlug: '' };
+    var telemetry = window.AksrtModalTelemetry;
+    var telemetryId = '';
+
+    function telemetryMark(event) {
+      if (telemetry && telemetryId && typeof telemetry.mark === 'function') telemetry.mark(telemetryId, event);
+    }
 
     function findItem(slug) {
       var cats = (state.data && state.data.categories) || [];
@@ -230,6 +236,7 @@
       }
       return api('/users/' + userId + '/badges').then(function (r) {
         if (!r.ok || !r.json || !r.json.data) {
+          telemetryMark('error');
           if (body) {
             body.innerHTML = '<div class="uc-badges-error">' +
               '<span class="c-red em09">' + escapeHtml('加载失败') + '</span>' +
@@ -239,8 +246,10 @@
           return;
         }
         state.data = r.json.data;
+        telemetryMark('first-content');
         renderHead();
         renderGrid();
+        telemetryMark('ready');
       });
     }
 
@@ -271,7 +280,9 @@
     openers.forEach(function (btn) {
       btn.addEventListener('click', function (e) {
         e.preventDefault();
+        telemetryId = telemetry && typeof telemetry.start === 'function' ? telemetry.start('badges') : '';
         openModal();
+        telemetryMark('shell');
         showView('grid');
         load();
       });