feat(scan): replay collection runtime

collect detailed browser timing on interaction

implement react scan rrweb replayer plugin

refactor monitoring interaction and component collection

Author: RobPruzan

packages/scan/package.json

@@ -1,8 +1,14 @@
 {
   "name": "react-scan",
-  "version": "0.0.54",
+  "version": "0.0.1083",
   "description": "Scan your React app for renders",
-  "keywords": ["react", "react-scan", "react scan", "render", "performance"],
+  "keywords": [
+    "react",
+    "react-scan",
+    "react scan",
+    "render",
+    "performance"
+  ],
   "homepage": "https://react-scan.million.dev",
   "bugs": {
     "url": "https://github.com/aidenybai/react-scan/issues"
@@ -161,17 +167,27 @@
   "types": "dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "monitoring": ["./dist/core/monitor/index.d.ts"],
-      "monitoring/next": ["./dist/core/monitor/params/next.d.ts"],
+      "monitoring": [
+        "./dist/core/monitor/index.d.ts"
+      ],
+      "monitoring/next": [
+        "./dist/core/monitor/params/next.d.ts"
+      ],
       "monitoring/react-router-legacy": [
         "./dist/core/monitor/params/react-router-v5.d.ts"
       ],
       "monitoring/react-router": [
         "./dist/core/monitor/params/react-router-v6.d.ts"
       ],
-      "monitoring/remix": ["./dist/core/monitor/params/remix.d.ts"],
-      "monitoring/astro": ["./dist/core/monitor/params/astro/index.ts"],
-      "react-component-name/vite": ["./dist/react-component-name/vite.d.ts"],
+      "monitoring/remix": [
+        "./dist/core/monitor/params/remix.d.ts"
+      ],
+      "monitoring/astro": [
+        "./dist/core/monitor/params/astro/index.ts"
+      ],
+      "react-component-name/vite": [
+        "./dist/react-component-name/vite.d.ts"
+      ],
       "react-component-name/webpack": [
         "./dist/react-component-name/webpack.d.ts"
       ],
@@ -187,11 +203,20 @@
       "react-component-name/rollup": [
         "./dist/react-component-name/rollup.d.ts"
       ],
-      "react-component-name/astro": ["./dist/react-component-name/astro.d.ts"]
+      "react-component-name/astro": [
+        "./dist/react-component-name/astro.d.ts"
+      ]
     }
   },
   "bin": "bin/cli.js",
