Skip to content

test(solid-router): add sentry e2e #5612

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 4 commits into from
Oct 25, 2025
Merged

test(solid-router): add sentry e2e #5612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
725700f
test(solid-router): add sentry e2e
birkskyum Oct 25, 2025
c0b38a7
ci: apply automated fixes
autofix-ci[bot] Oct 25, 2025
0def1c8
add link from Sentry observability page
birkskyum Oct 25, 2025
82a5813
update react sentry integration package
birkskyum Oct 25, 2025
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
2 changes: 1 addition & 1 deletion docs/start/framework/solid/guide/observability.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const serverFn = createServerFn().handler(async () => {
})
```

[Get started with Sentry →](https://sentry.io/signup?utm_source=tanstack)
[Get started with Sentry →](https://sentry.io/signup?utm_source=tanstack) | [View integration example →](https://github.com/TanStack/router/tree/main/e2e/solid-router/sentry-integration)

## Built-in Observability Patterns

Expand Down
2 changes: 1 addition & 1 deletion e2e/react-router/sentry-integration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
},
"dependencies": {
"@sentry/react": "^8.54.0",
"@sentry/react": "^10.22.0",
"@sentry/tracing": "^7.120.3",
"@sentry/vite-plugin": "^3.1.2",
Comment on lines +14 to 16
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify Sentry package version compatibility and React 19 support.

The major version bump from ^8.54.0 to ^10.22.0 for @sentry/react is significant. More critically, @sentry/react (^10.22.0) and @sentry/tracing (^7.120.3) are pinned to different major versions. Confirm this mismatch is intentional and that both packages are mutually compatible.

Additionally, verify that @sentry/react 10.22.0 fully supports React 19.0.0 (which is a recent major release).

🌐 Web query:

Does @sentry/react 10.22.0 support React 19.0.0 and what is the correct version of @sentry/tracing for that release?

💡 Result:

Yes — @sentry/react@10.22.0 supports React 19 (React‑19 support was added in the SDK back at 8.6.0). [1]

You do not need a separate @sentry/tracing package for modern Sentry JS SDKs: tracing integrations/exports were folded into the main SDKs and the standalone @sentry/tracing package is deprecated/discontinued for newer SDK versions. If you are using the current @sentry/react (v10.x) use the tracing integrations from @sentry/react itself (no separate @sentry/tracing required). [1][2]

Sources:

  • Sentry changelog — React 19 support (notes that Sentry React SDK supports React 19). [1]
  • @sentry/tracing npm page — deprecation / package discontinued notice. [2]

Remove the deprecated @sentry/tracing package dependency.

@sentry/react@10.22.0 does support React 19.0.0, however @sentry/tracing is deprecated and discontinued for modern Sentry JS SDKs. For @sentry/react v10.x, tracing integrations should come from @sentry/react itself rather than as a separate package.

Remove "@sentry/tracing": "^7.120.3" from line 15 and import tracing integrations directly from @sentry/react instead.

🤖 Prompt for AI Agents 
In e2e/react-router/sentry-integration/package.json around lines 14 to 16,
remove the deprecated dependency entry for "@sentry/tracing": "^7.120.3" from
the dependencies list and update any code importing tracing from that package to
instead import tracing integrations from "@sentry/react" (for example, use the
tracing integrations exported by @sentry/react in your Sentry init). Ensure
package.json no longer contains the "@sentry/tracing" line and run a reinstall
(npm/yarn) to refresh lockfiles.

"@tailwindcss/postcss": "^4.1.15",
Expand Down
11 changes: 11 additions & 0 deletions e2e/solid-router/sentry-integration/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
node_modules
.DS_Store
dist
dist-hash
dist-ssr
*.local

/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
12 changes: 12 additions & 0 deletions e2e/solid-router/sentry-integration/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
31 changes: 31 additions & 0 deletions e2e/solid-router/sentry-integration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"name": "tanstack-solid-router-e2e-sentry-integration",
"private": true,
"type": "module",
"scripts": {
"dev": "vite --port 3000",
"dev:e2e": "vite",
"build": "vite build && tsc --noEmit",
"serve": "vite preview",
"start": "vite",
"test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
},
"dependencies": {
"@sentry/solid": "^10.22.0",
"@sentry/tracing": "^7.120.3",
Comment on lines +14 to +15
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Version mismatch between Sentry packages.

There's a major version mismatch: @sentry/solid is at v10.22.0 while @sentry/tracing is at v7.120.3. This could lead to compatibility issues or unexpected behavior.

Verify the correct versions by checking Sentry's documentation:

🌐 Web query:

What version of @sentry/tracing is compatible with @sentry/solid version 10.22.0?

💡 Result:

Use @sentry/tracing@10.22.0 (match the 10.22.0 Sentry v10 release). [1][2]

Sources:

  • Sentry JS releases listing (10.22.0). [1]
  • @sentry/tracing changelog / package series showing v10 releases. [2]

Update @sentry/tracing to v10 to match @sentry/solid.

@sentry/tracing is currently pinned to v7.120.3, but @sentry/tracing should match the v10 release to be compatible with @sentry/solid@10.22.0. Change @sentry/tracing to ^10.22.0.

🤖 Prompt for AI Agents 
In e2e/solid-router/sentry-integration/package.json around lines 14 to 15,
@sentry/tracing is pinned to v7.120.3 while @sentry/solid is at v10.22.0; update
the @sentry/tracing dependency to a v10 semver (e.g. ^10.22.0) so both Sentry
packages use compatible major versions and restore compatibility with
@sentry/solid@10.22.0, then run npm install / yarn install and verify no
lockfile conflicts.

"@sentry/vite-plugin": "^3.1.2",
"@tailwindcss/postcss": "^4.1.15",
"@tanstack/solid-router": "workspace:^",
"@tanstack/solid-router-devtools": "workspace:^",
"postcss": "^8.5.1",
"solid-js": "^1.9.9",
"redaxios": "^0.5.1",
"tailwindcss": "^4.1.15"
},
"devDependencies": {
"@playwright/test": "^1.50.1",
"@tanstack/router-e2e-utils": "workspace:^",
"vite-plugin-solid": "^2.11.10",
"vite": "^7.1.7"
}
}
34 changes: 34 additions & 0 deletions e2e/solid-router/sentry-integration/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { defineConfig, devices } from '@playwright/test'
import { getTestServerPort } from '@tanstack/router-e2e-utils'
import packageJson from './package.json' with { type: 'json' }

const PORT = await getTestServerPort(packageJson.name)
const baseURL = `http://localhost:${PORT}`
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
workers: 1,

