-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(nextjs): Connect server component transactions if there is no in…
…coming trace (#9845)
- Loading branch information
Showing
8 changed files
with
144 additions
and
3 deletions.
There are no files selected for viewing
12 changes: 12 additions & 0 deletions
12
packages/e2e-tests/test-applications/nextjs-app-dir/app/(nested-layout)/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { PropsWithChildren } from 'react'; | ||
|
||
export const dynamic = 'force-dynamic'; | ||
|
||
export default function Layout({ children }: PropsWithChildren<{}>) { | ||
return ( | ||
<div> | ||
<p>Layout</p> | ||
{children} | ||
</div> | ||
); | ||
} |
12 changes: 12 additions & 0 deletions
12
...s/e2e-tests/test-applications/nextjs-app-dir/app/(nested-layout)/nested-layout/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { PropsWithChildren } from 'react'; | ||
|
||
export const dynamic = 'force-dynamic'; | ||
|
||
export default function Layout({ children }: PropsWithChildren<{}>) { | ||
return ( | ||
<div> | ||
<p>Layout</p> | ||
{children} | ||
</div> | ||
); | ||
} |
11 changes: 11 additions & 0 deletions
11
...ges/e2e-tests/test-applications/nextjs-app-dir/app/(nested-layout)/nested-layout/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
export const dynamic = 'force-dynamic'; | ||
|
||
export default function Page() { | ||
return <p>Hello World!</p>; | ||
} | ||
|
||
export async function generateMetadata() { | ||
return { | ||
title: 'I am generated metadata', | ||
}; | ||
} |
50 changes: 50 additions & 0 deletions
50
.../e2e-tests/test-applications/nextjs-app-dir/tests/connected-servercomponent-trace.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { expect, test } from '@playwright/test'; | ||
import { waitForTransaction } from '../event-proxy-server'; | ||
|
||
test('Will capture a connected trace for all server components and generation functions when visiting a page', async ({ | ||
page, | ||
}) => { | ||
const someConnectedEvent = waitForTransaction('nextjs-13-app-dir', async transactionEvent => { | ||
return ( | ||
transactionEvent?.transaction === 'Layout Server Component (/(nested-layout)/nested-layout)' || | ||
transactionEvent?.transaction === 'Layout Server Component (/(nested-layout))' || | ||
transactionEvent?.transaction === 'Page Server Component (/(nested-layout)/nested-layout)' || | ||
transactionEvent?.transaction === 'Page.generateMetadata (/(nested-layout)/nested-layout)' | ||
); | ||
}); | ||
|
||
const layout1Transaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => { | ||
return ( | ||
transactionEvent?.transaction === 'Layout Server Component (/(nested-layout)/nested-layout)' && | ||
(await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id | ||
); | ||
}); | ||
|
||
const layout2Transaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => { | ||
return ( | ||
transactionEvent?.transaction === 'Layout Server Component (/(nested-layout))' && | ||
(await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id | ||
); | ||
}); | ||
|
||
const pageTransaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => { | ||
return ( | ||
transactionEvent?.transaction === 'Page Server Component (/(nested-layout)/nested-layout)' && | ||
(await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id | ||
); | ||
}); | ||
|
||
const generateMetadataTransaction = waitForTransaction('nextjs-13-app-dir', async transactionEvent => { | ||
return ( | ||
transactionEvent?.transaction === 'Page.generateMetadata (/(nested-layout)/nested-layout)' && | ||
(await someConnectedEvent).contexts?.trace?.trace_id === transactionEvent.contexts?.trace?.trace_id | ||
); | ||
}); | ||
|
||
await page.goto('/nested-layout'); | ||
|
||
expect(await layout1Transaction).toBeDefined(); | ||
expect(await layout2Transaction).toBeDefined(); | ||
expect(await pageTransaction).toBeDefined(); | ||
expect(await generateMetadataTransaction).toBeDefined(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import type { PropagationContext } from '@sentry/types'; | ||
|
||
const commonMap = new WeakMap<object, PropagationContext>(); | ||
|
||
/** | ||
* Takes a shared (garbage collectable) object between resources, e.g. a headers object shared between Next.js server components and returns a common propagation context. | ||
*/ | ||
export function commonObjectToPropagationContext( | ||
commonObject: unknown, | ||
propagationContext: PropagationContext, | ||
): PropagationContext { | ||
if (typeof commonObject === 'object' && commonObject) { | ||
const memoPropagationContext = commonMap.get(commonObject); | ||
if (memoPropagationContext) { | ||
return memoPropagationContext; | ||
} else { | ||
commonMap.set(commonObject, propagationContext); | ||
return propagationContext; | ||
} | ||
} else { | ||
return propagationContext; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters