SolidStart

Don't have a Sentry account? Sign up for Sentry for free, then return to this page.

Install

Sentry captures data by using an SDK within your application’s runtime.

npm install @sentry/solidstart --save

Configure

Configuration should happen as early as possible in your application's lifecycle.

Initialize the Sentry SDK in your src/entry-client.tsx file.

If you're using Solid Router, add the solidRouterBrowserTracingIntegration to collect meaningful performance data about the health of your page loads and associated requests.

import * as Sentry from "@sentry/solidstart";
import { solidRouterBrowserTracingIntegration } from "@sentry/solidstart/solidrouter";
import { mount, StartClient } from "@solidjs/start/client";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [solidRouterBrowserTracingIntegration()],
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
});

mount(() => <StartClient />, document.getElementById("app"));

Server-side Setup

Create an instrument file instrument.server.mjs, initialize the Sentry SDK and deploy it alongside your application. For example by placing it in the public folder.

import * as Sentry from "@sentry/solidstart";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
});

Instrumentation

The Sentry SDK provides middleware lifecycle handlers to enhance data collected by Sentry on the server side by enabling distributed tracing between the client and server.

Complete the setup by adding sentryBeforeResponseMiddleware to your src/middleware.ts file. If you don't have a src/middleware.ts file yet, create one:

import { sentryBeforeResponseMiddleware } from "@sentry/solidstart";
import { createMiddleware } from "@solidjs/start/middleware";

export default createMiddleware({
  onBeforeResponse: [
    sentryBeforeResponseMiddleware(),
    // Add your other middleware handlers after `sentryBeforeResponseMiddleware`
  ],
});

And specify src/middleware.ts in app.config.ts:

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  // ...
  middleware: "./src/middleware.ts",
});

If you previously added the solidRouterBrowserTracingIntegration integration to Sentry.init in src/entry-client.tsx, wrap your Solid Router with withSentryRouterRouting. This creates a higher order component, which will enable Sentry to collect navigation spans.

import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { withSentryRouterRouting } from "@sentry/solidstart/solidrouter";

const SentryRouter = withSentryRouterRouting(Router);

export default function App() {
  return (
    <SentryRouter>
      <FileRoutes />
    </SentryRouter>
  );
}

Run your application

Add an --import flag to the NODE_OPTIONS environment variable wherever you run your application to import public/instrument.server.mjs.

For example, update your scripts in package.json.

{
  "scripts": {
    "start": "NODE_OPTIONS='--import ./public/instrument.server.mjs' vinxi start"
  }
}

Add Readable Stack Traces to Errors

To upload source maps, use the sentrySolidStartVite plugin from @sentry/solidstart and configure an auth token. Auth tokens can be passed to the plugin explicitly with the authToken option. You can use the SENTRY_AUTH_TOKEN environment variable or have an .env.sentry-build-plugin file in the working directory when building your project.

We recommend you add the auth token to your CI/CD environment as an environment variable.

Learn more about configuring the plugin in our Sentry Vite Plugin documentation.

SENTRY_ORG="example-org"
SENTRY_PROJECT="example-project"
SENTRY_AUTH_TOKEN="sntrys_YOUR_TOKEN_HERE"

Add the plugin to your app.config.ts.

// app.config.ts
import { defineConfig } from '@solidjs/start/config';
import { sentrySolidStartVite } from '@sentry/solidstart';

export default defineConfig({
  // ...

  vite: {
    plugins: [
      sentrySolidStartVite({
        org: process.env.SENTRY_ORG,
        project: process.env.SENTRY_PROJECT,
        authToken: process.env.SENTRY_AUTH_TOKEN,
      }),
    ],
  },
  // ...
});

Verify

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.

<button
  type="button"
  onClick={() => {
    throw new Error("Sentry Frontend Error");
  }}
>
  Throw error
</button>;

This snippet adds a button that throws an error in a Solid component.

To view and resolve the recorded error, log into 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.