From 13a391b3e802d38cce6f9b6b7f5de92521a21b4e Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 20 Feb 2025 10:50:52 +0100
Subject: [PATCH] fix: keep ordering

---
 packages/trace-viewer/src/ui/consoleTab.tsx   | 34 +++++++++++--------
 .../ui-mode-test-output.spec.ts               |  2 ++
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/trace-viewer/src/ui/consoleTab.tsx b/packages/trace-viewer/src/ui/consoleTab.tsx
index ff4e9c37fd..077fc9768a 100644
--- a/packages/trace-viewer/src/ui/consoleTab.tsx
+++ b/packages/trace-viewer/src/ui/consoleTab.tsx
@@ -68,7 +68,12 @@ export function useConsoleTabModel(model: modelUtil.MultiTraceModel | undefined,
       else
         entries.push({ ...entry, repeat: 1 });
     }
-    for (const event of model.events) {
+    const logEvents = [...model.events, ...model.stdio].sort((a, b) => {
+      const aTimestamp = 'time' in a ? a.time : a.timestamp;
+      const bTimestamp = 'time' in b ? b.time : b.timestamp;
+      return aTimestamp - bTimestamp;
+    })
+    for (const event of logEvents) {
       if (event.type === 'console') {
         const body = event.args && event.args.length ? format(event.args) : formatAnsi(event.text);
         const url = event.location.url;
@@ -94,22 +99,21 @@ export function useConsoleTabModel(model: modelUtil.MultiTraceModel | undefined,
           timestamp: event.time,
         });
       }
-    }
-    for (const event of model.stdio) {
-      let html = '';
-      if (event.text)
-        html = ansi2html(event.text.trim()) || '';
-      if (event.base64)
-        html = ansi2html(atob(event.base64).trim()) || '';
+      if (event.type === 'stderr' || event.type === 'stdout') {
+        let html = '';
+        if (event.text)
+          html = ansi2html(event.text.trim()) || '';
+        if (event.base64)
+          html = ansi2html(atob(event.base64).trim()) || '';
 
-      addEntry({
-        nodeMessage: { html },
-        isError: event.type === 'stderr',
-        isWarning: false,
-        timestamp: event.timestamp,
-      });
+        addEntry({
+          nodeMessage: { html },
+          isError: event.type === 'stderr',
+          isWarning: false,
+          timestamp: event.timestamp,
+        });
+      }
     }
-    entries.sort((a, b) => a.timestamp - b.timestamp);
     return { entries };
   }, [model]);
 
diff --git a/tests/playwright-test/ui-mode-test-output.spec.ts b/tests/playwright-test/ui-mode-test-output.spec.ts
index c62a952436..ccec39df74 100644
--- a/tests/playwright-test/ui-mode-test-output.spec.ts
+++ b/tests/playwright-test/ui-mode-test-output.spec.ts
@@ -120,6 +120,7 @@ test('should collapse repeated console messages for test', async ({ runUITest })
       import { test, expect } from '@playwright/test';
       test('print', async ({ page }) => {
         await page.evaluate(() => {
+          console.log('page message')
           for (let i = 0; i < 10; ++i)
             console.log('page message')
         });
@@ -146,6 +147,7 @@ test('should collapse repeated console messages for test', async ({ runUITest })
   await expect(page.getByRole('tabpanel', { name: 'Console' })).toMatchAriaSnapshot(`
     - tabpanel "Console":
       - list:
+        - listitem: /page message/
         - listitem: /10 page message/
         - listitem: /10 node message/
         - listitem: /10 page message/