fix: add a hard sequence in SSE and WS requests

packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js

@@ -188,7 +188,7 @@ const WSMessagesList = ({ order = -1, messages = [] }) => {
     <StyledWrapper className="ws-messages-list mt-2 flex flex-col">
       {ordered.map((msg, idx, src) => {
         const inFocus = order === -1 ? src.length - 1 === idx : idx === 0;
-        return <WSMessageItem key={msg.timestamp} inFocus={inFocus} id={idx} message={msg} />;
+        return <WSMessageItem key={msg.seq ? msg.seq : msg.timestamp} inFocus={inFocus} id={idx} message={msg} />;
       })}
     </StyledWrapper>
   );

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -383,18 +383,30 @@ export const collectionsSlice = createSlice({
       }
     },
     requestCancelled: (state, action) => {
-      const { itemUid, collectionUid } = action.payload;
+      const { itemUid, collectionUid, seq, timestamp } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
 
       if (collection) {
         const item = findItemInCollection(collection, itemUid);
         if (item) {
           if (item.response?.stream?.running) {
             item.response.stream.running = null;
+            item.response.data.push({
+              type: 'info',
+              seq: seq,
+              timestamp: timestamp || Date.now(),
+              message: 'Connection Closed'
+            });
 
             const startTimestamp = item.requestSent.timestamp;
             item.response.duration = startTimestamp ? Date.now() - startTimestamp : item.response.duration;
-            item.response.data = [{ type: 'info', timestamp: Date.now(), message: 'Connection Closed' }].concat(item.response.data);
+            if (item.response?.data?.length) {
+              item.response.data.sort((a, b) => {
+                const sa = Number.isFinite(a.seq) ? a.seq : Number.POSITIVE_INFINITY;
+                const sb = Number.isFinite(b.seq) ? b.seq : Number.POSITIVE_INFINITY;
+                return sb - sa;
+              });
+            }
           } else {
             item.response = null;
             item.requestUid = null;
@@ -3118,22 +3130,28 @@ export const collectionsSlice = createSlice({
       }
     },
     streamDataReceived: (state, action) => {
-      const { itemUid, collectionUid, data } = action.payload;
+      const { itemUid, collectionUid, seq, timestamp, data } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
 
       if (collection) {
         const item = findItemInCollection(collection, itemUid);
         if (data.data) {
           item.response.data ||= [];
-          item.response.data = [{
+          const newMessage = {
             type: 'incoming',
+            seq,
             message: data.data,
             messageHexdump: hexdump(data.data),
-            timestamp: Date.now()
-          }].concat(item.response.data);
+            timestamp: timestamp || Date.now()
+          };
+
+          const insertIndex = item.response.data.findIndex((m) => (m.seq ?? Infinity) < seq);
+          if (insertIndex === -1) item.response.data.push(newMessage);
+          else item.response.data.splice(insertIndex, 0, newMessage);
+
+          item.response.dataBuffer = Buffer.concat([Buffer.from(item.response.dataBuffer), Buffer.from(data.dataBuffer)]);
+          item.response.size = data.data?.length + (item.response.size || 0);
         }
-        item.response.dataBuffer = Buffer.concat([Buffer.from(item.response.dataBuffer), Buffer.from(data.dataBuffer)]);
-        item.response.size = data.data?.length + (item.response.size || 0);
       }
     },
     addRequestTag: (state, action) => {
@@ -3225,7 +3243,7 @@ export const collectionsSlice = createSlice({
     wsResponseReceived: (state, action) => {
       const { itemUid, collectionUid, eventType, eventData } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
-
+      let newResponse;
       if (!collection) return;
 
       const item = findItemInCollection(collection, itemUid);
@@ -3246,17 +3264,19 @@ export const collectionsSlice = createSlice({
       switch (eventType) {
         case 'message':
           // Add message to responses list
-          updatedResponse.responses = (currentResponse?.responses || []).concat(eventData);
+          updatedResponse.responses = [eventData].concat(currentResponse?.responses || []);
           break;
 
         case 'redirect':
           updatedResponse.requestHeaders = eventData.headers;
           updatedResponse.responses ||= [];
-          updatedResponse.responses.push({
+          newResponse = {
             message: eventData.message,
             type: eventData.type,
-            timestamp: eventData.timestamp
-          });
+            timestamp: eventData.timestamp,
+            seq: eventData.seq
+          };
+          updatedResponse.responses = [newResponse].concat(updatedResponse.responses || []);
           break;
 
         case 'upgrade':
@@ -3268,11 +3288,13 @@ export const collectionsSlice = createSlice({
           updatedResponse.statusText = 'CONNECTED';
           updatedResponse.statusCode = 0;
           updatedResponse.responses ||= [];
-          updatedResponse.responses.push({
+          newResponse = {
             message: `Connected to ${eventData.url}`,
             type: 'info',
-            timestamp: eventData.timestamp
-          });
+            timestamp: eventData.timestamp,
+            seq: eventData.seq
+          };
+          updatedResponse.responses = [newResponse].concat(updatedResponse.responses || []);
           break;
 
         case 'close':
@@ -3284,11 +3306,13 @@ export const collectionsSlice = createSlice({
           updatedResponse.statusText = wsStatusCodes[code] || 'CLOSED';
           updatedResponse.statusDescription = reason;
 
-          updatedResponse.responses.push({
+          newResponse = {
             type: code !== 1000 ? 'info' : 'error',
             message: reason.trim().length ? ['Closed:', reason.trim()].join(' ') : 'Closed',
-            timestamp
-          });
+            timestamp: eventData.timestamp,
+            seq: eventData.seq
+          };
+          updatedResponse.responses = [newResponse].concat(updatedResponse.responses || []);
           break;
 
         case 'error':
@@ -3299,12 +3323,13 @@ export const collectionsSlice = createSlice({
           updatedResponse.statusCode = wsStatusCodes[1011];
           updatedResponse.statusText = 'ERROR';
 
-          updatedResponse.responses.push({
+          newResponse = {
             type: 'error',
             message: errorDetails || 'WebSocket error occurred',
-            timestamp
-          });
-
+            timestamp: eventData.timestamp,
+            seq: eventData.seq
+          };
+          updatedResponse.responses = [newResponse].concat(updatedResponse.responses || []);
           break;
 
         case 'connecting':

packages/bruno-app/src/utils/network/ws-event-listeners.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { wsResponseReceived, runWsRequestEvent } from 'providers/ReduxStore/slices/collections/index';
 import { useDispatch } from 'react-redux';
 import { isElectron } from 'utils/common/platform';
@@ -8,6 +8,10 @@ const useWsEventListeners = () => {
   const { ipcRenderer } = window;
   const dispatch = useDispatch();
 
+  const seqRef = useRef(0);
+  const nextSeq = () => (++seqRef.current);
+  const resetSeq = () => { seqRef.current = 0; };
+
   useEffect(() => {
     if (!isElectron()) {
       return () => {};
@@ -20,7 +24,7 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         requestUid: requestId,
-        eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
     });
 
@@ -29,7 +33,7 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         eventType: 'upgrade',
-        eventData: eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
     });
 
@@ -38,7 +42,7 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         eventType: 'redirect',
-        eventData: eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
     });
 
@@ -48,7 +52,7 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         eventType: 'message',
-        eventData: eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
     });
 
@@ -58,7 +62,7 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         eventType: 'open',
-        eventData: eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
     });
 
@@ -68,8 +72,9 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         eventType: 'close',
-        eventData: eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
+      resetSeq();
     });
 
     // Handle WebSocket error event
@@ -78,7 +83,7 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         eventType: 'error',
-        eventData: eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
     });
 
@@ -88,7 +93,7 @@ const useWsEventListeners = () => {
         itemUid: requestId,
         collectionUid: collectionUid,
         eventType: 'connecting',
-        eventData: eventData
+        eventData: { ...eventData, seq: nextSeq() }
       }));
     });
 

packages/bruno-electron/src/ipc/network/index.js

@@ -1003,6 +1003,7 @@ const registerNetworkIpc = (mainWindow) => {
 
   // handler for sending http request
   ipcMain.handle('send-http-request', async (event, item, collection, environment, runtimeVariables) => {
+    let seq = 0;
     const collectionUid = collection.uid;
     const envVars = getEnvVars(environment);
     const processEnvVars = getProcessEnvVars(collectionUid);
@@ -1012,16 +1013,29 @@ const registerNetworkIpc = (mainWindow) => {
       response.stream = { running: response.status >= 200 && response.status < 300 };
 
       stream.on('data', (newData) => {
+        seq += 1;
+
         const parsed = parseDataFromResponse({ data: newData, headers: {} });
-        mainWindow.webContents.send('main:http-stream-new-data', { collectionUid, itemUid: item.uid, data: parsed });
+
+        mainWindow.webContents.send('main:http-stream-new-data', {
+          collectionUid,
+          itemUid: item.uid,
+          seq,
+          timestamp: Date.now(),
+          data: parsed
+        });
       });
 
       stream.on('close', () => {
-        if (!cancelTokens[response.cancelTokenUid]) {
-          return;
-        }
+        if (!cancelTokens[response.cancelTokenUid]) return;
+
+        mainWindow.webContents.send('main:http-stream-end', {
+          collectionUid,
+          itemUid: item.uid,
+          seq: seq + 1,
+          timestamp: Date.now()
+        });
 
-        mainWindow.webContents.send('main:http-stream-end', { collectionUid, itemUid: item.uid });
         deleteCancelToken(response.cancelTokenUid);
       });
     }