Skip to content

feat(onboarding): Update Next.js onboarding for SDK v11 #123911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
chargome wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat(onboarding): Update Next.js onboarding for SDK v11 #123911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 30 additions & 26 deletions static/app/gettingStartedDocs/javascript-nextjs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const docs: Docs = {
{
type: 'text',
text: tct(
'In Next.js you can configure document response headers via the headers option in [code:next.config.js]:',
'In Next.js you can configure document response headers via the headers option in [code:next.config.(js|mjs|ts)]. Import [code:withSentryConfig] from [code:@sentry/nextjs/config]:',
{
code: <code />,
}
Expand All @@ -42,38 +42,42 @@ export const docs: Docs = {
{
label: 'ESM',
language: 'javascript',
filename: 'next.config.js',
filename: 'next.config.mjs',
code: `
export default withSentryConfig({
async headers() {
return [{
source: "/:path*",
headers: [{
key: "Document-Policy",
value: "js-profiling",
}],
}];
},
// ... other Next.js config options
});`,
import { withSentryConfig } from "@sentry/nextjs/config";

export default withSentryConfig({
async headers() {
return [{
source: "/:path*",
headers: [{
key: "Document-Policy",
value: "js-profiling",
}],
}];
},
// ... other Next.js config options
});`,
},
{
label: 'CJS',
language: 'javascript',
filename: 'next.config.js',
code: `
module.exports = withSentryConfig({
async headers() {
return [{
source: "/:path*",
headers: [{
key: "Document-Policy",
value: "js-profiling",
}],
}];
},
// ... other Next.js config options
});`,
const { withSentryConfig } = require("@sentry/nextjs/config");

module.exports = withSentryConfig({
async headers() {
return [{
source: "/:path*",
headers: [{
key: "Document-Policy",
value: "js-profiling",
}],
}];
},
// ... other Next.js config options
});`,
},
],
},
Expand Down
5 changes: 5 additions & 0 deletions static/app/gettingStartedDocs/javascript-nextjs/onboarding.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ describe('javascript-nextjs onboarding docs', () => {
expect(
screen.getByText(textWithMarkupMatcher(/npx @sentry\/wizard@latest -i nextjs/))
).toBeInTheDocument();

// States the minimum supported Next.js version
expect(
screen.getByText(textWithMarkupMatcher(/requires Next\.js 14 or later/))
).toBeInTheDocument();
});

it('displays the verify instructions', () => {
Expand Down
6 changes: 6 additions & 0 deletions static/app/gettingStartedDocs/javascript-nextjs/onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ export const onboarding: OnboardingConfig = {
{
title: t('Automatic Configuration (Recommended)'),
content: [
{
type: 'text',
text: tct('The Sentry Next.js SDK requires Next.js [code:14] or later.', {
code: <code />,
}),
},
{
type: 'text',
text: tct(
Expand Down
21 changes: 4 additions & 17 deletions static/app/gettingStartedDocs/javascript-nextjs/performance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {getInstallSnippet} from './utils';
export const performance: OnboardingConfig = {
introduction: () =>
t(
"Adding Performance to your React project is simple. Make sure you've got these basics down."
"Adding Performance to your Next.js project is simple. Make sure you've got these basics down."
),
install: params => [
{
Expand All @@ -34,7 +34,7 @@ export const performance: OnboardingConfig = {
{
type: 'text',
text: tct(
'To configure, set [code:tracesSampleRate] in your config files, [code:sentry.server.config.js], [code:instrumentation-client.(js|ts)], and [code:sentry.edge.config.js]:',
'To configure, set [code:tracesSampleRate] in your config files, [code:instrumentation-client.(js|ts)], [code:sentry.server.config.(js|ts)], and [code:sentry.edge.config.(js|ts)]:',
{code: <code />}
),
},
Expand Down Expand Up @@ -93,27 +93,14 @@ Sentry.init({
{
type: 'code',
language: 'javascript',
filename: 'instrumentation-client.(js|ts)',
code: `
// instrumentation-client.(js|ts)
Sentry.init({
dsn: "${params.dsn.public}",
integrations: [Sentry.browserTracingIntegration()],
tracePropagationTargets: ["localhost", /^https:\\/\\/yourserver\\.io\\/api/]
});
`,
},
{
type: 'text',
text: tct(
"If you're using version [code:7.57.x] or below, you'll need to have our [link:tracing feature enabled] in order for distributed tracing to work.",
{
code: <code />,
link: (
<ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/tracing/" />
),
}
),
},
],
},
],
Expand All @@ -124,7 +111,7 @@ Sentry.init({
{
type: 'text',
text: tct(
'Verify that performance monitoring is working correctly with our [link:automatic instrumentation] by simply using your NextJS application.',
'Verify that performance monitoring is working correctly with our [link:automatic instrumentation] by simply using your Next.js application.',
{
link: (
<ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/tracing/instrumentation/automatic-instrumentation/" />
Expand Down
Loading