8000 feat(nextjs): Support `instrumentation-client.ts` (#15705) · getsentry/sentry-javascript@67db14b · GitHub
[go: up one dir, main page]
Skip to content

Commit 67db14b

Browse files
lforstlforst
authored
feat(nextjs): Support instrumentation-client.ts (#15705)
1 parent e242c17 commit 67db14b

File tree

11 files changed

+141
-34
lines changed

11 files changed

+141
-34
lines changed

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/app/layout.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
import { HackComponentToRunSideEffectsInSentryClientConfig } from '../sentry.client.config';
2-
31
export default function Layout({ children }: { children: React.ReactNode }) {
42
return (
53
<html lang="en">
6-
<body>
7-
<HackComponentToRunSideEffectsInSentryClientConfig />
8-
{children}
9-
</body>
4+
<body>{children}</body>
105
</html>
116
);
127
}

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/app/pageload-transaction/page.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Page() {
2+
return <p>Hello World!</p>;
3+
}

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/instrumentation-client.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as Sentry from '@sentry/nextjs';
2+
3+
Sentry.init({
4+
environment: 'qa', // dynamic sampling bias to keep transactions
5+
dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
6+
tunnel: `http://localhost:3031/`, // proxy server
7+
tracesSampleRate: 1.0,
8+
sendDefaultPii: true,
9+
});

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@types/node": "^18.19.1",
1818
"@types/react": "18.0.26",
1919
"@types/react-dom": "18.0.9",
20-
"next": "15.0.0",
20+
"next": "15.3.0-canary.8",
2121
"react": "rc",
2222
"react-dom": "rc",
2323
"typescript": "~5.0.0"

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/pages/_app.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { AppProps } from 'next/app';
2-
import '../sentry.client.config';
32

43
export default function CustomApp({ Component, pageProps }: AppProps) {
54
return <Component {...pageProps} />;

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/sentry.client.config.ts

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/tests/app-router/pageload-transaction.test.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { expect, test } from '@playwright/test';
2+
import { waitForTransaction } from '@sentry-internal/test-utils';
3+
import { parseSemver } from '@sentry/core';
4+
5+
const packageJson = require('../../package.json');
6+
const nextjsVersion = packageJson.dependencies.next;
7+
const { major, minor } = parseSemver(nextjsVersion);
8+
9+
test('Should record pageload transactions (this test verifies that the client SDK is initialized)', async ({
10+
page,
11+
}) => {
12+
// TODO: Remove this skippage when Next.js 15.3.0 is released and bump version in package json to 15.3.0
13+
test.skip(
14+
major === 15 && minor !== undefined && minor < 3,
15+
'Next.js version does not support clientside instrumentation',
16+
);
17+
18+
const pageloadTransactionPromise = waitForTransaction('nextjs-turbo', async transactionEvent => {
19+
return transactionEvent?.transaction === '/pageload-transaction';
20+
});
21+
22+
await page.goto(`/pageload-transaction`);
23+
24+
const pageloadTransaction = await pageloadTransactionPromise;
25+
26+
expect(pageloadTransaction).toBeDefined();
27+
});

‎dev-packages/e2e-tests/test-applications/nextjs-turbo/tests/pages-router/client-trace-propagation.test.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import { expect, test } from '@playwright/test';
22
import { waitForTransaction } from '@sentry-internal/test-utils';
3+
import { parseSemver } from '@sentry/core';
4+
5+
const packageJson = require('../../package.json');
6+
const nextjsVersion = packageJson.dependencies.next;
7+
const { major, minor } = parseSemver(nextjsVersion);
38

49
test('Should propagate traces from server to client in pages router', async ({ page }) => {
10+
// TODO: Remove this skippage when Next.js 15.3.0 is released and bump version in package json to 15.3.0
11+
test.skip(
12+
major === 15 && minor !== undefined && minor < 3,
13+
'Next.js version does not support clientside instrumentation',
14+
);
15+
516
const serverTransactionPromise = waitForTransaction('nextjs-turbo', async transactionEvent => {
617
return transactionEvent?.transaction === 'GET /[param]/pages-router-client-trace-propagation';
718
});

‎packages/nextjs/src/config/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export type NextConfigObject = {
4444
// Next.js experimental options
4545
experimental?: {
4646
instrumentationHook?: boolean;
47+
clientInstrumentationHook?: boolean;
4748
clientTraceMetadata?: string[];
4849
};
4950
productionBrowserSourceMaps?: boolean;

‎packages/nextjs/src/config/webpack.ts

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,14 @@ export function constructWebpackConfigFunction(
339339
// be fixed by using `bind`, but this is way simpler.)
340340
const origEntryProperty = newConfig.entry;
341341
newConfig.entry = async () => addSentryToClientEntryProperty(origEntryProperty, buildContext);
342+
343+
const clientSentryConfigFileName = getClientSentryConfigFile(projectDir);
344+
if (clientSentryConfigFileName) {
345+
// eslint-disable-next-line no-console
346+
console.warn(
347+
`[@sentry/nextjs] DEPRECATION WARNING: It is recommended renaming your \`${clientSentryConfigFileName}\` file, or moving its content to \`instrumentation-client.ts\`. When using Turbopack \`${clientSentryConfigFileName}\` will no longer work. Read more about the \`instrumentation-client.ts\` file: https://nextjs.org/docs/app/api-reference/config/next-config-js/clientInstrumentationHook`,
348+
);
349+
}
342350
}
343351

344352
// We don't want to do any webpack plugin stuff OR any source maps stuff in dev mode.
@@ -430,9 +438,17 @@ async function addSentryToClientEntryProperty(
430438
typeof currentEntryProperty === 'function' ? await currentEntryProperty() : { ...currentEntryProperty };
431439

432440
const clientSentryConfigFileName = getClientSentryConfigFile(projectDir);
441+
const instrumentationClientFileName = getInstrumentationClientFile(projectDir);
433442

434-
// we need to turn the filename into a path so webpack can find it
435-
const filesToInject = clientSentryConfigFileName ? [`./${clientSentryConfigFileName}`] : [];
443+
const filesToInject = [];
444+
if (clientSentryConfigFileName) {
445+
// we need to turn the filename into a path so webpack can find it
446+
filesToInject.push(`./${clientSentryConfigFileName}`);
447+
}
448+
if (instrumentationClientFileName) {
449+
// we need to turn the filename into a path so webpack can find it
450+
filesToInject.push(`./${instrumentationClientFileName}`);
451+
}
436452

437453
// inject into all entry points which might contain user's code
438454
for (const entryPointName in newEntryProperty) {
@@ -530,7 +546,7 @@ function warnAboutDeprecatedConfigFiles(
530546
*
531547
* @param projectDir The root directory of the project, where config files would be located
532548
*/
533-
export function getClientSentryConfigFile(projectDir: string): string | void {
549+
function getClientSentryConfigFile(projectDir: string): string | void {
534550
const possibilities = ['sentry.client.config.ts', 'sentry.client.config.js'];
535551

536552
for (const filename of possibilities) {
@@ -540,6 +556,26 @@ export function getClientSentryConfigFile(projectDir: string): string | void {
540556
}
541557
}
542558

559+
/**
560+
* Searches for a `instrumentation-client.ts|js` file and returns its file name if it finds one. (ts being prioritized)
561+
*
562+
* @param projectDir The root directory of the project, where config files would be located
563+
*/
564+
function getInstrumentationClientFile(projectDir: string): string | void {
565+
const possibilities = [
566+
['src', 'instrumentation-client.js'],
567+
['src', 'instrumentation-client.ts'],
568+
['instrumentation-client.js'],
569+
['instrumentation-client.ts'],
570+
];
571+
572+
for (const pathParts of possibilities) {
573+
if (fs.existsSync(path.resolve(projectDir, ...pathParts))) {
574+
return path.join(...pathParts);
575+
}
576+
}
577+
}
578+
543579
/**
544580
* Add files to a specific element of the given `entry` webpack config property.
545581
*

‎packages/nextjs/src/config/withSentryConfig.ts

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,57 @@ function getFinalConfigObject(
153153
}
154154
}
155155

156-
if (process.env.TURBOPACK && !process.env.SENTRY_SUPPRESS_TURBOPACK_WARNING) {
156+
if (nextJsVersion) {
157+
const { major, minor, patch, prerelease } = parseSemver(nextJsVersion);
158+
const isSupportedVersion =
159+
major !== undefined &&
160+
minor !== undefined &&
161+
patch !== undefined &&
162+
(major > 15 ||
163+
(major === 15 && minor > 3) ||
164+
(major === 15 && minor === 3 && patch > 0 && prerelease === undefined));
165+
const isSupportedCanary =
166+
major !== undefined &&
167+
minor !== undefined &&
168+
patch !== undefined &&
169+
prerelease !== undefined &&
170+
major === 15 &&
171+
minor === 3 &&
172+
patch === 0 &&
173+
prerelease.startsWith('canary.') &&
174+
parseInt(prerelease.split('.')[1] || '', 10) >= 8;
175+
const supportsClientInstrumentation = isSupportedCanary || isSupportedVersion;
176+
177+
if (supportsClientInstrumentation) {
178+
incomingUserNextConfigObject.experimental = {
179+
clientInstrumentationHook: true,
180+
...incomingUserNextConfigObject.experimental,
181+
};
182+
} else if (process.env.TURBOPACK) {
183+
if (process.env.NODE_ENV === 'development') {
184+
// eslint-disable-next-line no-console
185+
console.warn(
186+
`[@sentry/nextjs] WARNING: You are using the Sentry SDK with Turbopack (\`next dev --turbo\`). The Sentry SDK is compatible with Turbopack on Next.js version 15.3.0 or later. You are currently on ${nextJsVersion}. Please upgrade to a newer Next.js version to use the Sentry SDK with Turbopack. Note that the SDK will continue to work for non-Turbopack production builds. This warning is only about dev-mode.`,
187+
);
188+
} else if (process.env.NODE_ENV === 'production') {
189+
// eslint-disable-next-line no-console
190+
console.warn(
191+
`[@sentry/nextjs] WARNING: You are using the Sentry SDK with Turbopack (\`next build --turbo\`). The Sentry SDK is compatible with Turbopack on Next.js version 15.3.0 or later. You are currently on ${nextJsVersion C1F7 }. Please upgrade to a newer Next.js version to use the Sentry SDK with Turbopack. Note that as Turbopack is still experimental for production builds, some of the Sentry SDK features like source maps will not work. Follow this issue for progress on Sentry + Turbopack: https://github.com/getsentry/sentry-javascript/issues/8105.`,
192+
);
193+
}
194+
}
195+
} else {
196+
// If we cannot detect a Next.js version for whatever reason, the sensible default is still to set the `experimental.instrumentationHook`.
197+
incomingUserNextConfigObject.experimental = {
198+
clientInstrumentationHook: true,
199+
...incomingUserNextConfigObject.experimental,
200+
};
201+
}
202+
203+
if (incomingUserNextConfigObject.experimental?.clientInstrumentationHook === false) {
157204
// eslint-disable-next-line no-console
158205
console.warn(
159-
`[@sentry/nextjs] WARNING: You are using the Sentry SDK with \`next ${
160-
process.env.NODE_ENV === 'development' ? 'dev' : 'build'
161-
} --turbo\`. The Sentry SDK doesn't yet fully support Turbopack. The SDK will not be loaded in the browser, and serverside instrumentation will be inaccurate or incomplete. ${
162-
process.env.NODE_ENV === 'development' ? 'Production builds without `--turbo` will still fully work. ' : ''
163-
}If you are just trying out Sentry or attempting to configure the SDK, we recommend temporarily removing the \`--turbo\` flag while you are developing locally. Follow this issue for progress on Sentry + Turbopack: https://github.com/getsentry/sentry-javascript/issues/8105. (You can suppress this warning by setting SENTRY_SUPPRESS_TURBOPACK_WARNING=1 as environment variable)`,
206+
'[@sentry/nextjs] WARNING: You set the `experimental.clientInstrumentationHook` option to `false`. Note that Sentry will not be initialized if you did not set it up inside `instrumentation-client.(js|ts)`.',
164207
);
165208
}
166209

0 commit comments

Comments
 (0)
0