@arcforgelabs/flow 2026.10.33 → 2026.10.35

package/server/ui/monitoring.js

@@ -1,5 +1,6 @@
-// Errors and problem reports from the browser, to the installation's own
-// Sentry project (docs/SENTRY.md). Only while the Sentry integration is on:
+// Errors, problem reports and performance traces from the browser, to the
+// installation's own Sentry project (docs/SENTRY.md). Only while the Sentry
+// integration is on:
 // GET /api/monitoring says so and gives the project's public DSN. The SDK
 // comes from Sentry's CDN, pinned and checked against its integrity hash.
 // With the integration off, nothing loads and there is no "Report a problem".
@@ -26,6 +27,36 @@ export function tagNotify(event) {
   event.tags = { ...event.tags, notify: email ? 'yes' : 'no' };
 }
 
+// A path as a pattern: each id in it becomes ":id", so every invoice's page
+// is one name in a trace. The server names its requests the same way when no
+// route matched (server/core/tracing.js).
+const ID_SEGMENT = /^(\d+|[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|[0-9a-z_-]*\d[0-9a-z_-]{15,})$/i;
+export function routePattern(path) {
+  const bare = String(path ?? '').replace(/[?#].*$/, '');
+  return bare.split('/').map((part) => (ID_SEGMENT.test(part) ? ':id' : part)).join('/');
+}
+
+// What a trace span keeps: timings, the route, the status. Never a query
+// string (a search can hold a name), a header, a cookie, an address or an
+// email. The person's Flow id stays, as on errors. Used here and by the
+// server (server/integrations/sentry/index.js).
+const DROPPED_ATTRIBUTE = /^(http\.(request|response)\.header\.|client\.|network\.(peer|local)\.|url\.(query|fragment)$|user\.(?!id$))/;
+export function scrubSpan(span) {
+  if (!span) return span;
+  // "GET /api/search?q=…" loses its query; a database span's SQL keeps its "?".
+  const request = /^((?:GET|POST|PUT|PATCH|DELETE) \S*?)[?#]\S*/;
+  if (typeof span.name === 'string') span.name = span.name.replace(request, '$1');
+  if (typeof span.description === 'string') span.description = span.description.replace(request, '$1');
+  const attributes = span.attributes ?? span.data;
+  if (attributes) {
+    for (const key of Object.keys(attributes)) {
+      if (DROPPED_ATTRIBUTE.test(key)) delete attributes[key];
+      else if (typeof attributes[key] === 'string' && /(^|\.)url(\.full)?$|^http\.url$/.test(key)) attributes[key] = attributes[key].replace(/[?#].*$/, '');
+    }
+  }
+  return span;
+}
+
 /** Resolves to a function that opens the "Report a problem" form, or null. */
 export async function startMonitoring({ flow, person }) {
   const config = await flow('/api/monitoring');
@@ -51,12 +82,23 @@ export async function startMonitoring({ flow, person }) {
     submitButtonLabel: 'Send report',
     successMessageText: 'Thank you. Your report is sent.',
   })] : [];
+  // Traces: page loads, moves between pages and each click's wait, with the
+  // calls to Flow's server joined to the server's own trace. Only when the
+  // installation set a share above 0 (SENTRY_TRACES_SAMPLE_RATE).
+  const tracesSampleRate = Number(config.tracesSampleRate) || 0;
+  if (tracesSampleRate > 0) {
+    integrations.push(Sentry.browserTracingIntegration({
+      beforeStartSpan: (options) => ({ ...options, name: routePattern(options.name) }),
+    }));
+  }
   Sentry.init({
     dsn: config.dsn,
     environment: config.environment,
     release: config.release ?? undefined,
     sendDefaultPii: false,
     integrations,
+    tracesSampleRate,
+    beforeSendSpan: scrubSpan,
   });
   Sentry.getClient()?.on('beforeSendFeedback', tagNotify);
   // Who reported or met the error, so the lab can follow up.

package/server/ui/routes.js

@@ -20,7 +20,7 @@ const themeDir = join(here, '..', 'theme');
 const logoDir = join(here, 'logos');
 const LOGO_FILES = new Set(['xero.svg', 'seazona.svg', 'sentry.svg']);
 const THEME_FILES = new Set(['themes.js', 'color-contrast.js', 'openclaw-palettes.js', 'font-families.js']);
-const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'jobs.js', 'job-board.js', 'monitoring.js', 'search.js', 'alerts.js', 'flow-mark.svg']);
+const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'job-view.js', 'monitoring.js', 'search.js', 'alerts.js', 'flow-mark.svg']);
 const MAX_AGE = '1h';
 
 // Send one named file from dir. Passing dir as root limits the dotfile check