From e20a4073de08931b947a8461db0c8c4eba681ad3 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Sat, 4 Jan 2025 15:57:18 +0530
Subject: [PATCH] feat: monitor web recorder frontend performance

---
 src/components/atoms/canvas.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx
index e71a4d93..24e03bae 100644
--- a/src/components/atoms/canvas.tsx
+++ b/src/components/atoms/canvas.tsx
@@ -7,6 +7,7 @@ import DatePicker from './DatePicker';
 import Dropdown from './Dropdown';
 import TimePicker from './TimePicker';
 import DateTimeLocalPicker from './DateTimeLocalPicker';
+import { FrontendPerformanceMonitor } from '../../../perf/performance';
 
 interface CreateRefCallback {
     (ref: React.RefObject<HTMLCanvasElement>): void;
@@ -28,6 +29,9 @@ export interface Coordinates {
 
 const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
 
+    const performanceMonitor = useRef(new FrontendPerformanceMonitor());
+    console.log('Frontend Performance Report:', performanceMonitor.current.getPerformanceReport());
+    
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const { socket } = useSocketStore();
     const { setLastAction, lastAction } = useGlobalInfoStore();
@@ -111,6 +115,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
     }, [socket]);
 
     const onMouseEvent = useCallback((event: MouseEvent) => {
+        performanceMonitor.current.measureEventLatency(event);
         if (socket && canvasRef.current) {
             // Get the canvas bounding rectangle
             const rect = canvasRef.current.getBoundingClientRect();
@@ -177,6 +182,15 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
         }
     }, [socket]);
 
+    // performance logging
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            const report = performanceMonitor.current.getPerformanceReport();
+            console.log('Frontend Performance Report:', report);
+        }, 5000);
+
+        return () => clearInterval(intervalId);
+    }, []);
 
     useEffect(() => {
         if (canvasRef.current) {