test(vue-router): sentry integration with tanstackRouterBrowserTracingIntegration #6139
Conversation
WalkthroughSentry dependencies are updated across three e2e framework integration packages (React Router, Solid Router, Vue Router) with corresponding version bumps. The Vue Router integration also enables the TanStack Router tracing integration by uncommenting its configuration in the main initialization file. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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 6ac859e
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
e2e/react-router/sentry-integration/package.json(1 hunks)e2e/solid-router/sentry-integration/package.json(1 hunks)e2e/vue-router/sentry-integration/package.json(1 hunks)e2e/vue-router/sentry-integration/src/main.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript strict mode with extensive type safety for all code
Files:
e2e/vue-router/sentry-integration/src/main.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Implement ESLint rules for router best practices using the ESLint plugin router
Files:
e2e/vue-router/sentry-integration/src/main.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace protocol
workspace:*for internal dependencies in package.json files
Files:
e2e/vue-router/sentry-integration/package.jsone2e/solid-router/sentry-integration/package.jsone2e/react-router/sentry-integration/package.json
🧠 Learnings (4)
📓 Common learnings
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
e2e/vue-router/sentry-integration/src/main.tsx
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
e2e/vue-router/sentry-integration/src/main.tsx
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
e2e/vue-router/sentry-integration/src/main.tsx
⏰ 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 (4)
e2e/react-router/sentry-integration/package.json (1)
14-16: Dependency updates look consistent with other e2e packages.The Sentry dependency updates align with the changes in other e2e integration packages. Note that the
@sentry/vite-pluginmajor version bump from 3.x to 4.x requires verification for breaking changes (as flagged in the solid-router package review).e2e/vue-router/sentry-integration/package.json (1)
14-16: Dependency updates align with the TanStack Router integration.The Sentry dependency updates are consistent with other e2e packages and enable the
tanstackRouterBrowserTracingIntegrationused inmain.tsx. Note that the @sentry/core version conflict (10.32.0 vs 10.31.0) reported in the PR objectives should be investigated to resolve TypeScript errors (flagged in the main.tsx review).e2e/vue-router/sentry-integration/src/main.tsx (1)
3-3: Replace the incorrect import from @sentry/vue with @sentry/react.The import path
@sentry/vue/tanstackrouterdoes not exist. The TanStack Router integration is included in the @sentry/react package, and @sentry/vue is a wrapper around @sentry/browser, with added functionality related to Vue.js. Useimport { tanstackRouterBrowserTracingIntegration } from '@sentry/react'instead, though note that TanStack Router is designed for React applications, not Vue.⛔ Skipped due to learnings
Learnt from: nlynzaad Repo: TanStack/router PR: 5732 File: packages/start-client-core/src/client/hydrateStart.ts:6-9 Timestamp: 2025-11-02T16:16:24.898Z Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.e2e/solid-router/sentry-integration/package.json (1)
14-16: Major version bump requires validation against solid-router integration.The upgrade from
@sentry/vite-plugin@^3.1.2to^4.6.1is a major version bump. While no documented breaking changes specific to the v3.x to v4.x transition are available in the official Sentry migration guide, major version upgrades should be validated to ensure compatibility with the solid-router integration and current Sentry configuration. Verify that the vite plugin configuration is compatible with v4.x before merging.
| Sentry.init({ | ||
| dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', | ||
| // integrations: [tanstackRouterBrowserTracingIntegration(router)], | ||
| integrations: [tanstackRouterBrowserTracingIntegration(router)], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cd e2e/vue-router/sentry-integration && find . -name "package.json" -o -name "pnpm-lock.yaml" | head -20Repository: TanStack/router
Length of output: 73
🏁 Script executed:
cd e2e/vue-router/sentry-integration && cat package.json | grep -A 20 '"dependencies"'Repository: TanStack/router
Length of output: 649
🏁 Script executed:
head -100 e2e/vue-router/sentry-integration/src/main.tsxRepository: TanStack/router
Length of output: 2112
🏁 Script executed:
cd e2e/vue-router/sentry-integration && pnpm why @sentry/core 2>&1 | head -50Repository: TanStack/router
Length of output: 41
🏁 Script executed:
cd e2e/vue-router/sentry-integration && ls -la | grep -E "(pnpm|yarn|package|lock)"Repository: TanStack/router
Length of output: 120
🏁 Script executed:
cd e2e/vue-router/sentry-integration && pnpm list @sentry/core @sentry/vue 2>&1Repository: TanStack/router
Length of output: 41
🏁 Script executed:
cd e2e/vue-router/sentry-integration && find ../../../ -maxdepth 2 -name "pnpm-lock.yaml" -o -name ".pnpmfile.cjs" | head -5Repository: TanStack/router
Length of output: 82
🏁 Script executed:
cat e2e/vue-router/sentry-integration/package.json | jq '.dependencies'Repository: TanStack/router
Length of output: 381
🏁 Script executed:
# Check if there's a root lock file and what Sentry versions it specifies
find . -maxdepth 3 -name "pnpm-lock.yaml" | xargs grep -l "@sentry" 2>/dev/null | head -1Repository: TanStack/router
Length of output: 75
🏁 Script executed:
grep -A 5 "@sentry/vue@^10.32.0" pnpm-lock.yaml | head -20Repository: TanStack/router
Length of output: 41
🏁 Script executed:
grep -E "@sentry/(core|vue|tracing)@" pnpm-lock.yaml | grep "^ /@sentry" | sort -uRepository: TanStack/router
Length of output: 41
🏁 Script executed:
# Extract the actual resolved versions from the lock file
grep -A 2 "version: 10\." pnpm-lock.yaml | grep -E "(^ /@sentry|version:)" | head -20Repository: TanStack/router
Length of output: 802
🏁 Script executed:
# Find the @sentry/vue@10.32.0 entry and see what @sentry/core it depends on
grep -A 20 "/@sentry/vue@10.32.0.*vue-router" pnpm-lock.yaml | head -30Repository: TanStack/router
Length of output: 41
🏁 Script executed:
# Check all Sentry package versions in lock file
grep "/@sentry/" pnpm-lock.yaml | grep "version:" | sort -uRepository: TanStack/router
Length of output: 41
🏁 Script executed:
# Look for @sentry/core versions specifically
grep -B 2 "/@sentry/core@" pnpm-lock.yaml | grep -E "(/@sentry/core|version:)" | head -10Repository: TanStack/router
Length of output: 41
🏁 Script executed:
# Let's read the lock file structure around the Sentry entries
head -100 pnpm-lock.yaml | grep -E "(sentry|version|dependencies)"Repository: TanStack/router
Length of output: 852
🏁 Script executed:
# Try to find @sentry entries with a simpler pattern
grep "@sentry" pnpm-lock.yaml | head -20Repository: TanStack/router
Length of output: 709
🏁 Script executed:
# Look at the raw structure of the lock file
sed -n '1,50p' pnpm-lock.yamlRepository: TanStack/router
Length of output: 1821
🏁 Script executed:
# Find @sentry/core entries in the lock file
grep -A 10 "/@sentry/core@" pnpm-lock.yaml | head -40Repository: TanStack/router
Length of output: 41
🏁 Script executed:
# Find all sentry package versions
grep "^ /@sentry" pnpm-lock.yaml | grep -oE "@sentry/[^@]+@[0-9.]+" | sort -uRepository: TanStack/router
Length of output: 41
🏁 Script executed:
# Check for version conflicts - look for multiple @sentry/core versions
grep "/@sentry/core@" pnpm-lock.yamlRepository: TanStack/router
Length of output: 41
🏁 Script executed:
# Search more broadly for sentry entries
grep -i sentry pnpm-lock.yaml | head -30Repository: TanStack/router
Length of output: 1048
🏁 Script executed:
# Look for dependencies under @sentry/vue
grep -A 30 "/@sentry/vue@10.32.0" pnpm-lock.yaml | grep -E "(dependencies|@sentry)"Repository: TanStack/router
Length of output: 41
🏁 Script executed:
# Check if @sentry/core is listed as a dependency anywhere
grep -C 5 "dependencies:" pnpm-lock.yaml | grep -A 3 "@sentry" | head -20Repository: TanStack/router
Length of output: 549
🏁 Script executed:
# Search for @sentry/core in the lock file more carefully
python3 << 'EOF'
import re
with open('pnpm-lock.yaml', 'r') as f:
content = f.read()
# Find all @sentry/core entries
matches = re.findall(r'@sentry/core@[\d.]+.*?(?=\n [@a-z]|\npackages:|\Z)', content, re.DOTALL)
for i, match in enumerate(matches[:3]):
print(f"=== Match {i+1} ===")
print(match[:500])
print()
EOFRepository: TanStack/router
Length of output: 145
🏁 Script executed:
# Check what @sentry/tracing depends on
grep -A 20 "/@sentry/tracing@7.120.4" pnpm-lock.yaml | head -25Repository: TanStack/router
Length of output: 41
🏁 Script executed:
# List all @sentry packages and their dependencies in a cleaner way
python3 << 'EOF'
import yaml
with open('pnpm-lock.yaml', 'r') as f:
data = yaml.safe_load(f)
if 'packages' in data:
for pkg_name in sorted(data['packages'].keys()):
if '@sentry' in pkg_name and 'core' in pkg_name.lower():
print(f"{pkg_name}:")
pkg = data['packages'][pkg_name]
if 'dependencies' in pkg:
for dep, version in pkg['dependencies'].items():
print(f" {dep}: {version}")
print()
EOFRepository: TanStack/router
Length of output: 145
🏁 Script executed:
# Simple grep to check @sentry/tracing dependencies
grep -A 15 "'/@sentry/tracing@7.120.4'" pnpm-lock.yaml | head -20Repository: TanStack/router
Length of output: 41
🏁 Script executed:
# Count how many times each @sentry/core version appears
grep "@sentry/core@" pnpm-lock.yaml | wc -lRepository: TanStack/router
Length of output: 60
🏁 Script executed:
# Get the exact @sentry/core line
grep "/@sentry/core@" pnpm-lock.yamlRepository: TanStack/router
Length of output: 41
🏁 Script executed:
# Search for @sentry/core without the slash
grep "@sentry/core@" pnpm-lock.yamlRepository: TanStack/router
Length of output: 165
🏁 Script executed:
# Check @sentry/vue dependencies to see what core version it needs
grep -A 30 "^ '@sentry/vue@10.32.0" pnpm-lock.yaml | grep -E "(dependencies|@sentry/core)"Repository: TanStack/router
Length of output: 178
🏁 Script executed:
# Look at the actual structure around the sentry entries
sed -n '/^ '@sentry/core@10.32.0/,/^ [^ ]/p' pnpm-lock.yaml | head -20Repository: TanStack/router
Length of output: 127
🏁 Script executed:
# Check what @sentry/tracing@7.120.4 depends on
grep -A 20 "^ '@sentry/tracing@7.120.4" pnpm-lock.yaml | grep -E "(dependencies|@sentry)"Repository: TanStack/router
Length of output: 666
🏁 Script executed:
# Get the full entry for @sentry/core@7.120.4
grep -A 5 "^ '@sentry/core@7.120.4" pnpm-lock.yamlRepository: TanStack/router
Length of output: 540
🏁 Script executed:
# Confirm the vue-router sentry integration is actually using these versions
cd e2e/vue-router/sentry-integration && cat package.jsonRepository: TanStack/router
Length of output: 986
Update @sentry/tracing to v10 to resolve the @sentry/core version conflict.
The dependency tree includes both @sentry/vue@10.32.0 (which requires @sentry/core@10.32.0) and @sentry/tracing@7.120.4 (which requires @sentry/core@7.120.4). This version mismatch causes TypeScript Integration type incompatibilities. Upgrade @sentry/tracing to v10 to align all Sentry packages to the same major version.
🤖 Prompt for AI Agents
In e2e/vue-router/sentry-integration/src/main.tsx around line 80, the
integrations array is using @sentry/tracing v7 which conflicts with @sentry/vue
v10; update your project dependency @sentry/tracing to a v10 release (matching
@sentry/core v10.x) in package.json, run npm/yarn install, update any import
paths or API usages in this file if the v10 tracing integration has different
names or signatures (adjust the integration call to the v10 equivalent), then
rebuild and verify TypeScript compiles with the unified @sentry core types.
birkskyum
deleted the
vue-router--tanstackRouterBrowserTracingIntegration-sentry
branch
Add
tanstackRouterBrowserTracingIntegrationto the vue-router sentry-integrationSummary by CodeRabbit
Chores
New Features
✏️ Tip: You can customize this high-level summary in your review settings.