chore(monitor): add debug meta for long interaction times

Author: RobPruzan

packages/scan/src/core/monitor/network.ts

@@ -6,7 +6,12 @@ import {
   MAX_PENDING_REQUESTS,
 } from './constants';
 import { getSession } from './utils';
-import type { Interaction, IngestRequest, InternalInteraction, Component } from './types';
+import type {
+  Interaction,
+  IngestRequest,
+  InternalInteraction,
+  Component,
+} from './types';
 
 const INTERACTION_TIME_TILL_COMPLETED = 4000;
 
@@ -55,18 +60,77 @@ export const flush = async (): Promise<void> => {
   for (let i = 0; i < completedInteractions.length; i++) {
     const interaction = completedInteractions[i];
 
+    // META INFORMATION IS FOR DEBUGGING THIS MUST BE REMOVED SOON
+    const {
+      duration,
+      entries,
+      id,
+      inputDelay,
+      latency,
+      presentationDelay,
+      processingDuration,
+      processingEnd,
+      processingStart,
+      referrer,
+      startTime,
+      target,
+      timeOrigin,
+      timeSinceTabInactive,
+      timestamp,
+      type,
+      visibilityState,
+    } = interaction.performanceEntry;
     aggregatedInteractions.push({
       id: i,
       path: interaction.componentPath,
       name: interaction.componentName,
-      time: interaction.performanceEntry.duration,
-      timestamp: interaction.performanceEntry.timestamp,
-      type: interaction.performanceEntry.type,
+      time: duration,
+      timestamp,
+      type,
+      // fixme: we can aggregate around url|route|commit|branch better to compress payload
       url: interaction.url,
       route: interaction.route,
       commit: interaction.commit,
       branch: interaction.branch,
       uniqueInteractionId: interaction.uniqueInteractionId,
+      meta: {
+        performanceEntry: {
+          id,
+          inputDelay,
+          latency,
+          presentationDelay,
+          processingDuration,
+          processingEnd,
+          processingStart,
+          referrer,
+          startTime,
+          target,
+          timeOrigin,
+          timeSinceTabInactive,
+          visibilityState,
+          duration: duration,
+          entries: entries.map((entry) => {
+            const {
+              duration,
+              entryType,
+              interactionId,
+              name,
+              processingEnd,
+              processingStart,
+              startTime,
+            } = entry;
+            return {
+              duration,
+              entryType,
+              interactionId,
+              name,
+              processingEnd,
+              processingStart,
+              startTime,
+            };
+          }),
+        },
+      },
     });
 
     const components = Array.from(interaction.components.entries());

packages/scan/src/core/monitor/performance.ts

@@ -1,4 +1,3 @@
- 
 import { type Fiber } from 'react-reconciler';
 import { getDisplayName } from 'bippy';
 import { Store } from '../..';
@@ -127,7 +126,10 @@ function getCleanComponentName(component: any): string {
   const name = getDisplayName(component);
   if (!name) return '';
 
-  return name.replace(/^(?:Memo|Forward(?:Ref)?|With.*?)\((?<inner>.*?)\)$/, '$<inner>');
+  return name.replace(
+    /^(?:Memo|Forward(?:Ref)?|With.*?)\((?<inner>.*?)\)$/,
+    '$<inner>',
+  );
 }
 
 export function normalizePath(path: Array<string>): string {
@@ -162,6 +164,25 @@ const getFirstNamedAncestorCompositeFiber = (element: Element) => {
   }
   return parentCompositeFiber;
 };
+
+let unsubscribeTrackVisibilityChange: () => void;
+// fixme: compress me if this stays here for bad interaction time checks
+let lastVisibilityHiddenAt: number | 'never-hidden' = 'never-hidden';
+
+const trackVisibilityChange = () => {
+  trackVisibilityChange();
+  const onVisibilityChange = () => {
+    if (document.hidden) {
+      lastVisibilityHiddenAt = Date.now();
+    }
+  };
+  document.addEventListener('visibilitychange', onVisibilityChange);
+
+  unsubscribeTrackVisibilityChange = () => {
+    document.removeEventListener('visibilitychange', onVisibilityChange);
+  };
+};
+
 // todo: update monitoring api to expose filters for component names
 export function initPerformanceMonitoring(options?: Partial<PathFilters>) {
   const filters = { ...DEFAULT_FILTERS, ...options };
@@ -211,6 +232,7 @@ export function initPerformanceMonitoring(options?: Partial<PathFilters>) {
 const setupPerformanceListener = (
   onEntry: (interaction: PerformanceInteraction) => void,
 ) => {
+  trackVisibilityChange();
   const longestInteractionList: Array<PerformanceInteraction> = [];
   const longestInteractionMap = new Map<string, PerformanceInteraction>();
   const interactionTargetMap = new Map<string, Element>();
@@ -258,6 +280,10 @@ const setupPerformanceListener = (
         presentationDelay:
           entry.duration - (entry.processingEnd - entry.startTime),
         timestamp: Date.now(),
+        timeSinceTabInactive: lastVisibilityHiddenAt === 'never-hidden' ? 'never-hidden' : Date.now() - lastVisibilityHiddenAt,
+        visibilityState: document.visibilityState,
+        timeOrigin: performance.timeOrigin,
+        referrer: document.referrer,
       };
       longestInteractionMap.set(interaction.id, interaction);
       longestInteractionList.push(interaction);

packages/scan/src/core/monitor/types.ts

@@ -6,7 +6,6 @@ export enum Device {
   MOBILE = 2,
 }
 
-
 export interface Session {
   id: string;
   device: Device;
@@ -39,6 +38,8 @@ export interface Interaction {
   projectId?: string;
   sessionId?: string;
   uniqueInteractionId: string;
+
+  meta?: unknown;
 }
 
 export interface Component {
@@ -102,4 +103,8 @@ export interface PerformanceInteraction {
   processingDuration: number;
   presentationDelay: number;
   timestamp: number;
+  timeSinceTabInactive: number | 'never-hidden';
+  visibilityState: DocumentVisibilityState;
+  timeOrigin: number;
+  referrer: string;
 }