feat(astro): Add tracking of errors during HTML streaming (#15995)

Astro components are rendered in a stream, so if a component that is not
the page fails during a request, this error is not thrown by the `await
next()` call, only when the component is reached in the response stream.

The code was iterating over the response stream assuming it was
infallible, so component errors were being ignored by sentry and hidden
from the user. This PR wraps the iteration on a `try/catch` pair to
report the error and forward it along to the error handling pipeline.

Author: Fryuni

packages/astro/src/server/middleware.ts

@@ -184,12 +184,18 @@ async function instrumentRequest(
 
               const newResponseStream = new ReadableStream({
                 start: async controller => {
-                  for await (const chunk of originalBody) {
-                    const html = typeof chunk === 'string' ? chunk : decoder.decode(chunk, { stream: true });
-                    const modifiedHtml = addMetaTagToHead(html);
-                    controller.enqueue(new TextEncoder().encode(modifiedHtml));
+                  try {
+                    for await (const chunk of originalBody) {
+                      const html = typeof chunk === 'string' ? chunk : decoder.decode(chunk, { stream: true });
+                      const modifiedHtml = addMetaTagToHead(html);
+                      controller.enqueue(new TextEncoder().encode(modifiedHtml));
+                    }
+                  } catch (e) {
+                    sendErrorToSentry(e);
+                    controller.error(e);
+                  } finally {
+                    controller.close();
                   }
-                  controller.close();
                 },
               });
 

packages/astro/test/server/middleware.test.ts

@@ -149,6 +149,49 @@ describe('sentryMiddleware', () => {
     });
   });
 
+  it('throws and sends an error to sentry if response streaming throws', async () => {
+    const captureExceptionSpy = vi.spyOn(SentryNode, 'captureException');
+
+    const middleware = handleRequest();
+    const ctx = {
+      request: {
+        method: 'GET',
+        url: '/users',
+        headers: new Headers(),
+      },
+      url: new URL('https://myDomain.io/users/'),
+      params: {},
+    };
+
+    const error = new Error('Something went wrong');
+
+    const faultyStream = new ReadableStream({
+      pull: controller => {
+        controller.error(error);
+        controller.close();
+      },
+    });
+
+    const next = vi.fn(() =>
+      Promise.resolve(
+        new Response(faultyStream, {
+          headers: new Headers({ 'content-type': 'text/html' }),
+        }),
+      ),
+    );
+
+    // @ts-expect-error, a partial ctx object is fine here
+    const resultFromNext = await middleware(ctx, next);
+
+    expect(resultFromNext?.headers.get('content-type')).toEqual('text/html');
+
+    await expect(() => resultFromNext!.text()).rejects.toThrowError();
+
+    expect(captureExceptionSpy).toHaveBeenCalledWith(error, {
+      mechanism: { handled: false, type: 'astro', data: { function: 'astroMiddleware' } },
+    });
+  });
+
   describe('track client IP address', () => {
     it('attaches client IP if `trackClientIp=true` when handling dynamic page requests', async () => {
       const middleware = handleRequest({ trackClientIp: true });