diff --git a/docs/platforms/javascript/guides/solid/features/error-boundary.mdx b/docs/platforms/javascript/guides/solid/features/error-boundary.mdx index 9263fd7ef2d1c..0d79d8ecde5a2 100644 --- a/docs/platforms/javascript/guides/solid/features/error-boundary.mdx +++ b/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 ( -
Error: {err.message}
}> -
Some Component
-
- ); -} -``` + diff --git a/docs/platforms/javascript/guides/solid/index.mdx b/docs/platforms/javascript/guides/solid/index.mdx index 0bd3f56f44706..312ad568cdb05 100644 --- a/docs/platforms/javascript/guides/solid/index.mdx +++ b/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 --- + + This SDK guide is specifically for Solid. For instrumenting your SolidStart + app, visit [here](/platforms/javascript/guides/solidstart). + + -## 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: -Configuration should happen as early as possible in your application's lifecycle. + -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 -We currently support Solid 1.8.4 and up. +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); ``` -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: + + + +## Step 4: Add Readable Stack Traces With Source Maps (Optional) + + - +## Step 5: Avoid Ad Blockers With Tunneling (Optional) -## Verify + -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 ``` -This snippet adds a button that throws an error in a Solid component. + + Open the page in a browser and click the button to trigger a frontend error. + - + -Learn more about manually capturing an error or message in our Usage documentation. + +### 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: - +```javascript + +``` + +Open the page in a browser and click the button to trigger a frontend error and trace. + + + +### 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). + + + +## 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 customize your configuration +- Make use of Solid-specific features +- Learn how to manually capture errors + + +- Find various topics in Troubleshooting +- [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. + diff --git a/platform-includes/getting-started-capture-errors/javascript.solid.mdx b/platform-includes/getting-started-capture-errors/javascript.solid.mdx new file mode 100644 index 0000000000000..0dc46f7b4f14c --- /dev/null +++ b/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 ( +
Error: {err.message}
}> +
Some Component
+
+ ); +} +``` diff --git a/platform-includes/getting-started-prerequisites/javascript.solid.mdx b/platform-includes/getting-started-prerequisites/javascript.solid.mdx new file mode 100644 index 0000000000000..a79a2daec2c14 --- /dev/null +++ b/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`+