Fix lint issues

Author: andreiborza

CHANGELOG.md

@@ -4,6 +4,28 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+- **feat(vue): Add TanStack Router integration ([#18359](https://github.com/getsentry/sentry-javascript/pull/18359))**
+
+The `@sentry/vue` package now includes support for TanStack Router. Use `tanstackRouterBrowserTracingIntegration` to automatically instrument pageload and navigation transactions with parameterized routes:
+
+```javascript
+import { createApp } from 'vue';
+import { createRouter } from '@tanstack/vue-router';
+import * as Sentry from '@sentry/vue';
+import { tanstackRouterBrowserTracingIntegration } from '@sentry/vue/tanstackrouter';
+
+const router = createRouter({
+  // your router config
+});
+
+Sentry.init({
+  app,
+  dsn: '__PUBLIC_DSN__',
+  integrations: [tanstackRouterBrowserTracingIntegration(router)],
+  tracesSampleRate: 1.0,
+});
+```
+
 - **feat(nextjs): Add tree-shaking configuration to `webpack` build config ([#18359](https://github.com/getsentry/sentry-javascript/pull/18359))**
 
 - **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/README.md

@@ -40,6 +40,7 @@ This project uses [TanStack Router](https://tanstack.com/router) for Vue.js. The
 ### Sentry Integration
 
 The app demonstrates:
+
 - TanStack Router browser tracing integration
 - Pageload transaction tracking with parameterized routes
 - Navigation transaction tracking
@@ -48,6 +49,7 @@ The app demonstrates:
 ## Testing
 
 The E2E tests verify:
+
 1. Pageload transactions are created with correct route parameters
 2. Navigation transactions are properly instrumented
 3. Route parameters are captured in transaction data

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

@@ -9,9 +9,7 @@
           <Link to="/posts/$postId" :params="{ postId: '1' }">Post 1</Link>
         </li>
         <li>
-          <Link to="/posts/$postId" :params="{ postId: '2' }" id="nav-link">
-            Post 2
-          </Link>
+          <Link to="/posts/$postId" :params="{ postId: '2' }" id="nav-link"> Post 2 </Link>
         </li>
       </ul>
     </nav>

packages/vue/src/pinia.ts

@@ -2,7 +2,7 @@ import { addBreadcrumb, addNonEnumerableProperty, getClient, getCurrentScope, ge
 import type { Ref } from 'vue';
 
 // Inline Pinia types
-type StateTree = Record<string | number | symbol, any>;
+type StateTree = Record<string | number | symbol, unknown>;
 type PiniaPlugin = (context: {
   store: {
     $id: string;
@@ -15,8 +15,8 @@ type PiniaPlugin = (context: {
 type SentryPiniaPluginOptions = {
   attachPiniaState: boolean;
   addBreadcrumbs: boolean;
-  actionTransformer: (action: string) => any;
-  stateTransformer: (state: Record<string, unknown>) => any;
+  actionTransformer: (action: string) => unknown;
+  stateTransformer: (state: Record<string, unknown>) => unknown;
 };
 
 const DEFAULT_PINIA_PLUGIN_OPTIONS: SentryPiniaPluginOptions = {

packages/vue/src/tanstackrouter.ts

@@ -43,13 +43,16 @@ export function tanstackRouterBrowserTracingIntegration<R extends AnyRouter>(
       if (instrumentPageLoad && initialWindowLocation) {
         const matchedRoutes = router.matchRoutes(
           initialWindowLocation.pathname,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           router.options.parseSearch(initialWindowLocation.search),
           { preload: false, throwOnError: false },
         );
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         const lastMatch = matchedRoutes[matchedRoutes.length - 1];
 
         startBrowserTracingPageLoadSpan(client, {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           name: lastMatch ? lastMatch.routeId : initialWindowLocation.pathname,
           attributes: {
             [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
@@ -66,23 +69,30 @@ export function tanstackRouterBrowserTracingIntegration<R extends AnyRouter>(
           // onBeforeNavigate is called during pageloads. We can avoid creating navigation spans by:
           // 1. Checking if there's no fromLocation (initial pageload)
           // 2. Comparing the states of the to and from arguments
+           
           if (
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             !onBeforeNavigateArgs.fromLocation ||
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             onBeforeNavigateArgs.toLocation.state === onBeforeNavigateArgs.fromLocation.state
           ) {
             return;
           }
 
           const onResolvedMatchedRoutes = router.matchRoutes(
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             onBeforeNavigateArgs.toLocation.pathname,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             onBeforeNavigateArgs.toLocation.search,
             { preload: false, throwOnError: false },
           );
 
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           const onBeforeNavigateLastMatch = onResolvedMatchedRoutes[onResolvedMatchedRoutes.length - 1];
 
           const navigationLocation = WINDOW.location;
           const navigationSpan = startBrowserTracingNavigationSpan(client, {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             name: onBeforeNavigateLastMatch ? onBeforeNavigateLastMatch.routeId : navigationLocation.pathname,
             attributes: {
               [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
@@ -96,14 +106,18 @@ export function tanstackRouterBrowserTracingIntegration<R extends AnyRouter>(
             unsubscribeOnResolved();
             if (navigationSpan) {
               const onResolvedMatchedRoutes = router.matchRoutes(
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                 onResolvedArgs.toLocation.pathname,
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                 onResolvedArgs.toLocation.search,
                 { preload: false, throwOnError: false },
               );
 
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
               const onResolvedLastMatch = onResolvedMatchedRoutes[onResolvedMatchedRoutes.length - 1];
 
               if (onResolvedLastMatch) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                 navigationSpan.updateName(onResolvedLastMatch.routeId);
                 navigationSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
                 navigationSpan.setAttributes(routeMatchToParamSpanAttributes(onResolvedLastMatch));
@@ -122,6 +136,7 @@ function routeMatchToParamSpanAttributes(match: RouteMatch | undefined): Record<
   }
 
   const paramAttributes: Record<string, string> = {};
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   Object.entries(match.params as Record<string, string>).forEach(([key, value]) => {
     paramAttributes[`url.path.parameter.${key}`] = value;
     paramAttributes[`params.${key}`] = value; // params.[key] is an alias

packages/vue/test/tanstackrouter.test.ts

@@ -76,12 +76,12 @@ describe('tanstackRouterBrowserTracingIntegration', () => {
   });
 
   it('creates an integration with the correct name', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter);
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter );
     expect(integration.name).toBe('BrowserTracing');
   });
 
   it('instruments pageload on setup', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter, {
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter , {
       instrumentPageLoad: true,
     });
 
@@ -109,7 +109,7 @@ describe('tanstackRouterBrowserTracingIntegration', () => {
   });
 
   it('does not instrument pageload when instrumentPageLoad is false', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter, {
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter , {
       instrumentPageLoad: false,
     });
 
@@ -119,7 +119,7 @@ describe('tanstackRouterBrowserTracingIntegration', () => {
   });
 
   it('subscribes to router navigation events when instrumentNavigation is true', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter, {
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter , {
       instrumentNavigation: true,
     });
 
@@ -129,7 +129,7 @@ describe('tanstackRouterBrowserTracingIntegration', () => {
   });
 
   it('does not subscribe to navigation events when instrumentNavigation is false', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter, {
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter , {
       instrumentNavigation: false,
     });
 
@@ -140,7 +140,7 @@ describe('tanstackRouterBrowserTracingIntegration', () => {
   });
 
   it('creates navigation spans with correct attributes', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter, {
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter , {
       instrumentNavigation: true,
       instrumentPageLoad: false, // Disable pageload to isolate navigation test
     });
@@ -179,7 +179,7 @@ describe('tanstackRouterBrowserTracingIntegration', () => {
   });
 
   it('skips navigation span creation when state is the same', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter, {
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter , {
       instrumentNavigation: true,
       instrumentPageLoad: false,
     });
@@ -208,7 +208,7 @@ describe('tanstackRouterBrowserTracingIntegration', () => {
   });
 
   it('updates navigation span on redirect using onResolved', () => {
-    const integration = tanstackRouterBrowserTracingIntegration(mockRouter as AnyRouter, {
+    const integration = tanstackRouterBrowserTracingIntegration(mockRouter , {
       instrumentNavigation: true,
       instrumentPageLoad: false,
     });