docs(js): update Solid quick start guide (#15644)

<!-- Use this checklist to make sure your PR is ready for merge. You may
delete any sections you don't need. -->

## DESCRIBE YOUR PR
This branch contains the updated Solid Quick Start guide.

Closes #15625 

## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE -->
- [ ] Other deadline: <!-- ENTER DATE HERE -->
- [x] None: Not urgent, can wait up to 1 week+

## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

## LEGAL BOILERPLATE

<!-- Sentry employees and contractors can delete or ignore this section.
-->

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

## EXTRA RESOURCES

- [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)

---------

Co-authored-by: Alex Krawiec <[email protected]>

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, see our [SolidStart guide](/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`+