fix(remix): Update defer injection logic. (#9242)

Author: onurtemizkan

packages/remix/src/utils/instrumentServer.ts

@@ -259,11 +259,11 @@ function makeWrappedRootLoader(remixVersion: number) {
       const traceAndBaggage = getTraceAndBaggage();
 
       if (isDeferredData(res)) {
-        return {
-          ...res.data,
-          ...traceAndBaggage,
-          remixVersion,
-        };
+        res.data['sentryTrace'] = traceAndBaggage.sentryTrace;
+        res.data['sentryBaggage'] = traceAndBaggage.sentryBaggage;
+        res.data['remixVersion'] = remixVersion;
+
+        return res;
       }
 
       if (isResponse(res)) {

packages/remix/test/integration/app_v1/routes/loader-defer-response/$id.tsx

@@ -0,0 +1,2 @@
+export * from '../../../common/routes/loader-defer-response.$id';
+export { default } from '../../../common/routes/loader-defer-response.$id';

packages/remix/test/integration/app_v1/routes/loader-defer-response/index.tsx

@@ -0,0 +1,2 @@
+export * from '../../common/routes/loader-defer-response.$id';
+export { default } from '../../common/routes/loader-defer-response.$id';

packages/remix/test/integration/app_v2/routes/loader-defer-response.$id.tsx

@@ -14,7 +14,7 @@ export default function LoaderJSONResponse() {
 
   return (
     <div>
-      <h1>{data && data.id ? data.id : 'Not Found'}</h1>
+      <h1 id="data-render">{data && data.id ? data.id : 'Not Found'}</h1>
     </div>
   );
 }

packages/remix/test/integration/app_v2/routes/loader-defer-response.tsx

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('should receive correct data from instrumented defer response', async ({ page }) => {
+  await page.goto('/loader-defer-response/98765');
+
+  const renderedId = await page.waitForSelector('#data-render');
+
+  expect(await renderedId?.textContent()).toBe('98765');
+});

packages/remix/test/integration/common/routes/loader-defer-response.tsx renamed to packages/remix/test/integration/common/routes/loader-defer-response.$id.tsx

@@ -201,12 +201,12 @@ describe.each(['builtin', 'express'])('Remix API Loaders with adapter = %s', ada
 
   it('correctly instruments a deferred loader', async () => {
     const env = await RemixTestEnv.init(adapter);
-    const url = `${env.url}/loader-defer-response`;
+    const url = `${env.url}/loader-defer-response/123123`;
     const envelope = await env.getEnvelopeRequest({ url, envelopeType: 'transaction' });
     const transaction = envelope[2];
 
     assertSentryTransaction(transaction, {
-      transaction: useV2 ? 'routes/loader-defer-response' : 'root',
+      transaction: useV2 ? 'routes/loader-defer-response.$id' : 'routes/loader-defer-response/$id',
       transaction_info: {
         source: 'route',
       },
@@ -217,11 +217,11 @@ describe.each(['builtin', 'express'])('Remix API Loaders with adapter = %s', ada
               op: 'function.remix.loader',
             },
             {
-              description: 'routes/loader-defer-response',
+              description: 'routes/loader-defer-response.$id',
               op: 'function.remix.loader',
             },
             {
-              description: 'routes/loader-defer-response',
+              description: 'routes/loader-defer-response.$id',
               op: 'function.remix.document_request',
             },
           ]
@@ -231,11 +231,11 @@ describe.each(['builtin', 'express'])('Remix API Loaders with adapter = %s', ada
               op: 'function.remix.loader',
             },
             {
-              description: 'routes/loader-defer-response/index',
+              description: 'routes/loader-defer-response/$id',
               op: 'function.remix.loader',
             },
             {
-              description: 'root',
+              description: 'routes/loader-defer-response/$id',
               op: 'function.remix.document_request',
             },
           ],