fix(dev): keep the same line from two requests apart

Author: benjamincanac

packages/nuxt-cli/src/dev/tui/events.ts

@@ -231,9 +231,23 @@ export class DevEventLog {
    * The report is the fullest account of a log, carrying the request it was
    * written for, then the reporter's. Whatever was printed is kept throughout,
    * being what the log view shows.
+   *
+   * Two requests can log the same line at once, so an arrival that knows its
+   * request only joins an entry that could be for the same one. Printed output
+   * is left out of that: it is attributed when the capture is flushed, which
+   * can be on another request's call stack.
    */
   #join(event: DevLogEvent, route: DevLogRoute): DevLogEvent | undefined {
-    return this.#merge(event, candidate => !!candidate.routes && !candidate.routes.has(route), (candidate) => {
+    const sameRequest = (candidate: DevLogEvent) => {
+      if (route === 'output' || (candidate.routes!.size === 1 && candidate.routes!.has('output'))) {
+        return true
+      }
+      if (candidate.requestId !== undefined && event.requestId !== undefined) {
+        return candidate.requestId === event.requestId
+      }
+      return candidate.request === undefined || event.request === undefined || candidate.request === event.request
+    }
+    return this.#merge(event, candidate => !!candidate.routes && !candidate.routes.has(route) && sameRequest(candidate), (candidate) => {
       const routes = candidate.routes!
       const rendered = candidate.rendered ?? event.rendered
       if (route === 'report') {

packages/nuxt-cli/test/unit/dev-tui.spec.ts

@@ -894,6 +894,24 @@ describe('dev event log', () => {
     expect(events.recent(10)[0]!.raw).toBeFalsy()
   })
 
+  it.each([
+    ['reports first', ['report 1', 'report 2', 'reporter 1', 'reporter 2']],
+    ['reporters first', ['reporter 1', 'reporter 2', 'report 1', 'report 2']],
+    ['a reporter with no report of its own', ['report 2', 'reporter 1']],
+  ])('does not join the same line from two requests (%s)', (_name, order) => {
+    const events = new DevEventLog()
+    for (const step of order) {
+      const [route, id] = step.split(' ') as ['report' | 'reporter', string]
+      events.push({ time: Date.now(), level: 3, type: 'log', message: 'same line', raw: route === 'reporter', source: 'runtime', request: 'GET /', requestId: Number(id) }, { route })
+    }
+    const entries = events.recent(10)
+    expect(entries).toHaveLength(2)
+    expect(new Set(entries.map(entry => entry.requestId)).size).toBe(2)
+    for (const entry of entries) {
+      expect(entry.routes!.size).toBe(order.length / 2)
+    }
+  })
+
   it('does not pair printed output with a log nothing reported', () => {
     const events = new DevEventLog()
     events.push({ time: Date.now(), level: 3, type: 'info', message: 'same line', source: 'cli' })