-  "files": ["dist", "bin", "package.json", "README.md", "LICENSE", "auto.d.ts"],
+  "files": [
+    "dist",
+    "bin",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "auto.d.ts"
+  ],
   "scripts": {
     "build": "npm run build:css && NODE_ENV=production tsup",
     "postbuild": "pnpm copy-astro && node ../../scripts/version-warning.mjs",
@@ -217,6 +242,7 @@
     "@clack/prompts": "^0.8.2",
     "@preact/signals": "^1.3.1",
     "@rollup/pluginutils": "^5.1.3",
+    "@rrweb/types": "2.0.0-alpha.18",
     "@types/node": "^20.17.9",
     "bippy": "^0.0.25",
     "esbuild": "^0.24.0",
@@ -225,6 +251,8 @@
     "mri": "^1.2.0",
     "playwright": "^1.49.0",
     "preact": "^10.25.1",
+    "rrweb": "2.0.0-alpha.4",
+    "rrweb-snapshot": "2.0.0-alpha.4",
     "tsx": "^4.0.0"
   },
   "devDependencies": {

packages/scan/src/auto-monitor.ts

@@ -1,7 +1,7 @@
 import 'bippy'; // implicit init RDT hook
 import { Store } from 'src';
 import { scanMonitoring } from 'src/core/monitor';
-import { initPerformanceMonitoring } from 'src/core/monitor/performance';
+// import { initPerformanceMonitoring } from 'src/core/monitor/performance';
 import { Device } from 'src/core/monitor/types';
 
 if (typeof window !== 'undefined') {
@@ -28,9 +28,10 @@ if (typeof window !== 'undefined') {
     route: '<mock-route>',
     commit: '<mock-commit>',
     branch: '<mock-branch>',
+    interactionListeningForRenders: null,
   };
-  scanMonitoring({
-    enabled: true,
-  });
-  initPerformanceMonitoring();
+  // scanMonitoring({
+  //   enabled: true,
+  // });
+  // initPerformanceMonitoring();
 }

packages/scan/src/auto.ts

@@ -2,7 +2,9 @@ import 'bippy'; // implicit init RDT hook
 import { scan } from './index';
 
 if (typeof window !== 'undefined') {
-  scan();
+  scan({
+    dangerouslyForceRunInProduction: true,
+  });
   window.reactScan = scan;
 }
 

packages/scan/src/core/index.ts

@@ -172,6 +172,9 @@ export type MonitoringOptions = Pick<
 interface Monitor {
   pendingRequests: number;
   interactions: Array<InternalInteraction>;
+  interactionListeningForRenders:
+    | ((fiber: Fiber, renders: Array<Render>) => void)
+    | null;
   session: ReturnType<typeof getSession>;
   url: string | null;
   route: string | null;
@@ -381,12 +384,14 @@ export const reportRender = (fiber: Fiber, renders: Array<Render>) => {
 
   // Get data from both current and alternate fibers
   const currentData = Store.reportData.get(reportFiber);
-  const alternateData = fiber.alternate ? Store.reportData.get(fiber.alternate) : null;
+  const alternateData = fiber.alternate
+    ? Store.reportData.get(fiber.alternate)
+    : null;
 
   // More efficient null checks and Math.max
   const existingCount = Math.max(
     (currentData && currentData.count) || 0,
-    (alternateData && alternateData.count) || 0
+    (alternateData && alternateData.count) || 0,
   );
 
   // Create single shared object for both fibers
@@ -395,7 +400,7 @@ export const reportRender = (fiber: Fiber, renders: Array<Render>) => {
     time: selfTime || 0,
     renders,
     displayName,
-    type: getType(fiber.type) || null
+    type: getType(fiber.type) || null,
   };
 
   // Store in both fibers
@@ -461,7 +466,12 @@ const updateScheduledOutlines = (fiber: Fiber, renders: Array<Render>) => {
   for (let i = 0, len = renders.length; i < len; i++) {
     const render = renders[i];
     const domFiber = getNearestHostFiber(fiber);
-    if (!domFiber || !domFiber.stateNode || !(domFiber.stateNode instanceof Element)) continue;
+    if (
+      !domFiber ||
+      !domFiber.stateNode ||
+      !(domFiber.stateNode instanceof Element)
+    )
+      continue;
 
     if (ReactScanInternals.scheduledOutlines.has(fiber)) {
       const existingOutline = ReactScanInternals.scheduledOutlines.get(fiber)!;
@@ -512,6 +522,10 @@ export const getIsProduction = () => {
   return isProduction;
 };
 
+export const attachReplayCanvas = () => {
+  startFlushOutlineInterval();
+};
+
 export const start = () => {
   if (typeof window === 'undefined') return;
 
@@ -540,6 +554,13 @@ export const start = () => {
 
   const instrumentation = createInstrumentation('devtools', {
     onActive() {
+      const rdtHook = getRDTHook();
+      for (const renderer of rdtHook.renderers.values()) {
+        const buildType = detectReactBuildType(renderer);
+        if (buildType === 'production') {
+          isProduction = true;
+        }
+      }
       const existingRoot = document.querySelector('react-scan-root');
       if (existingRoot) {
         return;
@@ -556,7 +577,9 @@ export const start = () => {
         void audioContext.resume();
       };
 
-      window.addEventListener('pointerdown', createAudioContextOnInteraction, { once: true });
+      window.addEventListener('pointerdown', createAudioContextOnInteraction, {
+        once: true,
+      });
 
       const container = document.createElement('div');
       container.id = 'react-scan-root';

packages/scan/src/core/instrumentation.ts

@@ -23,15 +23,42 @@ let lastTime = performance.now();
 let frameCount = 0;
 let initedFps = false;
 
-const updateFPS = () => {
+let fpsListeners: Array<(fps: number) => void> = [];
+
+export const listenToFps = (listener: (fps: number) => void) => {
+  // console.log('oushed', listener);
+
+  fpsListeners.push(listener);
+
+  return () => {
+    // console.log('unsub listener');
+
+    fpsListeners = fpsListeners.filter(
+      (currListener) => currListener !== listener,
+    );
+  };
+};
+
+const updateFPS = (onChange?: (fps: number) => void) => {
   frameCount++;
   const now = performance.now();
-  if (now - lastTime >= 1000) {
-    fps = frameCount;
+  const timeSinceLastUpdate = now - lastTime;
+
+  if (timeSinceLastUpdate >= 500) {
+    const calculatedFPS = Math.round((frameCount / timeSinceLastUpdate) * 1000);
+
+    if (calculatedFPS !== fps) {
+      for (const listener of fpsListeners) {
+        listener(calculatedFPS);
+      }
+    }
+
+    fps = calculatedFPS;
     frameCount = 0;
     lastTime = now;
   }
-  requestAnimationFrame(updateFPS);
+
+  requestAnimationFrame(() => updateFPS(onChange));
 };
 
 export const getFPS = () => {
@@ -361,30 +388,30 @@ export const createInstrumentation = (
 
         const changes: Array<RenderChange> = [];
 
-        const propsChanges = getChangedPropsDetailed(fiber).map(change => ({
+        const propsChanges = getChangedPropsDetailed(fiber).map((change) => ({
           type: 'props' as const,
           name: change.name,
           value: change.value,
           prevValue: change.prevValue,
-          unstable: false
+          unstable: false,
         }));
 
-        const stateChanges = getStateChanges(fiber).map(change => ({
+        const stateChanges = getStateChanges(fiber).map((change) => ({
           type: 'state' as const,
           name: change.name,
           value: change.value,
           prevValue: change.prevValue,
           count: change.count,
-          unstable: false
+          unstable: false,
         }));
 
-        const contextChanges = getContextChanges(fiber).map(change => ({
+        const contextChanges = getContextChanges(fiber).map((change) => ({
           type: 'context' as const,
           name: change.name,
           value: change.value,
           prevValue: change.prevValue,
           count: change.count,
-          unstable: false
+          unstable: false,
         }));
 
         changes.push(...propsChanges, ...stateChanges, ...contextChanges);