diff --git a/ui-common/src/components/TrafficViewer/EntriesList.tsx b/ui-common/src/components/TrafficViewer/EntriesList.tsx
index 81c7b6b07..e34f8e195 100644
--- a/ui-common/src/components/TrafficViewer/EntriesList.tsx
+++ b/ui-common/src/components/TrafficViewer/EntriesList.tsx
@@ -105,7 +105,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
     const scrollbarVisible = scrollableRef.current?.childWrapperRef.current.clientHeight > scrollableRef.current?.wrapperRef.current.clientHeight;
 
   if (ws.current) {
-    ws.current.onmessage = (e) => {
+    ws.current.addEventListener("message", (e) => {
       if (!e?.data) return;
       const message = JSON.parse(e.data);
       switch (message.messageType) {
@@ -124,7 +124,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBro
           setQueriedTotal(message.data.total);
           break;
       };
-    }
+    });
   }
 
     return <React.Fragment>
diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
index 9fbbbab5c..deb4c1d89 100644
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@@ -175,7 +175,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
   }
 
   if (ws.current) {
-    ws.current.onmessage = (e) => {
+    ws.current.addEventListener("message", (e) => {
       if (!e?.data) return;
       const message = JSON.parse(e.data);
       switch (message.messageType) {
@@ -209,7 +209,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
           setStartTime(message.data);
           break;
       }
-    };
+    })
   }
 
   useEffect(() => {