Skip to content

test(e2e): Add nextjs-13 e2e test app #13154

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

Merged
merged 3 commits into from
Aug 1, 2024
Merged

test(e2e): Add nextjs-13 e2e test app #13154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76ecd19
Add client tests
Jul 31, 2024
50d2c40
Complete
Aug 1, 2024
ffcfb4f
Add ci
Aug 1, 2024
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
1 change: 1 addition & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -994,6 +994,7 @@ jobs:
'ember-classic',
'ember-embroider',
'nextjs-app-dir',
'nextjs-13',
'nextjs-14',
'nextjs-15',
'react-17',
Expand Down
6 changes: 6 additions & 0 deletions .github/workflows/canary.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@ jobs:
- test-application: 'nextjs-app-dir'
build-command: 'test:build-latest'
label: 'nextjs-app-dir (latest)'
- test-application: 'nextjs-13'
build-command: 'test:build-canary'
label: 'nextjs-13 (canary)'
- test-application: 'nextjs-13'
build-command: 'test:build-latest'
label: 'nextjs-13 (latest)'
- test-application: 'nextjs-14'
build-command: 'test:build-canary'
label: 'nextjs-14 (canary)'
Expand Down
42 changes: 42 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

!*.d.ts

test-results

.vscode
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
7 changes: 7 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
3 changes: 3 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/app/pageload-transaction/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function PageloadTransactionPage() {
return <p>Pageload Transaction Page</p>;
}
6 changes: 6 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/app/rsc-error/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const dynamic = 'force-dynamic';

export default async function Page() {
throw new Error('RSC error');
return <p>Hello World</p>;
}
4 changes: 4 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/globals.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
interface Window {
recordedTransactions?: string[];
capturedExceptionId?: string;
}
17 changes: 17 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/instrumentation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as Sentry from '@sentry/nextjs';

export function register() {
if (process.env.NEXT_RUNTIME === 'nodejs' || process.env.NEXT_RUNTIME === 'edge') {
Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
tunnel: `http://localhost:3031/`, // proxy server
tracesSampleRate: 1,
sendDefaultPii: true,
transportOptions: {
// We are doing a lot of events at once in this test app
bufferSize: 1000,
},
});
}
}
6 changes: 6 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
17 changes: 17 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const { withSentryConfig } = require('@sentry/nextjs');

/** @type {import('next').NextConfig} */
const moduleExports = {
typescript: {
ignoreBuildErrors: true, // TODO: Remove this
},
experimental: {
appDir: true,
},
pageExtensions: ['jsx', 'js', 'tsx', 'ts', 'page.tsx'],
};

module.exports = withSentryConfig(moduleExports, {
silent: true,
excludeServerRoutes: ['/api/endpoint-excluded-with-string', /\/api\/endpoint-excluded-with-regex/],
});
45 changes: 45 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{
"name": "create-next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "next build > .tmp_build_stdout 2> .tmp_build_stderr || (cat .tmp_build_stdout && cat .tmp_build_stderr && exit 1)",
"clean": "npx rimraf node_modules pnpm-lock.yaml .next",
"test:prod": "TEST_ENV=production playwright test",
"test:dev": "TEST_ENV=development playwright test",
"test:build": "pnpm install && npx playwright install && pnpm build",
"test:build-canary": "pnpm install && pnpm add next@canary && pnpm add react@beta && pnpm add react-dom@beta && npx playwright install && pnpm build",
"test:build-latest": "pnpm install && pnpm add next@latest && npx playwright install && pnpm build",
"test:assert": "pnpm test:prod && pnpm test:dev"
},
"dependencies": {
"@sentry/nextjs": "latest || *",
"@types/node": "18.11.17",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.9",
"next": "13.2.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.5"
},
"devDependencies": {
"@playwright/test": "^1.44.1",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@sentry-internal/feedback": "latest || *",
"@sentry-internal/replay-canvas": "latest || *",
"@sentry-internal/browser-utils": "latest || *",
"@sentry/browser": "latest || *",
"@sentry/core": "latest || *",
"@sentry/nextjs": "latest || *",
"@sentry/node": "latest || *",
"@sentry/opentelemetry": "latest || *",
"@sentry/react": "latest || *",
"@sentry-internal/replay": "latest || *",
"@sentry/types": "latest || *",
"@sentry/utils": "latest || *",
"@sentry/vercel-edge": "latest || *"
},
"volta": {
"extends": "../../package.json"
}
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/click-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export default function ClickErrorPage() {
return (
<button
id="error-button"
onClick={() => {
throw new Error('click error');
}}
>
click to throw error
</button>
);
}
9 changes: 9 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/navigation-start-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Link from 'next/link';

export default function Page() {
return (
<Link href="/foo/navigation-target-page" id="navigation-link">
Navigate
</Link>
);
}
3 changes: 3 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/navigation-target-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return <p>arrived</p>;
}
3 changes: 3 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/pages-pageload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return <p>pageload test page</p>;
}
7 changes: 7 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/withInitialProps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const WithInitialPropsPage = ({ data }: { data: string }) => <h1>WithInitialPropsPage {data}</h1>;

WithInitialPropsPage.getInitialProps = () => {
return { data: '[some getInitialProps data]' };
};

export default WithInitialPropsPage;
7 changes: 7 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/[param]/withServerSideProps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function WithServerSidePropsPage({ data }: { data: string }) {
return <h1>WithServerSidePropsPage {data}</h1>;
}

