Add tanstackrouter export, remove vendored types

Author: andreiborza

packages/solid/README.md

@@ -52,6 +52,43 @@ render(
 );
 ```
 
+### Tanstack Router
+
+The Tanstack Router instrumentation uses the Tanstack Router library to create navigation spans to ensure you collect
+meaningful performance data about the health of your page loads and associated requests.
+
+Add `tanstackRouterBrowserTracingIntegration` instead of the regular `Sentry.browserTracingIntegration`.
+
+Make sure `tanstackRouterBrowserTracingIntegration` is initialized by your `Sentry.init` call. Otherwise, the routing
+instrumentation will not work properly.
+
+Pass your router instance from `createRouter` to the integration.
+
+```js
+import * as Sentry from '@sentry/solid';
+import { tanstackRouterBrowserTracingIntegration } from '@sentry/solid/tanstackrouter';
+import { Route, Router } from '@solidjs/router';
+
+const router = createRouter({
+  // your router config
+  // ...
+});
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+Sentry.init({
+  dsn: '__PUBLIC_DSN__',
+  integrations: [tanstackRouterBrowserTracingIntegration(router)],
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+});
+
+render(() => <App />, document.getElementById('root'));
+```
+
 # Solid ErrorBoundary
 
 To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid

packages/solid/package.json

@@ -39,7 +39,7 @@
         "default": "./build/cjs/solidrouter.js"
       }
     },
-    "./tanstack-router": {
+    "./tanstackrouter": {
       "import": {
         "types": "./tanstackrouter.d.ts",
         "default": "./build/esm/tanstackrouter.js"
@@ -59,15 +59,20 @@
   },
   "peerDependencies": {
     "@solidjs/router": "^0.13.4",
+    "@tanstack/solid-router": "^1.132.27",
     "solid-js": "^1.8.4"
   },
   "peerDependenciesMeta": {
     "@solidjs/router": {
       "optional": true
+    },
+    "@tanstack/solid-router": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@solidjs/router": "^0.13.4",
+    "@tanstack/solid-router": "^1.132.27",
     "@solidjs/testing-library": "0.8.5",
     "@testing-library/dom": "^7.21.4",
     "@testing-library/jest-dom": "^6.4.5",
@@ -80,15 +85,15 @@
     "build": "run-p build:transpile build:types",
     "build:dev": "yarn build",
     "build:transpile": "rollup -c rollup.npm.config.mjs",
-    "build:types": "run-s build:types:core build:types:solidrouter",
+    "build:types": "run-s build:types:core build:types:routers",
     "build:types:core": "tsc -p tsconfig.types.json",
-    "build:types:solidrouter": "tsc -p tsconfig.solidrouter-types.json",
+    "build:types:routers": "tsc -p tsconfig.routers-types.json",
     "build:watch": "run-p build:transpile:watch build:types:watch",
     "build:dev:watch": "yarn build:watch",
     "build:transpile:watch": "rollup -c rollup.npm.config.mjs --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:tarball": "npm pack",
-    "circularDepCheck": "madge --circular src/index.ts && madge --circular src/solidrouter.ts",
+    "circularDepCheck": "madge --circular src/index.ts && madge --circular src/solidrouter.ts && madge --circular src/tanstackrouter.ts",
     "clean": "rimraf build coverage sentry-solid-*.tgz ./*.d.ts ./*.d.ts.map",
     "fix": "eslint . --format stylish --fix",
     "lint": "eslint . --format stylish",

packages/solid/rollup.npm.config.mjs

@@ -2,6 +2,6 @@ import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollu
 
 export default makeNPMConfigVariants(
   makeBaseNPMConfig({
-    entrypoints: ['src/index.ts', 'src/solidrouter.ts'],
+    entrypoints: ['src/index.ts', 'src/solidrouter.ts', 'src/tanstackrouter.ts'],
   }),
 );

packages/solid/src/tanstackrouter.ts

@@ -10,23 +10,22 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
 } from '@sentry/core';
-import type { VendoredTanstackRouter, VendoredTanstackRouterRouteMatch } from './vendor/tanstackrouter-types';
+import type { AnyRouter } from '@tanstack/solid-router';
+
+type RouteMatch = ReturnType<AnyRouter['matchRoutes']>[number];
 
 /**
  * A custom browser tracing integration for TanStack Router.
  *
- * The minimum compatible version of `@tanstack/solid-router` is `1.64.0`.
+ * The minimum compatible version of `@tanstack/solid-router` is `1.64.0
  *
  * @param router A TanStack Router `Router` instance that should be used for routing instrumentation.
  * @param options Sentry browser tracing configuration.
  */
