[BUG] Cancelling a response body stream returned from handleRequest results in an uncaught exception

[lucacasonato]

Describe the bug

When a platform plugin calls handleRequest, Hydrogen returns a Response object. This response object has a readable stream property (resp.body). If this stream is cancelled, for example because the user has preemptively hung up the connection, Hydrogen will crash the process with an uncaught promise rejection error.

    const resp = await handleRequest(request, {
      indexTemplate,
      context: { waitUntil, ...context },
      cache,
    });
    const reader = resp!.body!.getReader();
    reader.cancel("cancelled");

    // an uncaught rejection is raised here

To Reproduce

I was going to write you an integration test to demonstrate the issue, but I realized you don't have integration tests for handleRequest. As such, I don't know how to best write a reproduction for you here.

If there is a file with handleRequest tests that I can modify, please point me at it.

Expected behaviour

I expect the process to not crash with an uncaught rejection.

Root cause

I have not thoroughly investigated, but I am about 90% confident you are incorrectly using a WritableStream somewhere in Hydrogen (this is where this class of errors most often comes from). What is likely happening is that you are creating a TransformStream, and picking off the readable and writable end of this stream, passing the readable end as the new Response body. You are then calling writable.getWriter(), and are then calling writer.write() without handling the promise returned from writer.write(). You need to handle promise rejections here! Because you are not doing this, there is now a floating promise that upon rejection takes down the entire process. A cursory grep of the repo suggests that the culprits may be one or all of these writes:

• https://github.com/Shopify/hydrogen/blob/550dac284947f0904c6e6f9e945895fe90f837bd/packages/hydrogen/src/entry-server.tsx#L461
• https://github.com/Shopify/hydrogen/blob/550dac284947f0904c6e6f9e945895fe90f837bd/packages/hydrogen/src/entry-server.tsx#L508
• https://github.com/Shopify/hydrogen/blob/550dac284947f0904c6e6f9e945895fe90f837bd/packages/hydrogen/src/entry-server.tsx#L513
• https://github.com/Shopify/hydrogen/blob/550dac284947f0904c6e6f9e945895fe90f837bd/packages/hydrogen/src/entry-server.tsx#L541
• https://github.com/Shopify/hydrogen/blob/550dac284947f0904c6e6f9e945895fe90f837bd/packages/hydrogen/src/entry-server.tsx#L553
• https://github.com/Shopify/hydrogen/blob/550dac284947f0904c6e6f9e945895fe90f837bd/packages/hydrogen/src/entry-server.tsx#L560

I suggest you either await these writes, or add catch handlers to their returned promises.

[lucacasonato]

You can observe this behaviour by running this code:

const { readable, writable } = new TransformStream();

const reader = readable.getReader();
reader.cancel("cancelled");

const writer = writable.getWriter();
writer.write("a");

vs this code:

const { readable, writable } = new TransformStream();

const reader = readable.getReader();
reader.cancel("cancelled");

const writer = writable.getWriter();
writer.write("a").catch(() => {});

[blittle]

Hi @lucacasonato, thank you for reporting this. We are in the process of migrating Hydrogen to use Remix under the hood. This problem should go away with the new release.