diff --git a/docs/platforms/javascript/common/install/index.mdx b/docs/platforms/javascript/common/install/index.mdx index 50ae69ccd2c1d..ab8a777338a89 100644 --- a/docs/platforms/javascript/common/install/index.mdx +++ b/docs/platforms/javascript/common/install/index.mdx @@ -17,6 +17,7 @@ notSupported: - javascript.vue - javascript.wasm - javascript.remix + - javascript.solid - javascript.svelte - javascript.sveltekit - javascript.aws-lambda diff --git a/docs/platforms/javascript/guides/solid/config.yml b/docs/platforms/javascript/guides/solid/config.yml index 91837b3042a55..54dff81005f39 100644 --- a/docs/platforms/javascript/guides/solid/config.yml +++ b/docs/platforms/javascript/guides/solid/config.yml @@ -1,4 +1,4 @@ title: Solid -sdk: sentry.javascript.browser +sdk: sentry.javascript.solid categories: - browser diff --git a/docs/platforms/javascript/guides/solid/features/error-boundary.mdx b/docs/platforms/javascript/guides/solid/features/error-boundary.mdx new file mode 100644 index 0000000000000..093d620943d4c --- /dev/null +++ b/docs/platforms/javascript/guides/solid/features/error-boundary.mdx @@ -0,0 +1,34 @@ +--- +title: Solid Error Boundary +description: "Learn how to wrap Solid error boundaries to automatically capture errors." +--- + +The Solid SDK exports a function to wrap the native Solid error boundary component to automatically capture exceptions +from inside a component tree and render a fallback component. + +Wrap the native Solid `ErrorBoundary` component with `Sentry.withSentryErrorBoundary`. + + + +```jsx +import * as Sentry from "@sentry/solid"; +import { ErrorBoundary } from "solid-js"; +import App from "./app"; + +Sentry.init({ + dsn: "__PUBLIC_DSN__", + tracesSampleRate: 1.0, // Capture 100% of the transactions +}); + +// Wrap Solid"s ErrorBoundary to automatically capture exceptions +const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary); + +render( + () => ( +
Error: {err.message}
}> + + + ), + document.getElementById("root"), +); +``` diff --git a/docs/platforms/javascript/guides/solid/features/index.mdx b/docs/platforms/javascript/guides/solid/features/index.mdx new file mode 100644 index 0000000000000..9986c2e3a0e8c --- /dev/null +++ b/docs/platforms/javascript/guides/solid/features/index.mdx @@ -0,0 +1,17 @@ +--- +title: Solid Features +description: "Learn how Sentry's Solid SDK exposes features for first class integration with Solid." +--- + + + + This SDK is considered **experimental and in an alpha state**. It may experience breaking changes. Please reach out on + [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. This + SDK currently only supports [Solid](https://www.solidjs.com/) and is not yet officially compatible with + [Solid Start](https://start.solidjs.com/). + + + +The Sentry Solid SDK offers Solid-specific features for first class integration with the framework. + + diff --git a/docs/platforms/javascript/guides/solid/features/solid-router.mdx b/docs/platforms/javascript/guides/solid/features/solid-router.mdx new file mode 100644 index 0000000000000..fdbb83e84df25 --- /dev/null +++ b/docs/platforms/javascript/guides/solid/features/solid-router.mdx @@ -0,0 +1,49 @@ +--- +title: Solid Router +description: 'Learn about Sentry's Solid Router integration.' +--- + +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. + +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. + + + +```jsx +import * as Sentry from "@sentry/solid"; +import { Route, Router, useBeforeLeave, useLocation } from "@solidjs/router"; +import { render } from "solid-js/web"; +import App from "./app"; + +Sentry.init({ + dsn: "__PUBLIC_DSN__", + integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })], + tracesSampleRate: 1.0, // Capture 100% of the transactions +}); + +// Wrap Solid Router to collect meaningful performance data on route changes +const SentryRouter = Sentry.withSentryRouterRouting(Router); + +render( + () => ( + + + ... + + ), + document.getElementById("root"), +); +``` diff --git a/platform-includes/getting-started-config/javascript.solid.mdx b/platform-includes/getting-started-config/javascript.solid.mdx index 6bded5959759a..5dd0d2d849005 100644 --- a/platform-includes/getting-started-config/javascript.solid.mdx +++ b/platform-includes/getting-started-config/javascript.solid.mdx @@ -1,19 +1,20 @@ -To use the SDK, initialize it in your Solid entry point before bootstrapping your app. (In a typical Solid project that's the render-client.js, or render-client.tsx.) +To use the SDK, initialize it in your Solid entry point before bootstrapping your app. In a typical Solid project, that is your `index.jsx` file. -```javascript {filename: render-client.jsx} {"onboardingOptions": {"performance": "11, 14-21", "session-replay": "12, 22-26"}} +```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 { render } from "solid-js/web"; -import App from "./app"; -import * as Sentry from "@sentry/browser"; import { DEV } from "solid-js"; +import App from "./app"; // this will only initialize your Sentry client in production builds. if (!DEV) { Sentry.init({ - dsn: "", + dsn: "__PUBLIC_DSN__", integrations: [ - Sentry.browserTracingIntegration(), + Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation }), Sentry.replayIntegration(), ], @@ -39,8 +40,4 @@ if (!app) throw new Error("No #app element found in the DOM."); render(() => , app); ``` -Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. - -It's also possible to add Client-Side routing to your app with [Solid-Router](https://docs.solidjs.com/guides/how-to-guides/routing-in-solid/solid-router) without changing any additional settings. As long as you use the default HTML History API to handle routing. - Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/solid/usage). diff --git a/platform-includes/getting-started-install/javascript.solid.mdx b/platform-includes/getting-started-install/javascript.solid.mdx index 780da84a445ac..5a46288b96101 100644 --- a/platform-includes/getting-started-install/javascript.solid.mdx +++ b/platform-includes/getting-started-install/javascript.solid.mdx @@ -1,7 +1,7 @@ ```bash {tabTitle:npm} -npm install --save @sentry/browser +npm install --save @sentry/solid ``` ```bash {tabTitle:Yarn} -yarn add @sentry/browser +yarn add @sentry/solid ``` diff --git a/platform-includes/getting-started-verify/javascript.solid.mdx b/platform-includes/getting-started-verify/javascript.solid.mdx index 924a040e20c7f..3665854c85795 100644 --- a/platform-includes/getting-started-verify/javascript.solid.mdx +++ b/platform-includes/getting-started-verify/javascript.solid.mdx @@ -9,26 +9,4 @@ ``` -This snippet adds a button that throws an error in any Solid component you choose. It's useful for testing. It's recommended to base wrap your app within an Error Boundary: - -```javascript {filename: app.jsx} -import { ErrorBoundary } from "solid-js"; -import Routes from "./routes.tsx"; -import ErrorFallbackComponent from "./components/error-fallback"; -import * as Sentry from "@sentry/browser"; - -export default function App() { - const Routes = useRoutes(ROUTES); - - return ( - { - Sentry.captureException(error); - return ; - }} - > - - - ); -} -``` +This snippet adds a button that throws an error in a Solid component.