diff --git a/docs/platforms/javascript/guides/solid/features/solid-router.mdx b/docs/platforms/javascript/guides/solid/features/solid-router.mdx index 982c3987552878..bc85b752768c37 100644 --- a/docs/platforms/javascript/guides/solid/features/solid-router.mdx +++ b/docs/platforms/javascript/guides/solid/features/solid-router.mdx @@ -3,39 +3,36 @@ title: Solid Router description: "Learn about Sentry's Solid Router integration." --- + + The routing instrumentation supports [Solid Router](https://docs.solidjs.com/solid-router) 0.13.4 and up. + + The Solid SDK provides a routing instrumentation for Solid Router to create navigation spans to ensure you collect meaningful performance data about the health of your page loads and associated requests. -The routing instrumentation supports [Solid Router](https://docs.solidjs.com/solid-router) 0.13.0 and up. - -To get started, add `Sentry.solidRouterBrowserTracingIntegration` instead of the regular `Sentry.browserTracingIntegration` -and provide the hooks it needs to enable performance tracing: - -- `useBeforeLeave` from `@solidjs/router` -- `useLocation` from `@solidjs/router` - -Make sure `Sentry.solidRouterBrowserTracingIntegration` is initialized by your `Sentry.init` call, before you wrap -`Router`. Otherwise, the routing instrumentation may not work properly. +To get started, import `solidRouterBrowserTracingIntegration` from `@sentry/solid/solidrouter` and add it to `Sentry.init` +instead of the regular `Sentry.browserTracingIntegration` to enable performance tracing. -Wrap `Router`, `MemoryRouter` or `HashRouter` from `@solidjs/router` using `Sentry.withSentryRouterRouting`. This -creates a higher order component, which will enable Sentry to reach your router context. +Import `withSentryRouterRouting` from `@sentry/solid/solidrouter` and use it to wrap `Router`, `MemoryRouter` or `HashRouter` from `@solidjs/router`. +This creates a higher order component, which will enable Sentry to reach your router context. ```jsx import * as Sentry from "@sentry/solid"; -import { Route, Router, useBeforeLeave, useLocation } from "@solidjs/router"; +import { solidRouterBrowserTracingIntegration, withSentryRouterRouting } from '@sentry/solid/solidrouter'; +import { Route, Router } from "@solidjs/router"; import { render } from "solid-js/web"; import App from "./app"; Sentry.init({ dsn: "__PUBLIC_DSN__", - integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })], + integrations: [solidRouterBrowserTracingIntegration()], tracesSampleRate: 1.0, // Capture 100% of the transactions }); // Wrap Solid Router to collect meaningful performance data on route changes -const SentryRouter = Sentry.withSentryRouterRouting(Router); +const SentryRouter = withSentryRouterRouting(Router); render( () => ( diff --git a/platform-includes/getting-started-config/javascript.solid.mdx b/platform-includes/getting-started-config/javascript.solid.mdx index e70a8cd5380d87..a8df18d06a3132 100644 --- a/platform-includes/getting-started-config/javascript.solid.mdx +++ b/platform-includes/getting-started-config/javascript.solid.mdx @@ -8,7 +8,7 @@ To use the SDK, initialize it in your Solid entry point before bootstrapping you ```javascript {filename: index.jsx} {"onboardingOptions": {"performance": "2, 12, 15-22", "session-replay": "13, 23-27"}} import * as Sentry from "@sentry/solid"; -import { useBeforeLeave, useLocation } from "@solidjs/router"; +import { solidRouterBrowserTracingIntegration } from "@sentry/solid/solidrouter"; import { render } from "solid-js/web"; import { DEV } from "solid-js"; import App from "./app"; @@ -18,7 +18,7 @@ if (!DEV) { Sentry.init({ dsn: "__PUBLIC_DSN__", integrations: [ - Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation }), + solidRouterBrowserTracingIntegration(), Sentry.replayIntegration(), ],