From 286f07b4b6268219437476c6de7d15e1bf56acc0 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Tue, 3 Jun 2025 09:41:52 +0200 Subject: [PATCH 1/2] add test --- .../test-applications/nextjs-orpc/.gitignore | 45 +++++++ .../test-applications/nextjs-orpc/.npmrc | 2 + .../nextjs-orpc/next-env.d.ts | 5 + .../nextjs-orpc/next.config.js | 8 ++ .../nextjs-orpc/package.json | 45 +++++++ .../nextjs-orpc/playwright.config.mjs | 19 +++ .../nextjs-orpc/sentry.edge.config.ts | 13 ++ .../nextjs-orpc/sentry.server.config.ts | 8 ++ .../nextjs-orpc/src/app/client-error/page.tsx | 9 ++ .../nextjs-orpc/src/app/client/page.tsx | 9 ++ .../nextjs-orpc/src/app/global-error.tsx | 27 +++++ .../nextjs-orpc/src/app/layout.tsx | 20 ++++ .../nextjs-orpc/src/app/page.tsx | 19 +++ .../src/app/rpc/[[...rest]]/route.ts | 22 ++++ .../nextjs-orpc/src/components/FindPlanet.tsx | 42 +++++++ .../nextjs-orpc/src/instrumentation-client.ts | 10 ++ .../nextjs-orpc/src/instrumentation.ts | 13 ++ .../nextjs-orpc/src/orpc/client.ts | 20 ++++ .../nextjs-orpc/src/orpc/router.ts | 45 +++++++ .../nextjs-orpc/src/orpc/sentry-middleware.ts | 16 +++ .../nextjs-orpc/src/orpc/server.ts | 5 + .../nextjs-orpc/start-event-proxy.mjs | 6 + .../nextjs-orpc/tests/orpc-error.test.ts | 22 ++++ .../nextjs-orpc/tests/orpc-tracing.test.ts | 111 ++++++++++++++++++ .../nextjs-orpc/tsconfig.json | 42 +++++++ 25 files changed, 583 insertions(+) create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/.gitignore create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/.npmrc create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/next-env.d.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/next.config.js create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/playwright.config.mjs create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.edge.config.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.server.config.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client-error/page.tsx create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client/page.tsx create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/global-error.tsx create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/layout.tsx create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/page.tsx create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/rpc/[[...rest]]/route.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/components/FindPlanet.tsx create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation-client.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/client.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/router.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/sentry-middleware.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/server.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/start-event-proxy.mjs create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-error.test.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-tracing.test.ts create mode 100644 dev-packages/e2e-tests/test-applications/nextjs-orpc/tsconfig.json diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-orpc/.gitignore new file mode 100644 index 000000000000..e799cc33c4e7 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/.gitignore @@ -0,0 +1,45 @@ +# 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 + +# Sentry +.sentryclirc + +.vscode + +test-results diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-orpc/.npmrc new file mode 100644 index 000000000000..070f80f05092 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/.npmrc @@ -0,0 +1,2 @@ +@sentry:registry=http://127.0.0.1:4873 +@sentry-internal:registry=http://127.0.0.1:4873 diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/next-env.d.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/next-env.d.ts new file mode 100644 index 000000000000..40c3d68096c2 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/next.config.js b/dev-packages/e2e-tests/test-applications/nextjs-orpc/next.config.js new file mode 100644 index 000000000000..ade813b1cde3 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/next.config.js @@ -0,0 +1,8 @@ +/** @type {import("next").NextConfig} */ +const config = {}; + +import { withSentryConfig } from '@sentry/nextjs'; + +export default withSentryConfig(config, { + disableLogger: true, +}); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json b/dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json new file mode 100644 index 000000000000..2553e9b36c55 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json @@ -0,0 +1,45 @@ +{ + "name": "next-orpc", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "build": "next build", + "dev": "next dev -p 3030", + "start": "next start -p 3030", + "clean": "npx rimraf node_modules pnpm-lock.yaml", + "test:prod": "TEST_ENV=production playwright test", + "test:dev": "TEST_ENV=development playwright test", + "test:build": "pnpm install && pnpm build", + "test:build-canary": "pnpm install && pnpm add next@canary && pnpm add react@beta && pnpm add react-dom@beta && pnpm build", + "test:build-latest": "pnpm install && pnpm add next@rc && pnpm add react@beta && pnpm add react-dom@beta && pnpm build", + "test:assert": "pnpm test:prod && pnpm test:dev" + }, + "dependencies": { + "@sentry/nextjs": "latest || *", + "@orpc/server": "latest", + "@orpc/client": "latest", + "next": "14.2.10", + "react": "18.3.1", + "react-dom": "18.3.1", + "server-only": "^0.0.1" + }, + "devDependencies": { + "@playwright/test": "~1.50.0", + "@sentry-internal/test-utils": "link:../../../test-utils", + "@types/eslint": "^8.56.10", + "@types/node": "^18.19.1", + "@types/react": "18.3.1", + "@types/react-dom": "^18.3.0", + "@typescript-eslint/eslint-plugin": "^8.1.0", + "@typescript-eslint/parser": "^8.1.0", + "eslint": "^8.57.0", + "eslint-config-next": "^14.2.4", + "postcss": "^8.4.39", + "prettier": "^3.3.2", + "typescript": "^5.5.3" + }, + "volta": { + "extends": "../../package.json" + } +} diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-orpc/playwright.config.mjs new file mode 100644 index 000000000000..8448829443d6 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/playwright.config.mjs @@ -0,0 +1,19 @@ +import { getPlaywrightConfig } from '@sentry-internal/test-utils'; +const testEnv = process.env.TEST_ENV; + +if (!testEnv) { + throw new Error('No test env defined'); +} + +const config = getPlaywrightConfig( + { + startCommand: testEnv === 'development' ? 'pnpm next dev -p 3030' : 'pnpm next start -p 3030', + port: 3030, + }, + { + // This comes with the risk of tests leaking into each other but the tests run quite slow so we should parallelize + workers: '100%', + }, +); + +export default config; diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.edge.config.ts new file mode 100644 index 000000000000..4f1cb3e93e9c --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.edge.config.ts @@ -0,0 +1,13 @@ +// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on). +// The config you add here will be used whenever one of the edge features is loaded. +// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally. +// https://docs.sentry.io/platforms/javascript/guides/nextjs/ + +import * as Sentry from '@sentry/nextjs'; + +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.0, +}); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.server.config.ts new file mode 100644 index 000000000000..ad780407a5b7 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/sentry.server.config.ts @@ -0,0 +1,8 @@ +import * as Sentry from '@sentry/nextjs'; + +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.0, +}); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client-error/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client-error/page.tsx new file mode 100644 index 000000000000..ff25388b59c4 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client-error/page.tsx @@ -0,0 +1,9 @@ +import { FindPlanet } from '~/components/FindPlanet'; + +export default async function ClientErrorPage() { + return ( +
+ +
+ ); +} diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client/page.tsx new file mode 100644 index 000000000000..8c1d5a7607f6 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/client/page.tsx @@ -0,0 +1,9 @@ +import { FindPlanet } from '~/components/FindPlanet'; + +export default async function ClientPage() { + return ( +
+ +
+ ); +} diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/global-error.tsx new file mode 100644 index 000000000000..912ad3606a61 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/global-error.tsx @@ -0,0 +1,27 @@ +'use client'; + +import * as Sentry from '@sentry/nextjs'; +import NextError from 'next/error'; +import { useEffect } from 'react'; + +export default function GlobalError({ + error, +}: { + error: Error & { digest?: string }; +}) { + useEffect(() => { + Sentry.captureException(error); + }, [error]); + + return ( + + + {/* `NextError` is the default Next.js error page component. Its type + definition requires a `statusCode` prop. However, since the App Router + does not expose status codes for errors, we simply pass 0 to render a + generic error message. */} + + + + ); +} diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/layout.tsx new file mode 100644 index 000000000000..97fff2740ace --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/layout.tsx @@ -0,0 +1,20 @@ +import '../orpc/server'; +import * as Sentry from '@sentry/nextjs'; + +import { type Metadata } from 'next'; + +export function generateMetadata(): Metadata { + return { + other: { + ...Sentry.getTraceData(), + }, + }; +} + +export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { + return ( + + {children} + + ); +} diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/page.tsx new file mode 100644 index 000000000000..d26349dcf47e --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/page.tsx @@ -0,0 +1,19 @@ +import Link from 'next/link'; +import { client } from '~/orpc/client'; + +export default async function Home() { + const planets = await client.planet.list({ limit: 10 }); + + return ( +
+

Planets

+
    + {planets.map(planet => ( +
  • {planet.name}
    • + ))} +
+ Client + Error +
+ ); +} diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/rpc/[[...rest]]/route.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/rpc/[[...rest]]/route.ts new file mode 100644 index 000000000000..e8602b1bd55b --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/app/rpc/[[...rest]]/route.ts @@ -0,0 +1,22 @@ +import { RPCHandler } from '@orpc/server/fetch'; +import { router } from '~/orpc/router'; + +const handler = new RPCHandler(router); + +async function handleRequest(request: Request) { + const { response } = await handler.handle(request, { + prefix: '/rpc', + context: { + headers: Object.fromEntries(request.headers.entries()), + }, + }); + + return response ?? new Response('Not found', { status: 404 }); +} + +export const HEAD = handleRequest; +export const GET = handleRequest; +export const POST = handleRequest; +export const PUT = handleRequest; +export const PATCH = handleRequest; +export const DELETE = handleRequest; diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/components/FindPlanet.tsx b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/components/FindPlanet.tsx new file mode 100644 index 000000000000..eb559e74dadf --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/components/FindPlanet.tsx @@ -0,0 +1,42 @@ +'use client'; + +import { client } from '~/orpc/client'; +import { useEffect, useState } from 'react'; + +type Planet = { + id: number; + name: string; + description?: string; +}; + +export function FindPlanet({ withError = false }: { withError?: boolean }) { + const [planet, setPlanet] = useState(); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + async function fetchPlanet() { + const data = withError ? await client.planet.findWithError({ id: 1 }) : await client.planet.find({ id: 1 }); + setPlanet(data); + } + + setLoading(true); + fetchPlanet(); + setLoading(false); + }, []); + + if (loading) { + return
Loading planet...
; + } + + if (error) { + return
Error: {error}
; + } + + return ( +
+

Planet

+
{planet?.name}
+
+ ); +} diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation-client.ts new file mode 100644 index 000000000000..d85e1cb17cbf --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation-client.ts @@ -0,0 +1,10 @@ +import * as Sentry from '@sentry/nextjs'; + +Sentry.init({ + dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN, + tunnel: `http://localhost:3031/`, // proxy server + tracesSampleRate: 1, + debug: false, +}); + +export const onRouterTransitionStart = Sentry.captureRouterTransitionStart; diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation.ts new file mode 100644 index 000000000000..8aff09f087d0 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/instrumentation.ts @@ -0,0 +1,13 @@ +import * as Sentry from '@sentry/nextjs'; + +export async function register() { + if (process.env.NEXT_RUNTIME === 'nodejs') { + await import('../sentry.server.config'); + } + + if (process.env.NEXT_RUNTIME === 'edge') { + await import('../sentry.edge.config'); + } +} + +export const onRequestError = Sentry.captureRequestError; diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/client.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/client.ts new file mode 100644 index 000000000000..2c6b4f7a3d1f --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/client.ts @@ -0,0 +1,20 @@ +import { createORPCClient } from '@orpc/client'; +import { RPCLink } from '@orpc/client/fetch'; +import { RouterClient } from '@orpc/server'; +import type { headers } from 'next/headers'; +import { router } from './router'; + +declare global { + var $headers: typeof headers; +} + +const link = new RPCLink({ + url: new URL('/rpc', typeof window !== 'undefined' ? window.location.href : 'http://localhost:3030'), + headers: async () => { + return globalThis.$headers + ? Object.fromEntries(await globalThis.$headers()) // ssr + : {}; // browser + }, +}); + +export const client: RouterClient = createORPCClient(link); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/router.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/router.ts new file mode 100644 index 000000000000..7081e3ed2ad2 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/router.ts @@ -0,0 +1,45 @@ +import { ORPCError, os } from '@orpc/server'; +import { z } from 'zod'; +import { sentryTracingMiddleware } from './sentry-middleware'; + +const PlanetSchema = z.object({ + id: z.number().int().min(1), + name: z.string(), + description: z.string().optional(), +}); + +export const base = os.use(sentryTracingMiddleware); + +export const listPlanet = base + .input( + z.object({ + limit: z.number().int().min(1).max(100).optional(), + cursor: z.number().int().min(0).default(0), + }), + ) + .handler(async ({ input }) => { + return [ + { id: 1, name: 'name' }, + { id: 2, name: 'another name' }, + ]; + }); + +export const findPlanet = base.input(PlanetSchema.pick({ id: true })).handler(async ({ input }) => { + await new Promise(resolve => setTimeout(resolve, 500)); + return { id: 1, name: 'name' }; +}); + +export const throwingFindPlanet = base.input(PlanetSchema.pick({ id: true })).handler(async ({ input }) => { + throw new ORPCError('OH_OH', { + message: 'You are hitting an error', + data: { some: 'data' }, + }); +}); + +export const router = { + planet: { + list: listPlanet, + find: findPlanet, + findWithError: throwingFindPlanet, + }, +}; diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/sentry-middleware.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/sentry-middleware.ts new file mode 100644 index 000000000000..fdfcc9b7cd98 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/sentry-middleware.ts @@ -0,0 +1,16 @@ +import { os } from '@orpc/server'; +import * as Sentry from '@sentry/nextjs'; + +export const sentryTracingMiddleware = os.$context<{}>().middleware(async ({ context, next }) => { + return Sentry.startSpan( + { name: 'ORPC Middleware', op: 'middleware.orpc', attributes: { 'sentry.origin': 'auto' } }, + async () => { + try { + return await next(); + } catch (error) { + Sentry.captureException(error); + throw error; + } + }, + ); +}); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/server.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/server.ts new file mode 100644 index 000000000000..3d53175dafe1 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/src/orpc/server.ts @@ -0,0 +1,5 @@ +'server only'; + +import { headers } from 'next/headers'; + +globalThis.$headers = headers; diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-orpc/start-event-proxy.mjs new file mode 100644 index 000000000000..472e6a6098ce --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/start-event-proxy.mjs @@ -0,0 +1,6 @@ +import { startEventProxyServer } from '@sentry-internal/test-utils'; + +startEventProxyServer({ + port: 3031, + proxyServerName: 'nextjs-orpc', +}); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-error.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-error.test.ts new file mode 100644 index 000000000000..8a9f371972c0 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-error.test.ts @@ -0,0 +1,22 @@ +import { expect, test } from '@playwright/test'; +import { waitForError } from '@sentry-internal/test-utils'; + +test('should capture orpc error', async ({ page }) => { + const orpcErrorPromise = waitForError('nextjs-orpc', errorEvent => { + return errorEvent.exception?.values?.[0]?.value === 'You are hitting an error'; + }); + + await page.goto('/'); + await page.waitForTimeout(500); + await page.getByRole('link', { name: 'Error' }).click(); + + const orpcError = await orpcErrorPromise; + + expect(orpcError.exception).toMatchObject({ + values: [ + expect.objectContaining({ + value: 'You are hitting an error', + }), + ], + }); +}); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-tracing.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-tracing.test.ts new file mode 100644 index 000000000000..f2863b4e5095 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/tests/orpc-tracing.test.ts @@ -0,0 +1,111 @@ +import { expect, test } from '@playwright/test'; +import { waitForTransaction } from '@sentry-internal/test-utils'; + +test('should trace orpc server component', async ({ page }) => { + const pageloadPromise = waitForTransaction('nextjs-orpc', transactionEvent => { + return transactionEvent.transaction === '/'; + }); + + const orpcTxPromise = waitForTransaction('nextjs-orpc', transactionEvent => { + return transactionEvent.transaction === 'POST /rpc/[[...rest]]'; + }); + + await page.goto('/'); + const pageloadTx = await pageloadPromise; + const orpcTx = await orpcTxPromise; + + expect(pageloadTx.contexts?.trace).toMatchObject({ + parent_span_id: expect.any(String), + span_id: expect.any(String), + trace_id: expect.any(String), + data: { + 'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation', + 'sentry.op': 'pageload', + 'sentry.source': 'url', + }, + op: 'pageload', + origin: 'auto.pageload.nextjs.app_router_instrumentation', + }); + + expect(orpcTx.contexts?.trace).toMatchObject({ + parent_span_id: expect.any(String), + span_id: expect.any(String), + trace_id: pageloadTx.contexts?.trace?.trace_id, + data: { + 'sentry.op': 'http.server', + 'sentry.origin': 'auto', + 'sentry.source': 'route', + 'otel.kind': 'SERVER', + 'http.response.status_code': 200, + 'next.span_name': 'POST /rpc/[[...rest]]/route', + 'next.span_type': 'BaseServer.handleRequest', + 'http.method': 'POST', + 'http.target': '/rpc/planet/list', + 'next.rsc': false, + 'http.route': '/rpc/[[...rest]]/route', + 'next.route': '/rpc/[[...rest]]', + 'http.status_code': 200, + }, + op: 'http.server', + origin: 'auto', + }); + + expect(orpcTx.spans?.map(span => span.description)).toContain('ORPC Middleware'); +}); + +test('should trace orpc client component', async ({ page }) => { + const navigationPromise = waitForTransaction('nextjs-orpc', transactionEvent => { + return transactionEvent.transaction === '/client'; + }); + + const orpcTxPromise = waitForTransaction('nextjs-orpc', transactionEvent => { + return ( + transactionEvent.transaction === 'POST /rpc/[[...rest]]' && + transactionEvent.contexts?.trace?.data?.['http.target'] === '/rpc/planet/find' + ); + }); + + await page.goto('/'); + await page.waitForTimeout(500); + await page.getByRole('link', { name: 'Client' }).click(); + const navigationTx = await navigationPromise; + const orpcTx = await orpcTxPromise; + + expect(navigationTx.contexts?.trace).toMatchObject({ + span_id: expect.any(String), + trace_id: expect.any(String), + data: { + 'sentry.op': 'navigation', + 'sentry.origin': 'auto.navigation.nextjs.app_router_instrumentation', + 'sentry.source': 'url', + 'sentry.previous_trace': expect.any(String), + }, + op: 'navigation', + origin: 'auto.navigation.nextjs.app_router_instrumentation', + }); + + expect(orpcTx?.contexts?.trace).toMatchObject({ + parent_span_id: expect.any(String), + span_id: expect.any(String), + trace_id: navigationTx?.contexts?.trace?.trace_id, + data: { + 'sentry.op': 'http.server', + 'sentry.origin': 'auto', + 'sentry.source': 'route', + 'otel.kind': 'SERVER', + 'http.response.status_code': 200, + 'next.span_name': 'POST /rpc/[[...rest]]/route', + 'next.span_type': 'BaseServer.handleRequest', + 'http.method': 'POST', + 'http.target': '/rpc/planet/find', + 'next.rsc': false, + 'http.route': '/rpc/[[...rest]]/route', + 'next.route': '/rpc/[[...rest]]', + 'http.status_code': 200, + }, + op: 'http.server', + origin: 'auto', + }); + + expect(orpcTx.spans?.map(span => span.description)).toContain('ORPC Middleware'); +}); diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/tsconfig.json b/dev-packages/e2e-tests/test-applications/nextjs-orpc/tsconfig.json new file mode 100644 index 000000000000..905062ded60c --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/tsconfig.json @@ -0,0 +1,42 @@ +{ + "compilerOptions": { + /* Base Options: */ + "esModuleInterop": true, + "skipLibCheck": true, + "target": "es2022", + "allowJs": true, + "resolveJsonModule": true, + "moduleDetection": "force", + "isolatedModules": true, + + /* Strictness */ + "strict": true, + "noUncheckedIndexedAccess": true, + "checkJs": true, + + /* Bundled projects */ + "lib": ["dom", "dom.iterable", "ES2022"], + "noEmit": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "jsx": "preserve", + "plugins": [{ "name": "next" }], + "incremental": true, + + /* Path Aliases */ + "baseUrl": ".", + "paths": { + "~/*": ["./src/*"] + } + }, + "include": [ + ".eslintrc.cjs", + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "**/*.cjs", + "**/*.js", + ".next/types/**/*.ts" + ], + "exclude": ["node_modules"] +} From 310d66aae76cce8712755b5afae3e967580a8e41 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Tue, 3 Jun 2025 09:48:04 +0200 Subject: [PATCH 2/2] update vulnerable next versions --- .../e2e-tests/test-applications/nextjs-orpc/package.json | 2 +- dev-packages/e2e-tests/test-applications/nextjs-t3/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json b/dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json index 2553e9b36c55..c8aec814115d 100644 --- a/dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json +++ b/dev-packages/e2e-tests/test-applications/nextjs-orpc/package.json @@ -19,7 +19,7 @@ "@sentry/nextjs": "latest || *", "@orpc/server": "latest", "@orpc/client": "latest", - "next": "14.2.10", + "next": "14.2.29", "react": "18.3.1", "react-dom": "18.3.1", "server-only": "^0.0.1" diff --git a/dev-packages/e2e-tests/test-applications/nextjs-t3/package.json b/dev-packages/e2e-tests/test-applications/nextjs-t3/package.json index 4c6f9f281406..94da7baed3ab 100644 --- a/dev-packages/e2e-tests/test-applications/nextjs-t3/package.json +++ b/dev-packages/e2e-tests/test-applications/nextjs-t3/package.json @@ -21,7 +21,7 @@ "@trpc/react-query": "^11.0.0-rc.446", "@trpc/server": "^11.0.0-rc.446", "geist": "^1.3.0", - "next": "14.2.10", + "next": "14.2.29", "react": "18.3.1", "react-dom": "18.3.1", "server-only": "^0.0.1",