Logger middleware breaks Remix defer and SSE?

[rphlmr]

👋 Hello there.

I am facing a weird bug with the logger middleware and Remix.

https://github.com/honojs/hono/blob/3b71dc647fb5ed2d648f0df1276d36ce4f3a58eb/src/middleware/logger/index.ts#L68C47-L68C59

c.res.status is making a defer response synchronous. (everything that use c.res actually).
I can't reproduce it in a unit test (with Hono renderToReadableStream and Suspense).

It seems to be React related. What is your guidance to submit a fix that I can't prove? 😅

[DonKoko]

I can confirm I am having the same issue in my project using remix.

[yusukebe]

Hi. Is this a Remix-specific matter?

@sergiodxa Do you know anything about this?

[rphlmr]

This is what happen:

// 1️⃣ console.log("log response from Remix requestHandler", response);
requestHandler _Response [Response] {
  [Symbol(cache)]: [
    200,
    ReadableStream { locked: false, state: 'readable', supportsBYOB: false },
    { 'content-type': 'text/html' }
  ]
}

// 2️⃣ console.log("read status", response.status);
200

// 3️⃣ console.log("log response after reading status", response);
_Response [Response] {
  [Symbol(responseCache)]: _Response [Response] {
    [Symbol(realm)]: { settingsObject: {} },
    [Symbol(state)]: {
      aborted: false,
      rangeRequested: false,
      timingAllowPassed: false,
      requestIncludesCredentials: false,
      type: 'default',
      status: 200,
      timingInfo: null,
      cacheState: '',
      statusText: '',
      headersList: [_HeadersList],
      urlList: [],
      body: [Object]
    },
    [Symbol(headers)]: _HeadersList {
      cookies: null,
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}

Looks like the ReadableStream is consumed when response.status (nb: node env)

[yusukebe]

@rphlmr

Thanks for the explanation!

@usualoma

I haven't fully tested it yet, but I wonder if it's because the application is using Node.js Adapter?

[usualoma]

Yes, it could be a node-server issue, but I don't know. As far as I tried in unit tests, I couldn't confirm the problem even with readableStream.

I don't know how defer() works in remix, but if 'Transfer-Encoding': 'chunked' is not set, I think the browser will not accept. But then, it would have nothing to do with logger() in the first place.

requestHandler _Response [Response] {
  [Symbol(cache)]: [
    200, [Symbol(cache)]: [
    ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
    { 'content-type': 'text/html' }
  ]
}

A simple project that could reproduce the problem might confirm it.

[rphlmr]

Thanks for your support!

I hope the instructions are clear enough
https://github.com/rphlmr/remix-hono-response

[rphlmr]

The Response returned by createRequestHandler follows the web fetch API: https://github.com/remix-run/remix/blob/5ba02f0b05c19632ce570d75f4c69ee801be8590/packages/remix-server-runtime/server.ts#L74

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

[rphlmr]

Oh, adding response.headers.set("Transfer-Encoding", "chunked"); seems to resolves the issue.
Will confirm asap 🥹

[rphlmr]

So I confirm. Will follow your issue. Thanks a lot!

[usualoma]

@rphlmr Thank you! I understand the situation. This is an hono/node-server issue.
honojs/node-server#144

If c.res.status was not called, writeFromReadableStream() would have been used, but if called, it would have been written out after being buffered into arrayBuffer(). This is why it was not streaming anymore.

We will begin to fix the problem.

[usualoma]

@rphlmr
Please try v1.8.0!
https://github.com/honojs/node-server/releases/tag/v1.8.0

[rphlmr]

Thank you so much @usualoma @yusukebe, works perfectly!