Skip to content

docs(js): Update quick start guide splitlayout for Solid, SolidStart, Svelte #17451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
inventarSarah wants to merge 1 commit into
base: master
Choose a base branch
from
+313 −79
Open

docs(js): Update quick start guide splitlayout for Solid, SolidStart, Svelte #17451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 80 additions & 18 deletions docs/platforms/javascript/guides/solid/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,26 @@ categories:
---

<Alert>
This SDK guide is specifically for Solid. For instrumenting your SolidStart
app, see our [SolidStart guide](/platforms/javascript/guides/solidstart).

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" />

<StepConnector selector="h2" showNumbers={true}>

## Step 1: Install
Copy link
Copy Markdown
Member

@andreiborza andreiborza Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Step 1: Install
## Install

We don't need this anymore now that there are step connectors.


<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the command for your preferred package manager to add the Sentry SDK to your application:

</SplitSectionText>
<SplitSectionCode>

```bash {tabTitle:npm}
npm install @sentry/solid --save
```
Expand All @@ -30,7 +40,11 @@ yarn add @sentry/solid
pnpm add @sentry/solid
```

## Step 2: Configure
</SplitSectionCode>
</SplitSection>
</SplitLayout>

## Configure

Choose the features you want to configure, and this guide will show you how:

Expand All @@ -48,8 +62,15 @@ Choose the features you want to configure, and this guide will show you how:

### Initialize the Sentry SDK

<SplitLayout>
<SplitSection>
<SplitSectionText>

Initialize Sentry as early as possible in your application, for example, in your `index.(jsx|tsx)` file:

</SplitSectionText>
<SplitSectionCode>

```javascript {filename: index.jsx}
import * as Sentry from "@sentry/solid";
// ___PRODUCT_OPTION_START___ performance
Expand Down Expand Up @@ -118,27 +139,56 @@ if (!app) throw new Error("No #app element found in the DOM.");
render(() => <App />, app);
```

## Step 3: Capture Solid Errors
</SplitSectionCode>
</SplitSection>
</SplitLayout>

### Capture Solid Errors

<SplitLayout>
<SplitSection>
<SplitSectionText>

To automatically report exceptions from inside a component tree to Sentry, wrap Solid's `ErrorBoundary` with Sentry's helper function:

</SplitSectionText>
<SplitSectionCode>

<PlatformContent includePath="getting-started-capture-errors" />

## Step 4: Add Readable Stack Traces With Source Maps (Optional)
</SplitSectionCode>
</SplitSection>
</SplitLayout>

<PlatformContent includePath="getting-started-sourcemaps-short-version" />
### Add Readable Stack Traces With Source Maps (Optional)

## Step 5: Avoid Ad Blockers With Tunneling (Optional)
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />

<PlatformContent includePath="getting-started-tunneling" />
### Avoid Ad Blockers With Tunneling (Optional)

## Step 6: Verify Your Setup
<PlatformContent includePath="getting-started-tunneling-splitlayout" />

## 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:
<SplitLayout>
<SplitSection>
<SplitSectionText>

To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages.

<OnboardingOption optionId="performance" hideForThisOption>
Then, open the page in a browser and click the button to trigger a frontend
error.
</OnboardingOption>

<PlatformContent includePath="getting-started-browser-sandbox-warning" />

</SplitSectionText>
<SplitSectionCode>

```javascript
<button
Expand All @@ -151,15 +201,23 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
</button>
```

<OnboardingOption optionId="performance" hideForThisOption>
Open the page in a browser and click the button to trigger a frontend error.
</OnboardingOption>

<PlatformContent includePath="getting-started-browser-sandbox-warning" />
</SplitSectionCode>
</SplitSection>
</SplitLayout>

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

<SplitLayout>
<SplitSection>
<SplitSectionText>

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.

Then, open the page in a browser and click the button to trigger a frontend error and trace.

</SplitSectionText>
<SplitSectionCode>

```javascript
<button
Expand All @@ -176,13 +234,15 @@ To test your tracing configuration, update the previous code snippet to start a
</button>
```

Open the page in a browser and click the button to trigger a frontend error and trace.
</SplitSectionCode>
</SplitSection>
</SplitLayout>

</OnboardingOption>

<OnboardingOption optionId="logs">

<Include name="logs/javascript-quick-start-verify-logs" />
<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />

</OnboardingOption>

Expand All @@ -209,3 +269,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
- [Get support](https://sentry.zendesk.com/hc/en-us/)

</Expandable>

</StepConnector>
Loading
Loading