update Solid quick start guide

Author: inventarSarah

docs/platforms/javascript/guides/solid/features/error-boundary.mdx

@@ -8,18 +8,4 @@ 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";
-
-// Wrap Solid"s ErrorBoundary to automatically capture exceptions
-const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
-
-export default function SomeComponent() {
-  return (
-    <SentryErrorBoundary fallback={err => <div>Error: {err.message}</div>}>
-        <div>Some Component</div>
-    </SentryErrorBoundary>
-  );
-}
-```
+<PlatformContent includePath="getting-started-capture-errors" />

docs/platforms/javascript/guides/solid/index.mdx

@@ -1,16 +1,22 @@
 ---
 title: Solid
 sdk: sentry.javascript.solid
+description: Learn how to manually set up Sentry in your Solid app and capture your first errors.
 categories:
   - javascript
   - browser
 ---
 
+<Alert>
+  This SDK guide is specifically for Solid. For instrumenting your SolidStart
+  app, visit [here](/platforms/javascript/guides/solidstart).
+</Alert>
+
 <PlatformContent includePath="getting-started-prerequisites" />
 
-## Install
+## Step 1: Install
 
-Sentry captures data by using an SDK within your application's runtime.
+Run the command for your preferred package manager to add the Sentry SDK to your application:
 
 ```bash {tabTitle:npm}
 npm install @sentry/solid --save
@@ -24,11 +30,9 @@ yarn add @sentry/solid
 pnpm add @sentry/solid
 ```
 
-## Configure
-
-In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).
+## Step 2: Configure
 
-Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
+Choose the features you want to configure, and this guide will show you how:
 
 <OnboardingOptionButtons
   options={[
@@ -40,11 +44,11 @@ Select which Sentry features you'd like to install in addition to Error Monitori
   ]}
 />
 
-Configuration should happen as early as possible in your application's lifecycle.
+<PlatformContent includePath="getting-started-features-expandable" />
 
-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.
+### Initialize the Sentry SDK
 
-<Alert>We currently support Solid 1.8.4 and up.</Alert>
+Initialize Sentry as early as possible in your application, for example, in your `index.(jsx|tsx)` file:
 
 ```javascript {filename: index.jsx}
 import * as Sentry from "@sentry/solid";
@@ -114,31 +118,87 @@ 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. You can also [manually capture errors](/platforms/javascript/guides/solid/usage).
+## Step 3: Capture Solid Errors
+
+To automatically report exceptions from inside a component tree to Sentry, wrap Solid's `ErrorBoundary` with Sentry's helper function:
+
+<PlatformContent includePath="getting-started-capture-errors" />
+
+## Step 4: Add Readable Stack Traces With Source Maps (Optional)
+
+<PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
-<PlatformContent includePath="getting-started-sourcemaps" />
+## Step 5: Avoid Ad Blockers With Tunneling (Optional)
 
-## Verify
+<PlatformContent includePath="getting-started-tunneling" />
 
-This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
+## Step 6: Verify Your Setup
+
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+
+### Issues
+
+To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages:
 
 ```javascript
 <button
   type="button"
   onClick={() => {
-    throw new Error("Sentry Frontend Error");
+    throw new Error("Sentry Test Error");
   }}
 >
-  Throw error
+  Break the world
 </button>
 ```
 
-This snippet adds a button that throws an error in a Solid component.
+<OnboardingOption optionId="performance" hideForThisOption>
+  Open the page in a browser and click the button to trigger a frontend error.
+</OnboardingOption>
 
-<Alert>
+<PlatformContent includePath="getting-started-browser-sandbox-warning" />
 
-Learn more about manually capturing an error or message in our <PlatformLink to="/usage/">Usage documentation</PlatformLink>.
+<OnboardingOption optionId="performance">
+### Tracing
+To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes for the execution of your code:
 
-</Alert>
+```javascript
+<button
+  type="button"
+  onClick={() => {
+    Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
+      setTimeout(() => {
+        throw new Error("Sentry Test Error");
+      }, 99);
+    });
+  }}
+>
+  Break the world
+</button>
+```
+
+Open the page in a browser and click the button to trigger a frontend error and trace.
+
+</OnboardingOption>
+
+### View Captured Data in Sentry
+
+Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear).
+
+<PlatformContent includePath="getting-started-verify-locate-data" />
+
+## Next Steps
+
+At this point, you should have integrated Sentry into your Solid application and should already be sending data to your Sentry project.
+
+Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
+
+- Extend Sentry to your backend using one of our [SDKs](/)
+- Continue to <PlatformLink to="/configuration">customize your configuration</PlatformLink>
+- Make use of <PlatformLink to="/features">Solid-specific features</PlatformLink>
+- Learn how to <PlatformLink to="/usage">manually capture errors</PlatformLink>
+
+<Expandable permalink={false} title="Are you having problems setting up the SDK?">
+- Find various topics in <PlatformLink to="/troubleshooting">Troubleshooting</PlatformLink>
+- [Get support](https://sentry.zendesk.com/hc/en-us/)
 
-To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.
+</Expandable>

platform-includes/getting-started-capture-errors/javascript.solid.mdx

@@ -0,0 +1,15 @@
+```jsx
+import * as Sentry from "@sentry/solid";
+import { ErrorBoundary } from "solid-js";
+
+// Wrap Solid's ErrorBoundary to automatically capture exceptions
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function SomeComponent() {
+  return (
+    <SentryErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
+      <div>Some Component</div>
+    </SentryErrorBoundary>
+  );
+}
+```

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

@@ -0,0 +1,7 @@
+## Prerequisites
+
+You need:
+
+- A Sentry [account](https://sentry.io/signup/) and [project](/product/projects/)
+- Your application up and running
+- Solid version `1.8.4`+