Skip to content

doc(solid): Update Solid Router integration documentation to match ne… #10487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 12 additions & 15 deletions docs/platforms/javascript/guides/solid/features/solid-router.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,36 @@ title: Solid Router
description: "Learn about Sentry's Solid Router integration."
---

<Note>
The routing instrumentation supports [Solid Router](https://docs.solidjs.com/solid-router) 0.13.4 and up.
</Note>

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.

<SignInNote />

```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(
() => (
Expand Down
4 changes: 2 additions & 2 deletions platform-includes/getting-started-config/javascript.solid.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -18,7 +18,7 @@ if (!DEV) {
Sentry.init({
dsn: "__PUBLIC_DSN__",
integrations: [
Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation }),
solidRouterBrowserTracingIntegration(),
Sentry.replayIntegration(),
],

Expand Down
Loading