Skip to content

Commit 968e529

Browse files
andreiborzaandreiborza
authored
feat(vue): Add TanStack Router integration (#18547)
Closes: #18535
1 parent 97e0be0 commit 968e529

29 files changed

+1043
-8
lines changed

‎CHANGELOG.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,28 @@
44

55
- "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
66

7+
- **feat(vue): Add TanStack Router integration ([#18359](https://github.com/getsentry/sentry-javascript/pull/18359))**
8+
9+
The `@sentry/vue` package now includes support for TanStack Router. Use `tanstackRouterBrowserTracingIntegration` to automatically instrument pageload and navigation transactions with parameterized routes:
10+
11+
```javascript
12+
import { createApp } from 'vue';
13+
import { createRouter } from '@tanstack/vue-router';
14+
import * as Sentry from '@sentry/vue';
15+
import { tanstackRouterBrowserTracingIntegration } from '@sentry/vue/tanstackrouter';
16+
17+
const router = createRouter({
18+
// your router config
19+
});
20+
21+
Sentry.init({
22+
app,
23+
dsn: '__PUBLIC_DSN__',
24+
integrations: [tanstackRouterBrowserTracingIntegration(router)],
25+
tracesSampleRate: 1.0,
26+
});
27+
```
28+
729
- **feat(nextjs): Add tree-shaking configuration to `webpack` build config ([#18359](https://github.com/getsentry/sentry-javascript/pull/18359))**
830

931
- **feat(replay): Add Request body with `attachRawBodyFromRequest` option ([#18501](https://github.com/getsentry/sentry-javascript/pull/18501))**

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/.gitignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
# Playwright
27+
/test-results/
28+
/playwright-report/
29+
/blob-report/
30+
/playwright/.cache/

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@sentry:registry=http://127.0.0.1:4873
2+
@sentry-internal:registry=http://127.0.0.1:4873

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Vue TanStack Router E2E Test App
2+
3+
E2E test application for `@sentry/vue` with TanStack Router integration.
4+
5+
## Getting Started
6+
7+
To run this application:
8+
9+
```bash
10+
pnpm install
11+
pnpm dev
12+
```
13+
14+
## Building For Production
15+
16+
To build this application for production:
17+
18+
```bash
19+
pnpm build
20+
```
21+
22+
## Running Tests
23+
24+
To run E2E tests:
25+
26+
```bash
27+
pnpm test:build # Install deps and build
28+
pnpm test:assert # Run Playwright tests
29+
```
30+
31+
## Routing
32+
33+
This project uses [TanStack Router](https://tanstack.com/router) for Vue.js. The router is set up with code-based routing in the `./src/main.ts` file.
34+
35+
### Routes
36+
37+
- `/` - Home page with navigation links
38+
- `/posts/$postId` - Post detail page with parameterized route
39+
40+
### Sentry Integration
41+
42+
The app demonstrates:
43+
44+
- TanStack Router browser tracing integration
45+
- Pageload transaction tracking with parameterized routes
46+
- Navigation transaction tracking
47+
- Route parameter extraction and span attribution
48+
49+
## Testing
50+
51+
The E2E tests verify:
52+
53+
1. Pageload transactions are created with correct route parameters
54+
2. Navigation transactions are properly instrumented
55+
3. Route parameters are captured in transaction data
56+
4. Sentry origins are correctly set for Vue TanStack Router
57+
58+
## Learn More
59+
60+
- [TanStack Router Documentation](https://tanstack.com/router)
61+
- [Sentry Vue SDK](https://docs.sentry.io/platforms/javascript/guides/vue/)

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta name="description" content="Vue TanStack Router E2E Test App" />
9+
<title>Vue TanStack Router - Sentry E2E Tests</title>
10+
</head>
11+
<body>
12+
<div id="app"></div>
13+
<script type="module" src="/src/main.ts"></script>
14+
</body>
15+
</html>

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "vue-tanstack-router",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"build": "vite build",
7+
"clean": "npx rimraf node_modules pnpm-lock.yaml dist",
8+
"dev": "vite",
9+
"start": "vite preview",
10+
"preview": "vite preview",
11+
"test:prod": "TEST_ENV=production playwright test",
12+
"test:build": "pnpm install && pnpm build",
13+
"test:assert": "pnpm test:prod"
14+
},
15+
"dependencies": {
16+
"@sentry/vue": "latest || *",
17+
"@tanstack/vue-router": "^1.64.0",
18+
"vue": "^3.4.15"
19+
},
20+
"devDependencies": {
21+
"@playwright/test": "~1.56.0",
22+
"@sentry-internal/test-utils": "link:../../../test-utils",
23+
"@tsconfig/node20": "^20.1.2",
24+
"@types/node": "^18.19.1",
25+
"@vitejs/plugin-vue": "^5.0.3",
26+
"@vue/tsconfig": "^0.5.1",
27+
"typescript": "~5.3.0",
28+
"vite": "^5.4.11"
29+
},
30+
"volta": {
31+
"extends": "../../package.json"
32+
}
33+
}

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/playwright.config.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { getPlaywrightConfig } from '@sentry-internal/test-utils';
2+
3+
const config = getPlaywrightConfig({
4+
startCommand: 'pnpm preview --port 4173',
5+
port: 4173,
6+
});
7+
8+
export default config;

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/public/favicon.ico‎

4.19 KB
Binary file not shown.

‎dev-packages/e2e-tests/test-applications/vue-tanstack-router/src/App.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div>
3+
<nav>
4+
<ul>
5+
<li>
6+
<Link to="/">Home</Link>
7+
</li>
8+
<li>
9+
<Link to="/posts/$postId" :params="{ postId: '1' }">Post 1</Link>
10+
</li>
11+
<li>
12+
<Link to="/posts/$postId" :params="{ postId: '2' }" id="nav-link"> Post 2 </Link>
13+
</li>
14+
</ul>
15+
</nav>
16+
<hr />
17+
<Outlet />
18+
</div>
19+
</template>
20+
21+
<script setup lang="ts">
22+
import { Link, Outlet } from '@tanstack/vue-router';
23+
</script>
24+
25+
<style scoped>
26+
nav ul {
27+
list-style: none;
28+
padding: 0;
29+
display: flex;
30+
gap: 1rem;
31+
}
32+
33+
nav li {
34+
display: inline;
35+
}
36+
37+
nav a {
38+
color: #42b983;
39+
text-decoration: none;
40+
}
41+
42+
nav a:hover {
43+
text-decoration: underline;
44+
}
45+
</style>

0 commit comments

Comments
 (0)