Skip to content

Commit 1f25c76

Browse files
andreiborzaandreiborza
committed
feat(vue): Add TanStack Router integration
1 parent ad28c4d commit 1f25c76

26 files changed

+1000
-6
lines changed

‎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: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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+
- TanStack Router browser tracing integration
44+
- Pageload transaction tracking with parameterized routes
45+
- Navigation transaction tracking
46+
- Route parameter extraction and span attribution
47+
48+
## Testing
49+
50+
The E2E tests verify:
51+
1. Pageload transactions are created with correct route parameters
52+
2. Navigation transactions are properly instrumented
53+
3. Route parameters are captured in transaction data
54+
4. Sentry origins are correctly set for Vue TanStack Router
55+
56+
## Learn More
57+
58+
- [TanStack Router Documentation](https://tanstack.com/router)
59+
- [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: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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">
13+
Post 2
14+
</Link>
15+
</li>
16+
</ul>
17+
</nav>
18+
<hr />
19+
<Outlet />
20+
</div>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import { Link, Outlet } from '@tanstack/vue-router';
25+
</script>
26+
27+
<style scoped>
28+
nav ul {
29+
list-style: none;
30+
padding: 0;
31+
display: flex;
32+
gap: 1rem;
33+
}
34+
35+
nav li {
36+
display: inline;
37+
}
38+
39+
nav a {
40+
color: #42b983;
41+
text-decoration: none;
42+
}
43+
44+
nav a:hover {
45+
text-decoration: underline;
46+
}
47+
</style>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="home">
3+
<h1>Vue + TanStack Router</h1>
4+
<p>Welcome to the Sentry E2E Test App!</p>
5+
</div>
6+
</template>
7+
8+
<style scoped>
9+
.home {
10+
margin: 2rem 0;
11+
}
12+
13+
h1 {
14+
color: #42b983;
15+
}
16+
</style>

0 commit comments

Comments
 (0)