chore: update build scripts and enhance file handling

- Added a warning message to the build scripts in both root and scan package to remind developers to bump the version before building.
- Refactored file handling in `tsup.config.ts` to use `fs/promises` for asynchronous file operations.
- Enhanced the `flush` function in the network monitoring module to improve interaction handling and ensure proper session management.
- Updated type definitions for `Interaction` and `Component` to allow for numeric interaction IDs.
- Modified the `getSession` function to include the package version in the session data.

Author: NisargIO

package.json

@@ -2,7 +2,7 @@
   "name": "root",
   "private": true,
   "scripts": {
-    "build": "pnpm --parallel --filter=!extension build",
+    "build": "pnpm --parallel --filter=!extension build && echo '\\n\\x1b[43m\\x1b[30m⚠️  WARNING: MAKE SURE TO BUMP VERSION BEFORE BUILDING OR REBUILD AFTER BUMPING VERSION IF PUBLISHING ⚠️\\x1b[0m\\n\\n'",
     "dev": "pnpm --parallel --filter=!extension dev",
     "pack": "pnpm --parallel --filter=!extension pack",
     "pack:bump": "pnpm --filter scan pack:bump",

packages/scan/package.json

@@ -214,7 +214,7 @@
     "auto.d.ts"
   ],
   "scripts": {
-    "build": "NODE_ENV=production tsup",
+    "build": "NODE_ENV=production tsup && echo '\\n\\x1b[43m\\x1b[30m⚠️  WARNING: MAKE SURE TO BUMP VERSION BEFORE BUILDING OR REBUILD AFTER BUMPING VERSION ⚠️\\x1b[0m\\n\\n'",
     "postbuild": "pnpm copy-astro",
     "build:copy": "NODE_ENV=production tsup && cat dist/auto.global.js | pbcopy",
     "copy-astro": "cp -R src/core/monitor/params/astro dist/core/monitor/params",

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

@@ -8,16 +8,25 @@ import {
 import { getSession } from './utils';
 import type { Interaction, IngestRequest, InternalInteraction, Component } from './types';
 
-const getInteractionId = (interaction: InternalInteraction) =>
-  `${interaction.performanceEntry.type}::<REPLACED_PATH>::${interaction.url}`; // We replace the path with <REPLACED_PATH> on ingest with the component path joined by `.`
-
 const INTERACTION_TIME_TILL_COMPLETED = 4000;
 
-const splitInteractions = (interactions: Array<InternalInteraction>) => {
+export const flush = async (): Promise<void> => {
+  const monitor = Store.monitor.value;
+  if (
+    !monitor ||
+    !navigator.onLine ||
+    !monitor.url ||
+    !monitor.interactions.length
+  ) {
+    return;
+  }
   const now = performance.now();
+  // We might trigger flush before the interaction is completed,
+  // so we need to split them into pending and completed by an arbitrary time.
   const pendingInteractions = new Array<InternalInteraction>();
   const completedInteractions = new Array<InternalInteraction>();
 
+  const interactions = monitor.interactions;
   for (let i = 0; i < interactions.length; i++) {
     const interaction = interactions[i];
     if (
@@ -30,84 +39,51 @@ const splitInteractions = (interactions: Array<InternalInteraction>) => {
     }
   }
 
-  return { pendingInteractions, completedInteractions };
-};
+  // nothing to flush
+  if (!completedInteractions.length) return;
 
-const aggregateComponents = (interactions: Array<InternalInteraction>) => {
-  const aggregatedComponents = new Array<Component>();
+  // idempotent
+  const session = await getSession({
+    commit: monitor.commit,
+    branch: monitor.branch,
+  }).catch(() => null);
 
-  for (const interaction of interactions) {
-    for (const [name, component] of Array.from(
-      interaction.components.entries(),
-    )) {
+  if (!session) return;
+
+  const aggregatedComponents = new Array<Component>();
+  const aggregatedInteractions = new Array<Interaction>();
+  for (let i = 0; i < completedInteractions.length; i++) {
+    const interaction = completedInteractions[i];
+
+    aggregatedInteractions.push({
+      id: i,
+      path: interaction.componentPath,
+      name: interaction.componentName,
+      time: interaction.performanceEntry.duration,
+      timestamp: interaction.performanceEntry.timestamp,
+      type: interaction.performanceEntry.type,
+      url: interaction.url,
+      route: interaction.route,
+      commit: interaction.commit,
+      branch: interaction.branch,
+      uniqueInteractionId: interaction.uniqueInteractionId,
+    });
+
+    const components = Array.from(interaction.components.entries());
+    for (let j = 0; j < components.length; j++) {
+      const [name, component] = components[j];
       aggregatedComponents.push({
         name,
         instances: component.fibers.size,
-        interactionId: getInteractionId(interaction),
+        interactionId: i,
         renders: component.renders,
         totalTime: component.totalTime,
       });
-
-      if (component.retiresAllowed === 0) {
-        // otherwise there will be a memory leak if the user loses internet or our server goes down
-        // we decide to skip the collection if this is the case
-        interaction.components.delete(name);
-      }
-
-      component.retiresAllowed -= 1;
     }
   }
-  return aggregatedComponents;
-};
-
-const toPayloadInteraction = (interactions: Array<InternalInteraction>) =>
-  interactions.map(
-    (interaction) =>
-      ({
-        id: getInteractionId(interaction),
-        path: interaction.componentPath,
-        name: interaction.componentName,
-        time: interaction.performanceEntry.duration,
-        timestamp: interaction.performanceEntry.timestamp,
-        type: interaction.performanceEntry.type,
-        url: interaction.url,
-        route: interaction.route,
-        commit: interaction.commit,
-        branch: interaction.branch,
-        uniqueInteractionId: interaction.uniqueInteractionId,
-      }) satisfies Interaction,
-  );
-
-export const flush = async (): Promise<void> => {
-  const monitor = Store.monitor.value;
-  if (
-    !monitor ||
-    !navigator.onLine ||
-    !monitor.url ||
-    !monitor.interactions.length
-  ) {
-    return;
-  }
-  const { completedInteractions, pendingInteractions } = splitInteractions(
-    monitor.interactions,
-  );
-
-  // nothing to flush
-  if (!completedInteractions.length) {
-    return;
-  }
-  // idempotent
-  const session = await getSession({
-    commit: monitor.commit,
-    branch: monitor.branch,
-  }).catch(() => null);
-
-  if (!session) return;
-
-  const aggregatedComponents = aggregateComponents(monitor.interactions);
 
   const payload: IngestRequest = {
-    interactions: toPayloadInteraction(completedInteractions),
+    interactions: aggregatedInteractions,
     components: aggregatedComponents,
     session: {
       ...session,
@@ -117,14 +93,7 @@ export const flush = async (): Promise<void> => {
   };
 
   monitor.pendingRequests++;
-  // remove all completed interactions from batch
-  monitor.interactions = monitor.interactions.filter((interaction) =>
-    completedInteractions.some(
-      (completedInteraction) =>
-        completedInteraction.performanceEntry.id !==
-        interaction.performanceEntry.id,
-    ),
-  );
+  monitor.interactions = pendingInteractions;
   try {
     transport(monitor.url, payload)
       .then(() => {

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

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

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

@@ -22,9 +22,9 @@ export interface Session {
 }
 
 export interface Interaction {
-  id: string; // a hashed unique id for interaction (groupable across sessions)
+  id: string | number; // index of the interaction in the batch at ingest | server converts to a hashed string from route, type, name, path
   path: Array<string>; // the path of the interaction
-  name: string; // name of interaction (i.e nav#top-menu.sc-601d0142-19.gHiJkL) or something useful
+  name: string; // name of interaction
   type: string; // type of interaction i.e pointer
   time: number; // time of interaction in ms
   timestamp: number;
@@ -42,7 +42,7 @@ export interface Interaction {
 }
 
 export interface Component {
-  interactionId: string; // grouping components by interaction
+  interactionId: string | number; // grouping components by interaction
   name: string;
   renders: number; // how many times it re-rendered / instances (normalized)
   instances: number; // instances which will be used to get number of total renders by * by renders

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

@@ -117,6 +117,7 @@ export const getSession = async ({
     agent: navigator.userAgent,
     commit,
     branch,
+    version: process.env.NPM_PACKAGE_VERSION,
   };
   cachedSession = session;
   return session;

packages/scan/tsup.config.ts

@@ -1,21 +1,22 @@
-import fs from 'node:fs/promises';
+import fsPromise from 'node:fs/promises';
+import * as fs from 'node:fs';
 import path from 'node:path';
 import { defineConfig } from 'tsup';
 
 const DIST_PATH = './dist';
 
 const addDirectivesToChunkFiles = async (readPath: string): Promise<void> => {
   try {
-    const files = await fs.readdir(readPath);
+    const files = await fsPromise.readdir(readPath);
     for (const file of files) {
       if (file.endsWith('.mjs') || file.endsWith('.js')) {
         const filePath = path.join(readPath, file);
 
-        const data = await fs.readFile(filePath, 'utf8');
+        const data = await fsPromise.readFile(filePath, 'utf8');
 
         const updatedContent = `'use client';\n${data}`;
 
-        await fs.writeFile(filePath, updatedContent, 'utf8');
+        await fsPromise.writeFile(filePath, updatedContent, 'utf8');
 
         // eslint-disable-next-line no-console
         console.log(`Directive has been added to ${file}`);
@@ -84,6 +85,11 @@ export default defineConfig([
     minify: false,
     env: {
       NODE_ENV: process.env.NODE_ENV ?? 'development',
+      NPM_PACKAGE_VERSION: JSON.parse(fs.readFileSync(
+        path.join(__dirname, '../scan', 'package.json'),
+          'utf8',
+        ),
+      ).version,
     },
     external: [
       'react',