diff --git a/src/platform-includes/getting-started-config/javascript.solid.mdx b/src/platform-includes/getting-started-config/javascript.solid.mdx new file mode 100644 index 0000000000000..4fb4b810b0ff9 --- /dev/null +++ b/src/platform-includes/getting-started-config/javascript.solid.mdx @@ -0,0 +1,43 @@ +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.) + + + +```javascript {filename: render-client.jsx} +import { render } from "solid-js/web"; +import App from "./app"; +import * as Sentry from "@sentry/browser"; +import { DEV } from "solid-js"; + +// this will only initialize your Sentry client in production builds. +if (!DEV) { + Sentry.init({ + dsn: "", + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, + + // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture Replay for 10% of all sessions, + // plus 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }); +} + +const app = document.getElementById("app"); + +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/src/platform-includes/getting-started-verify/javascript.solid.mdx b/src/platform-includes/getting-started-verify/javascript.solid.mdx new file mode 100644 index 0000000000000..924a040e20c7f --- /dev/null +++ b/src/platform-includes/getting-started-verify/javascript.solid.mdx @@ -0,0 +1,34 @@ +```javascript + +``` + +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 ; + }} + > + + + ); +} +``` diff --git a/src/platforms/javascript/guides/solid/config.yml b/src/platforms/javascript/guides/solid/config.yml new file mode 100644 index 0000000000000..e7ffc4fa64b93 --- /dev/null +++ b/src/platforms/javascript/guides/solid/config.yml @@ -0,0 +1,7 @@ +title: Solid +sdk: sentry.javascript.browser +fallbackPlatform: javascript +caseStyle: camelCase +supportLevel: production +categories: + - browser