reporter: [['line']],

use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL,
},

webServer: {
command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
url: baseURL,
reuseExistingServer: !process.env.CI,
stdout: 'pipe',
},

projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
})
5 changes: 5 additions & 0 deletions e2e/solid-router/sentry-integration/postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
92 changes: 92 additions & 0 deletions e2e/solid-router/sentry-integration/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { render } from 'solid-js/web'

import { tanstackRouterBrowserTracingIntegration } from '@sentry/solid/tanstackrouter'
import * as Sentry from '@sentry/solid'

import {
Link,
Outlet,
RouterProvider,
createRootRoute,
createRoute,
createRouter,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import './styles.css'

const rootRoute = createRootRoute({
component: RootComponent,
notFoundComponent: () => {
return (
<div>
<p>This is the notFoundComponent configured on root route</p>
<Link to="/">Start Over</Link>
</div>
)
},
})

function RootComponent() {
return (
<>
<div class="p-2 flex gap-2 text-lg border-b">
<Link
to="/"
activeProps={{
class: 'font-bold',
}}
activeOptions={{ exact: true }}
>
Home
</Link>
</div>
<Outlet />
<TanStackRouterDevtools position="bottom-right" />
</>
)
}
const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
component: IndexComponent,
})

function IndexComponent() {
return (
<div class="p-2">
<h3>Welcome Home!</h3>
</div>
)
}

const routeTree = rootRoute.addChildren([indexRoute])

// Set up a Router instance
const router = createRouter({
routeTree,
defaultPreload: 'intent',
defaultStaleTime: 5000,
})

// Register things for typesafety
declare module '@tanstack/solid-router' {
interface Register {
router: typeof router
}
}

Sentry.init({
dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
integrations: [tanstackRouterBrowserTracingIntegration(router)],
transport: () => ({
send: (): Promise<any> => Promise.resolve(),
flush: () => Promise.resolve(true),
}),
tracesSampleRate: 0.2,
sendClientReports: false,
})

const rootElement = document.getElementById('app')
if (rootElement) {
render(() => <RouterProvider router={router} />, rootElement)
}
21 changes: 21 additions & 0 deletions e2e/solid-router/sentry-integration/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@import 'tailwindcss';

@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}

html {
color-scheme: light dark;
}
* {
@apply border-gray-200 dark:border-gray-800;
}
body {
@apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
}
10 changes: 10 additions & 0 deletions e2e/solid-router/sentry-integration/tests/app.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { expect } from '@playwright/test'
import { test } from '@tanstack/router-e2e-utils'

test.beforeEach(async ({ page }) => {
await page.goto('/')
})

test('should load', async ({ page }) => {
await expect(page.getByRole('heading')).toContainText('Welcome Home!')
})
15 changes: 15 additions & 0 deletions e2e/solid-router/sentry-integration/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"target": "ESNext",
"moduleResolution": "Bundler",
"module": "ESNext",
"resolveJsonModule": true,
"allowJs": true,
"skipLibCheck": true
},
"exclude": ["node_modules", "dist"]
}
8 changes: 8 additions & 0 deletions e2e/solid-router/sentry-integration/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import { sentryVitePlugin } from '@sentry/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [solid(), sentryVitePlugin()],
})
Loading
Loading