test(solid-router): add sentry e2e #5612
Conversation
WalkthroughAdds a new end-to-end Solid Router integration example that wires Sentry tracing into a Vite + Solid app, plus Playwright tests, TypeScript/Vite/PostCSS configs, and a minor docs link update pointing to the integration example. Changes
Sequence Diagram(s)sequenceDiagram
%% Styling: subtle colors via notes for clarity
participant Browser as Browser
participant App as Solid App
participant Router as TanStack Router
participant Sentry as Sentry SDK
Note over App,Router #f3f4f6: Initialization phase
App->>Sentry: Sentry.init({ integrations: [tanstackRouterBrowserTracingIntegration(router)] })
App->>Router: createRootRouter(...) / mount RouterProvider
Note over Router,Sentry #eef2ff: Runtime tracing on navigation
Browser->>Router: navigate / route change
Router->>Sentry: start transaction / create span
Sentry->>Sentry: record spans / traces
Note over Browser,App #f0fdf4: Dev & test hooks
App->>Browser: mount Router DevTools UI
Browser->>Playwright: e2e test visits root (tests/app.spec.ts)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 82a5813
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
e2e/solid-router/sentry-integration/package.json (1)
11-11: Use cross-platform script command.The
rm -rf port*.txtcommand is Unix-specific and will fail on Windows. Consider using a cross-platform alternative.Apply this diff to use a cross-platform approach:
- "test:e2e": "rm -rf port*.txt; playwright test --project=chromium" + "test:e2e": "playwright test --project=chromium"Alternatively, if the port file cleanup is essential, use a cross-platform package like
rimrafor a Node script:- "test:e2e": "rm -rf port*.txt; playwright test --project=chromium" + "test:e2e": "node -e \"require('fs').readdirSync('.').filter(f=>f.startsWith('port')&&f.endsWith('.txt')).forEach(f=>require('fs').unlinkSync(f))\" && playwright test --project=chromium"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
docs/start/framework/solid/guide/observability.md(1 hunks)e2e/solid-router/sentry-integration/.gitignore(1 hunks)e2e/solid-router/sentry-integration/index.html(1 hunks)e2e/solid-router/sentry-integration/package.json(1 hunks)e2e/solid-router/sentry-integration/playwright.config.ts(1 hunks)e2e/solid-router/sentry-integration/postcss.config.mjs(1 hunks)e2e/solid-router/sentry-integration/src/main.tsx(1 hunks)e2e/solid-router/sentry-integration/src/styles.css(1 hunks)e2e/solid-router/sentry-integration/tests/app.spec.ts(1 hunks)e2e/solid-router/sentry-integration/tsconfig.json(1 hunks)e2e/solid-router/sentry-integration/vite.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
e2e/**
📄 CodeRabbit inference engine (AGENTS.md)
Store end-to-end tests under the e2e/ directory
Files:
e2e/solid-router/sentry-integration/index.htmle2e/solid-router/sentry-integration/tsconfig.jsone2e/solid-router/sentry-integration/src/main.tsxe2e/solid-router/sentry-integration/vite.config.jse2e/solid-router/sentry-integration/postcss.config.mjse2e/solid-router/sentry-integration/package.jsone2e/solid-router/sentry-integration/src/styles.csse2e/solid-router/sentry-integration/playwright.config.tse2e/solid-router/sentry-integration/tests/app.spec.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
e2e/solid-router/sentry-integration/src/main.tsxe2e/solid-router/sentry-integration/playwright.config.tse2e/solid-router/sentry-integration/tests/app.spec.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
e2e/solid-router/sentry-integration/package.json
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/solid/guide/observability.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/solid/guide/observability.md
🧬 Code graph analysis (2)
e2e/solid-router/sentry-integration/src/main.tsx (1)
e2e/react-router/js-only-file-based/src/main.jsx (1)
rootElement(15-15)
e2e/solid-router/sentry-integration/playwright.config.ts (1)
scripts/set-ts-version.js (1)
packageJson(33-33)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (10)
docs/start/framework/solid/guide/observability.md (1)
50-50: LGTM! Documentation link added correctly.The link to the integration example follows the existing pattern used elsewhere in the documentation for linking to code examples.
e2e/solid-router/sentry-integration/.gitignore (1)
1-11: LGTM! Standard ignore patterns.The gitignore appropriately covers build artifacts, test results, and cache directories for the Vite and Playwright setup.
e2e/solid-router/sentry-integration/postcss.config.mjs (1)
1-5: LGTM! Correct Tailwind CSS v4 configuration.The PostCSS configuration properly uses the
@tailwindcss/postcssplugin, which is required for Tailwind CSS v4.e2e/solid-router/sentry-integration/tsconfig.json (1)
1-15: LGTM! TypeScript configuration is correct.The configuration properly enables strict mode and uses appropriate settings for a Solid.js project with Vite bundler.
As per coding guidelines.
e2e/solid-router/sentry-integration/package.json (1)
18-19: LGTM! Internal dependencies use correct format.The internal TanStack packages correctly use the
workspace:^protocol as required by the coding guidelines.As per coding guidelines.
e2e/solid-router/sentry-integration/tests/app.spec.ts (1)
1-10: LGTM! Clean and focused e2e test.The test properly validates the basic functionality of the integration example by checking for the expected heading.
e2e/solid-router/sentry-integration/index.html (1)
1-12: LGTM! Standard Vite entry point.The HTML file correctly sets up the application entry point for a Vite-based Solid.js project.
e2e/solid-router/sentry-integration/src/styles.css (1)
1-21: LGTM! Tailwind CSS v4 compatible styles.The stylesheet correctly uses Tailwind v4 syntax:
@import 'tailwindcss'(replaces the old@tailwinddirectives)- CSS variables with parentheses
var(--color-gray-200, currentcolor)- Proper
@applyusage with v4-compatible utilitiesBased on learnings.
e2e/solid-router/sentry-integration/src/main.tsx (1)
1-92: LGTM! Well-structured Sentry integration example.The implementation correctly demonstrates:
- Proper Sentry initialization with
tanstackRouterBrowserTracingIntegration- Custom transport stub to prevent actual telemetry sends in e2e tests
- Type-safe router configuration with module augmentation
- Appropriate null-checking before DOM rendering
- Clean Solid.js component structure with router outlets and devtools
e2e/solid-router/sentry-integration/playwright.config.ts (1)
1-34: LGTM! Proper Playwright configuration for e2e testing.The configuration correctly:
- Uses modern import assertion syntax (
with { type: 'json' })- Derives dynamic port from utility to avoid conflicts
- Injects the port into both build and serve commands via environment variables
- Restricts parallelism with
workers: 1for e2e stability- Configures appropriate server reuse behavior for CI vs local development
| "@sentry/solid": "^10.22.0", | ||
| "@sentry/tracing": "^7.120.3", |
There was a problem hiding this comment.
🧩 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.
| 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()], | ||
| }) |
There was a problem hiding this comment.
Convert to TypeScript for consistency with coding guidelines.
The coding guidelines specify using TypeScript in strict mode across the codebase. This configuration file should be renamed to vite.config.ts and properly typed.
As per coding guidelines.
Apply this change:
-// vite.config.js
+// vite.config.ts
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()],
})Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In e2e/solid-router/sentry-integration/vite.config.js around lines 1 to 8,
convert this Vite config to TypeScript by renaming the file to vite.config.ts,
update imports to use TypeScript (import { defineConfig } from 'vite' and import
solid from 'vite-plugin-solid'; keep sentryVitePlugin from
'@sentry/vite-plugin'), and export the config with proper typing via
defineConfig(...) so the file is in strict mode; ensure tsconfig.json includes
this file (or is configured to allow .ts Vite configs) and fix any type errors
by adding explicit option types where needed (e.g., cast or annotate plugin
array) so the file compiles under TypeScript strict mode.
|
|
||
| // https://vitejs.dev/config/ | ||
| export default defineConfig({ | ||
| plugins: [solid(), sentryVitePlugin()], |
There was a problem hiding this comment.
🧩 Analysis chain
Verify sentryVitePlugin configuration requirements.
The sentryVitePlugin() is called without any configuration options. While this may be acceptable for e2e testing purposes, verify that the plugin doesn't require at minimum configuration such as source map upload settings or telemetry options. If source map generation is needed for the integration test, additional options may be required.
🏁 Script executed:
#!/bin/bash
# Check if other e2e examples configure sentryVitePlugin with options
rg -n "sentryVitePlugin" --type=js --type=ts -C3Length of output: 1323
I need to verify the sentryVitePlugin documentation to understand its configuration requirements and whether it works with defaults.
🌐 Web query:
Sentry Vite Plugin configuration requirements default options
💡 Result:
Brief summary — key configuration requirements and default options for the official @sentry/vite-plugin:
-
Required build setting
- build.sourcemap: true (Vite must generate sourcemaps for upload). [1][2]
-
Common plugin options (how to provide them)
- org (string) — Sentry org slug (can be set via SENTRY_ORG env var). [1][3]
- project (string) — Sentry project slug (can be set via SENTRY_PROJECT env var). [1][3]
- authToken (string) — token with project:releases (and org:read if using setCommits). Can be SENTRY_AUTH_TOKEN env var or .env file. [1][2]
-
Important defaults
- url: "https://sentry.io/" (default for SaaS). [1][3]
- disable: false (plugin enabled by default). [1]
- debug: false (verbose logs off). [3]
- silent: false (logs not suppressed). [3]
- sourcemaps.ignore: [] (no ignores by default). [1]
- sourcemaps.assets: if unspecified, plugin attempts to upload all generated .js and .map files. [1]
- _experiments.injectBuildInformation: false by default. [1]
-
Notes on required/conditional fields
- include (paths) is required when using older v0.x docs (specifies paths/globs to upload); current plugin will try to infer upload candidates if assets not provided, but explicitly setting include/assets is recommended. [1][3]
- setCommits options / release creation may require additional scopes and either auto-detection or explicit commit/repo values. [1][2]
- You can supply configuration via env vars, a .env.sentry-build-plugin file, or a .sentryclirc as alternative to passing all options in vite.config. [2]
Sources:
- @sentry/vite-plugin package docs (options, defaults, example usage). [1]
- Sentry docs: Vite / sourcemaps & auth token guidance. [2]
- @sentry/vite-plugin option details (headers, debug, silent, errorHandler). [3]
Let me verify if the vite.config.js file has the required build.sourcemap setting:
I found a critical issue. Let me check the complete vite.config.js file to confirm:
Add build.sourcemap: true to enable source map generation for Sentry.
The Sentry Vite Plugin requires build.sourcemap: true in your Vite configuration to generate source maps. The current configuration lacks this build setting, which prevents source maps from being generated and uploaded to Sentry during the build process.
Add the following to your vite.config.js:
export default defineConfig({
build: {
sourcemap: true,
},
plugins: [solid(), sentryVitePlugin()],
})The sentryVitePlugin() call without explicit options is acceptable for e2e testing, as configuration can be provided via environment variables.
🤖 Prompt for AI Agents
In e2e/solid-router/sentry-integration/vite.config.js around line 7, the Vite
config is missing build.sourcemap: true which prevents source maps from being
generated and uploaded to Sentry; update the exported defineConfig to include a
build section with sourcemap set to true (i.e., add build: { sourcemap: true }
alongside the existing plugins array) so the Sentry Vite plugin can produce and
upload source maps during the build.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
e2e/react-router/sentry-integration/package.json (1)
14-24: Consider using exact versions for e2e test reproducibility.E2E tests benefit from deterministic dependencies to avoid flakiness. The caret ranges (^) for Sentry packages and other dependencies allow minor/patch version updates that could introduce subtle behavior changes. Consider pinning to exact versions (or using fixed ranges) for critical test dependencies.
- "@sentry/react": "^10.22.0", - "@sentry/tracing": "^7.120.3", - "@sentry/vite-plugin": "^3.1.2", + "@sentry/react": "10.22.0", + "@sentry/tracing": "7.120.3", + "@sentry/vite-plugin": "3.1.2",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
e2e/react-router/sentry-integration/package.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
e2e/react-router/sentry-integration/package.json
e2e/**
📄 CodeRabbit inference engine (AGENTS.md)
Store end-to-end tests under the e2e/ directory
Files:
e2e/react-router/sentry-integration/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (1)
e2e/react-router/sentry-integration/package.json (1)
18-19: Workspace protocol correctly applied.The internal dependencies (@tanstack/react-router, @tanstack/react-router-devtools, @tanstack/router-e2e-utils) correctly use the
workspace:^protocol per coding guidelines.Also applies to: 28-28
| "@sentry/react": "^10.22.0", | ||
| "@sentry/tracing": "^7.120.3", | ||
| "@sentry/vite-plugin": "^3.1.2", |
There was a problem hiding this comment.
🧩 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.
1 participant
port over from react, using the new Sentry support for Solid
Summary by CodeRabbit
New Features
Documentation
Chores