refactor(monitor): update Monitoring component

- Removed unused imports and variables
- Reorganized code for better readability
- Added optional parameters for path, params, commit, and branch in Monitoring component
- Updated getSession function to accept optional commit and branch parameters
- Updated flush function to pass commit and branch to getSession
- Updated toPayloadInteraction function to include commit and branch in interaction payload
- Updated initPerformanceMonitoring function to include commit and branch in performance entry
- Updated Session interface to include url, route, commit, and branch properties
- Updated Interaction interface to include commit and branch properties
- Updated InternalInteraction interface to include commit and branch properties
- Updated AstroMonitor component to use path instead of pathname prop
- Updated AstroMonitor component to pass path and params to computeRoute function
- Updated MonitoringWithoutRouteProps interface to include optional commit and branch properties

Author: NisargIO

packages/scan/src/core/index.ts

@@ -128,11 +128,11 @@ export type MonitoringOptions = Pick<
 
 interface Monitor {
   pendingRequests: number;
+  interactions: Array<InternalInteraction>;
+  session: ReturnType<typeof getSession>;
   url: string | null;
   apiKey: string | null;
-  interactions: Array<InternalInteraction>;
   route: string | null;
-  session: ReturnType<typeof getSession>;
   path: string | null;
   commit: string | null;
   branch: string | null;

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

@@ -14,17 +14,26 @@ import { addFiberToSet, isValidFiber, updateFiberRenderData } from '../utils';
 import { initPerformanceMonitoring } from './performance';
 import { getSession } from './utils';
 import { flush } from './network';
+import { computeRoute } from './params/utils';
 
 // max retries before the set of components do not get reported (avoid memory leaks of the set of fibers stored on the component aggregation)
 const MAX_RETRIES_BEFORE_COMPONENT_GC = 7;
 
 export interface MonitoringProps {
   url?: string;
   apiKey: string;
-  path: string;
-  route: string | null;
-  commit: string | null;
-  branch: string | null;
+
+  // For Session and Interaction
+  path?: string | null; // pathname (i.e /foo/bar)
+  route?: string | null; // computed from path and params
+
+  // To compute Route when using Monitoring without framework
+  // Only used to compute the route
+  params?: Record<string, string>;
+
+  // Tracking regressions across commits and branches
+  commit?: string | null;
+  branch?: string | null;
 }
 
 export interface MonitoringWithoutRouteProps
@@ -33,28 +42,35 @@ export interface MonitoringWithoutRouteProps
 export const Monitoring = ({
   url,
   apiKey,
-  path,
-  route,
-  commit,
-  branch,
+  path = null, // path passed down would be reactive
+  params,
+  route = null,
+  commit = null,
+  branch = null,
 }: MonitoringProps) => {
   if (!apiKey)
     throw new Error('Please provide a valid API key for React Scan monitoring');
   url ??= 'https://monitoring.react-scan.com/api/v1/ingest';
 
   Store.monitor.value ??= {
     pendingRequests: 0,
+    interactions: [],
+    session: getSession({ commit, branch }).catch(() => null),
     url,
     apiKey,
-    interactions: [],
-    session: getSession().catch(() => null),
     route,
     path,
     commit,
     branch,
   };
-  Store.monitor.value.route = route;
-  Store.monitor.value.path = path;
+  // When using Monitoring without framework, we need to compute the route from the path and params
+  if (!route && path && params) {
+    Store.monitor.value.route = computeRoute(path, params);
+  } else {
+    Store.monitor.value.route = route ?? new URL(window.location.toString()).pathname;
+  }
+
+  Store.monitor.value.path = path ?? new URL(window.location.toString()).pathname;
 
   // eslint-disable-next-line import/no-named-as-default-member
   React.useEffect(() => {

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

@@ -75,8 +75,10 @@ const toPayloadInteraction = (interactions: Array<InternalInteraction>) =>
         time: interaction.performanceEntry.duration,
         timestamp: interaction.performanceEntry.timestamp,
         type: interaction.performanceEntry.type,
-        route: interaction.route,
         url: interaction.url,
+        route: interaction.route,
+        commit: interaction.commit,
+        branch: interaction.branch,
         uniqueInteractionId: interaction.uniqueInteractionId,
       }) satisfies Interaction,
   );
@@ -100,7 +102,10 @@ export const flush = async (): Promise<void> => {
     return;
   }
   // idempotent
-  const session = await getSession().catch(() => null);
+  const session = await getSession({
+    commit: monitor.commit,
+    branch: monitor.branch,
+  }).catch(() => null);
 
   if (!session) return;
 
@@ -111,6 +116,8 @@ export const flush = async (): Promise<void> => {
     components: aggregatedComponents,
     session: {
       ...session,
+      url: window.location.toString(),
+      route: monitor.route, // this might be inaccurate but used to caculate which paths all the unique sessions are coming from without having to join on the interactions table (expensive)
     },
   };
 

packages/scan/src/core/monitor/params/astro/Monitoring.astro

@@ -9,8 +9,8 @@ interface Props {
 
 const { apiKey, url } = Astro.props;
 
-const pathname = Astro.url.pathname;
+const path = Astro.url.path;
 const params = Astro.params;
 ---
 
-<AstroMonitor apiKey={apiKey} url={url} pathname={pathname} params={params} client:only="react" />
+<AstroMonitor apiKey={apiKey} url={url} path={pathname} params={params} client:only="react" />

packages/scan/src/core/monitor/params/astro/component.ts

@@ -5,10 +5,10 @@ import { computeRoute } from '../utils';
 export function AstroMonitor(props: {
   url?: string;
   apiKey: string;
-  pathname: string;
+  path: string;
   params: Record<string, string>;
 } & MonitoringWithoutRouteProps) {
-  const path = props.pathname;
+  const path = props.path;
   const route = computeRoute(path, props.params);
 
   return createElement(BaseMonitoring, {

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

@@ -195,8 +195,10 @@ export function initPerformanceMonitoring(options?: Partial<PathFilters>) {
       componentPath: path,
       performanceEntry: entry,
       components: new Map(),
-      route: Store.monitor.value?.route ?? null,
       url: window.location.toString(),
+      route: Store.monitor.value?.route ?? null,
+      commit: Store.monitor.value?.commit ?? null,
+      branch: Store.monitor.value?.branch ?? null,
       uniqueInteractionId: entry.id,
     });
   });

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

@@ -15,6 +15,10 @@ export interface Session {
   cpu: number;
   gpu: string | null;
   mem: number;
+  url: string;
+  route: string | null;
+  commit: string | null;
+  branch: string | null;
 }
 
 export interface Interaction {
@@ -23,8 +27,13 @@ export interface Interaction {
   type: string; // type of interaction i.e pointer
   time: number; // time of interaction in ms
   timestamp: number;
-  route: string | null; // the computed route that handles dynamic params
   url: string;
+  route: string | null; // the computed route that handles dynamic params
+
+  // Regression tracking
+  commit: string | null;
+  branch: string | null;
+
   // clickhouse + ingest specific types
   projectId?: string;
   sessionId?: string;
@@ -51,6 +60,8 @@ export interface InternalInteraction {
   componentName: string;
   url: string;
   route: string | null;
+  commit: string | null;
+  branch: string | null;
   uniqueInteractionId: string;
   componentPath: string;
   performanceEntry: PerformanceInteraction;

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

@@ -61,7 +61,13 @@ const getGpuRenderer = () => {
  * DO NOT CALL THIS EVERYTIME
  */
 let cachedSession: Session;
-export const getSession = async () => {
+export const getSession = async ({
+  commit = null,
+  branch = null,
+}: {
+  commit?: string | null;
+  branch?: string | null;
+}) => {
   if (isSSR) return null;
   if (cachedSession) {
     return cachedSession;
@@ -102,12 +108,15 @@ export const getSession = async () => {
   const session = {
     id,
     url,
+    route: null,
     device: getDeviceType(),
     wifi,
     cpu,
     mem,
     gpu: await gpuRendererPromise,
     agent: navigator.userAgent,
+    commit,
+    branch,
   };
   cachedSession = session;
   return session;