-export function tanstackRouterBrowserTracingIntegration(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  router: any, // This is `any` because we don't want any type mismatches if TanStack Router changes their types
+export function tanstackRouterBrowserTracingIntegration<R extends AnyRouter>(
+  router: R,
   options: Parameters<typeof originalBrowserTracingIntegration>[0] = {},
 ): Integration {
-  const castRouterInstance: VendoredTanstackRouter = router;
-
   const browserTracingIntegrationInstance = originalBrowserTracingIntegration({
     ...options,
     instrumentNavigation: false,
@@ -42,9 +41,9 @@ export function tanstackRouterBrowserTracingIntegration(
 
       const initialWindowLocation = WINDOW.location;
       if (instrumentPageLoad && initialWindowLocation) {
-        const matchedRoutes = castRouterInstance.matchRoutes(
+        const matchedRoutes = router.matchRoutes(
           initialWindowLocation.pathname,
-          castRouterInstance.options.parseSearch(initialWindowLocation.search),
+          router.options.parseSearch(initialWindowLocation.search),
           { preload: false, throwOnError: false },
         );
 
@@ -63,13 +62,13 @@ export function tanstackRouterBrowserTracingIntegration(
 
       if (instrumentNavigation) {
         // The onBeforeNavigate hook is called at the very beginning of a navigation and is only called once per navigation, even when the user is redirected
-        castRouterInstance.subscribe('onBeforeNavigate', onBeforeNavigateArgs => {
+        router.subscribe('onBeforeNavigate', onBeforeNavigateArgs => {
           // onBeforeNavigate is called during pageloads. We can avoid creating navigation spans by comparing the states of the to and from arguments.
           if (onBeforeNavigateArgs.toLocation.state === onBeforeNavigateArgs.fromLocation?.state) {
             return;
           }
 
-          const onResolvedMatchedRoutes = castRouterInstance.matchRoutes(
+          const onResolvedMatchedRoutes = router.matchRoutes(
             onBeforeNavigateArgs.toLocation.pathname,
             onBeforeNavigateArgs.toLocation.search,
             { preload: false, throwOnError: false },
@@ -88,10 +87,10 @@ export function tanstackRouterBrowserTracingIntegration(
           });
 
           // In case the user is redirected during navigation we want to update the span with the right value.
-          const unsubscribeOnResolved = castRouterInstance.subscribe('onResolved', onResolvedArgs => {
+          const unsubscribeOnResolved = router.subscribe('onResolved', onResolvedArgs => {
             unsubscribeOnResolved();
             if (navigationSpan) {
-              const onResolvedMatchedRoutes = castRouterInstance.matchRoutes(
+              const onResolvedMatchedRoutes = router.matchRoutes(
                 onResolvedArgs.toLocation.pathname,
                 onResolvedArgs.toLocation.search,
                 { preload: false, throwOnError: false },
@@ -112,14 +111,13 @@ export function tanstackRouterBrowserTracingIntegration(
   };
 }
 
-function routeMatchToParamSpanAttributes(match: VendoredTanstackRouterRouteMatch | undefined): Record<string, string> {
+function routeMatchToParamSpanAttributes(match: RouteMatch | undefined): Record<string, string> {
   if (!match) {
     return {};
   }
 
   const paramAttributes: Record<string, string> = {};
-  Object.entries(match.params).forEach(([key, value]) => {
-    paramAttributes[`url.path.params.${key}`] = value; // TODO(v11): remove attribute which does not adhere to Sentry's semantic convention
+  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/solid/src/vendor/tanstackrouter-types.ts

@@ -9,7 +9,7 @@
   },
 
   "//": "This type is built separately because it is for a subpath export, which has problems if it is not in the root",
-  "include": ["src/solidrouter.ts"],
+  "include": ["src/solidrouter.ts", "src/tanstackrouter.ts"],
   "//": "Without this, we cannot output into the root dir",
   "exclude": []
 }

packages/solid/tsconfig.solidrouter-types.json renamed to packages/solid/tsconfig.routers-types.json

@@ -8,6 +8,6 @@
     "outDir": "build/types"
   },
 
-  "//": "This is built separately in tsconfig.solidrouter-types.json",
-  "exclude": ["src/solidrouter.ts"]
+  "//": "This is built separately in tsconfig.routers-types.json",
+  "exclude": ["src/solidrouter.ts", "src/tanstackrouter.ts"]
 }