fix(nextjs): Flush servercomponent events for edge (#9487)

Author: Luca Forstner

packages/e2e-tests/test-applications/nextjs-app-dir/app/edge-server-components/error/page.tsx

@@ -0,0 +1,7 @@
+export const dynamic = 'force-dynamic';
+
+export const runtime = 'edge';
+
+export default async function Page() {
+  throw new Error('Edge Server Component Error');
+}

packages/e2e-tests/test-applications/nextjs-app-dir/tests/edge.test.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+import { waitForError } from '../event-proxy-server';
+
+test('Should record exceptions for faulty edge server components', async ({ page }) => {
+  const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
+    return errorEvent?.exception?.values?.[0]?.value === 'Edge Server Component Error';
+  });
+
+  await page.goto('/edge-server-components/error');
+
+  expect(await errorEventPromise).toBeDefined();
+});

packages/nextjs/src/common/wrapServerComponentWithSentry.ts

@@ -1,6 +1,7 @@
 import {
   addTracingExtensions,
   captureException,
+  flush,
   getCurrentHub,
   runWithAsyncContext,
   startTransaction,
@@ -81,6 +82,7 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
           maybePromiseResult = originalFunction.apply(thisArg, args);
         } catch (e) {
           handleErrorCase(e);
+          void flush();
           throw e;
         }
 
@@ -94,12 +96,14 @@ export function wrapServerComponentWithSentry<F extends (...args: any[]) => any>
               handleErrorCase(e);
             },
           );
+          void flush();
 
           // It is very important that we return the original promise here, because Next.js attaches various properties
           // to that promise and will throw if they are not on the returned value.
           return maybePromiseResult;
         } else {
           transaction.finish();
+          void flush();
           return maybePromiseResult;
         }
       });