doc(solid): Add solid sdk docs (#10366)

* doc(solid): Add solid sdk docs

* Update docs/platforms/javascript/guides/solid/features/solid-router.mdx

* Update docs/platforms/javascript/guides/solid/features/solid-router.mdx

* doc(solid): Add supported solid version

---------

Co-authored-by: Francesco Novy <[email protected]>

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

docs/platforms/javascript/guides/solid/config.yml

@@ -1,4 +1,4 @@
 title: Solid
-sdk: sentry.javascript.browser
+sdk: sentry.javascript.solid
 categories:
   - browser

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`.
+
+<SignInNote />
+
+```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(
+  () => (
+    <SentryErrorBoundary fallback={err => <div>Error: {err.message}</div>}>
+      <App />
+    </SentryErrorBoundary>
+  ),
+  document.getElementById("root"),
+);
+```

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."
+---
+
+<Note>
+
+  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/).
+
+</Note>
+
+The Sentry Solid SDK offers Solid-specific features for first class integration with the framework.
+
+<PageGrid />

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.
+
+<SignInNote />
+
+```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(
+  () => (
+    <SentryRouter>
+      <Route path="/" component={App} />
+      ...
+    </SentryRouter>
+  ),
+  document.getElementById("root"),
+);
+```

platform-includes/getting-started-config/javascript.solid.mdx

@@ -1,19 +1,24 @@
-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.
+
+<Note>
+  We currently support Solid 1.8.4 and up.
+</Note>
 
 <SignInNote />
 
-```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: "<Sentry DSN>",
+    dsn: "__PUBLIC_DSN__",
     integrations: [
-      Sentry.browserTracingIntegration(),
+      Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation }),
       Sentry.replayIntegration(),
     ],
 
@@ -39,8 +44,4 @@ if (!app) throw new Error("No #app element found in the DOM.");
 render(() => <App />, 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).

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
 ```

platform-includes/getting-started-verify/javascript.solid.mdx

@@ -9,26 +9,4 @@
 </button>
 ```
 
-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 (
-    <ErrorBoundary
-      fallback={(error) => {
-        Sentry.captureException(error);
-        return <ErrorFallbackComponent />;
-      }}
-    >
-      <Routes />
-    </ErrorBoundary>
-  );
-}
-```
+This snippet adds a button that throws an error in a Solid component.