export async function getServerSideProps() {
return { props: { data: '[some getServerSideProps data]' } };
}
19 changes: 19 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import App, { AppContext, AppProps } from 'next/app';

const MyApp = ({ Component, pageProps }: AppProps) => {
// @ts-ignore I don't know why TS complains here
return <Component {...pageProps} />;
};

MyApp.getInitialProps = async (appContext: AppContext) => {
// This simulates user misconfiguration. Users should always call `App.getInitialProps(appContext)`, but they don't,
// so we have a test for this so we don't break their apps.
if (appContext.ctx.pathname === '/misconfigured-_app-getInitialProps') {
return {};
}

const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};

export default MyApp;
5 changes: 5 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/api/[param]/failure-api-route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { NextApiRequest, NextApiResponse } from 'next';

export default async (_req: NextApiRequest, res: NextApiResponse) => {
throw new Error('api route error');
};
5 changes: 5 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/api/[param]/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { NextApiRequest, NextApiResponse } from 'next';

export default async (_req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ success: true });
};
5 changes: 5 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/api/[param]/success-api-route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { NextApiRequest, NextApiResponse } from 'next';

export default async (_req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ success: true });
};
14 changes: 14 additions & 0 deletions ...packages/e2e-tests/test-applications/nextjs-13/pages/api/cjs-api-endpoint-with-require.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { NextApiRequest, NextApiResponse } from 'next';

if (process.env.NEXT_PUBLIC_SOME_FALSE_ENV_VAR === 'enabled') {
require('../../tests/server/utils/throw'); // Should not throw unless the hoisting in the wrapping loader is messed up!
}

const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
require('@sentry/nextjs').captureException; // Should not throw unless the wrapping loader messes up cjs imports
// @ts-expect-error
require.context('.'); // This is a webpack utility call. Should not throw unless the wrapping loader messes it up by mangling.
res.status(200).json({ success: true });
};

module.exports = handler;
7 changes: 7 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/api/cjs-api-endpoint.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { NextApiRequest, NextApiResponse } from 'next';

const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
res.status(200).json({ success: true });
};

module.exports = handler;
7 changes: 7 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/api/endpoint-excluded-with-regex.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { NextApiRequest, NextApiResponse } from 'next';

const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
res.status(200).json({ success: true });
};

module.exports = handler;
7 changes: 7 additions & 0 deletions ...packages/e2e-tests/test-applications/nextjs-13/pages/api/endpoint-excluded-with-string.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { NextApiRequest, NextApiResponse } from 'next';

const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
res.status(200).json({ success: true });
};

module.exports = handler;
5 changes: 5 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/api/no-params.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { NextApiRequest, NextApiResponse } from 'next';

export default async (_req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ success: true });
};
5 changes: 5 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/api/params/[...pathParts].ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { NextApiRequest, NextApiResponse } from 'next';

export default async (_req: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ success: true });
};
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/crashed-session-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default function CrashedPage() {
// Magic to naively trigger onerror to make session crashed and allow for SSR
try {
if (typeof window !== 'undefined' && typeof window.onerror === 'function') {
// Lovely oldschool browsers syntax with 5 arguments <3
// @ts-expect-error
window.onerror(null, null, null, null, new Error('Crashed'));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kamilogorek it lives on

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

}
} catch (_e) {
// no-empty
}
return <h1>Crashed</h1>;
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/customPageExtension.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export default function BasicPage() {
return (
<h1>
This page simply exists to test the compatibility of Next.js' `pageExtensions` option with our auto wrapping
process. This file should be turned into a page by Next.js and our webpack loader should process it.
</h1>
);
}

export async function getServerSideProps() {
throw new Error('custom page extension error');
}
7 changes: 7 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/error-getServerSideProps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function WithServerSidePropsPage({ data }: { data: string }) {
return <h1>WithServerSidePropsPage {data}</h1>;
}

export async function getServerSideProps() {
throw new Error('getServerSideProps Error');
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/fetch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { useEffect } from 'react';

export default function FetchPage() {
useEffect(() => {
// test that a span is created in the pageload transaction for this fetch request
fetch('http://example.com').catch(() => {
// no-empty
});
}, []);

return <p>Hello world!</p>;
}
3 changes: 3 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/healthy-session-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return <p>healthy page</p>;
}
5 changes: 5 additions & 0 deletions ...ckages/e2e-tests/test-applications/nextjs-13/pages/misconfigured-_app-getInitialProps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// See _app.tsx for more information why this file exists.

export default function Page() {
return <p>faulty _app getInitialProps</p>;
}
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-13/pages/reportDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { captureException, showReportDialog } from '@sentry/nextjs';

export default function ReportDialogPage() {
return (
<button
id="open-report-dialog"
onClick={() => {
const eventId = captureException(new Error('show-report-dialog-error'));
showReportDialog({ eventId });
}}
>
Open Report Dialog
</button>
);
}
3 changes: 3 additions & 0 deletions ...es/e2e-tests/test-applications/nextjs-13/pages/unmatchedCustomPageExtension.someExtension
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
This page simply exists to test the compatibility of Next.js' `pageExtensions` option with our auto wrapping
process. This file should not be turned into a page by Next.js and our webpack loader also shouldn't process it.
This page should not contain valid JavaScript.
Loading
Loading