index.mdx

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, see our SolidStart guide.

Step 1: Install

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

npm install @sentry/solid --save

yarn add @sentry/solid

pnpm add @sentry/solid

Configure

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

<OnboardingOptionButtons options={[ "error-monitoring", "performance", "session-replay", "user-feedback", "logs", ]} />

Initialize the Sentry SDK

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

import * as Sentry from "@sentry/solid";
// ___PRODUCT_OPTION_START___ performance
import { solidRouterBrowserTracingIntegration } from "@sentry/solid/solidrouter";
// ___PRODUCT_OPTION_END___ performance
import { render } from "solid-js/web";
import { DEV } from "solid-js";
import App from "./app";

// this will only initialize your Sentry client in production builds.
if (!DEV) {
  Sentry.init({
    dsn: "___PUBLIC_DSN___",

    // Adds request headers and IP for users, for more info visit:
    // https://docs.sentry.io/platforms/javascript/guides/solid/configuration/options/#sendDefaultPii
    sendDefaultPii: true,

    integrations: [
      // ___PRODUCT_OPTION_START___ performance
      solidRouterBrowserTracingIntegration(),
      // ___PRODUCT_OPTION_END___ performance
      // ___PRODUCT_OPTION_START___ session-replay
      Sentry.replayIntegration(),
      // ___PRODUCT_OPTION_END___ session-replay
      // ___PRODUCT_OPTION_START___ user-feedback
      Sentry.feedbackIntegration({
        // Additional SDK configuration goes in here, for example:
        colorScheme: "system",
      }),
      // ___PRODUCT_OPTION_END___ user-feedback
    ],
    // ___PRODUCT_OPTION_START___ logs

    // Enable logs to be sent to Sentry
    enableLogs: true,
    // ___PRODUCT_OPTION_END___ logs

    // ___PRODUCT_OPTION_START___ performance
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for tracing.
    // We recommend adjusting this value in production
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay

    // Capture Replay for 10% of all sessions,
    // plus 100% of sessions with an error
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    // ___PRODUCT_OPTION_END___ session-replay
  });
}

const app = document.getElementById("app");

if (!app) throw new Error("No #app element found in the DOM.");

render(() => <App />, app);

Capture Solid Errors

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

Add Readable Stack Traces With Source Maps (Optional)

Avoid Ad Blockers With Tunneling (Optional)

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.

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

<button
  type="button"
  onClick={() => {
    throw new Error("Sentry Test Error");
  }}
>
  Break the world
</button>

### 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.

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

<button
  type="button"
  onClick={() => {
    Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
      setTimeout(() => {
        throw new Error("Sentry Test Error");
      }, 99);
    });
  }}
>
  Break the world
</button>

View Captured Data in Sentry

Now, head over to your project on 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:

• Explore practical guides on what to monitor, log, track, and investigate after setup
• 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/)