SolidStart

SolidStart is a framework for full-stack web apps and websites. Learn how to set it up with Sentry.

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

Copied
npm install @sentry/solidstart --save

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.

src/entry-client.tsx
Copied
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"));

Depending on the configuration of your SolidStart project, the file structure may differ from the code listed on this page. For example, for JavaScript projects files end in .js and .jsx while we use TypeScript snippets here ending in .ts and .tsx.

Create an instrument file instrument.server.ts in your src folder. In this file, initialize the Sentry SDK for your server.

src/instrument.server.ts
Copied
import * as Sentry from "@sentry/solidstart";

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

Wrap your SolidStart config with withSentry, so this file gets added to your build output. With the default server preset, you can find the file here: .output/server/instrument.server.mjs.

app.config.ts
Copied
import { withSentry } from "@sentry/solidstart";
import { defineConfig } from "@solidjs/start/config";

export default defineConfig(
  withSentry(
    {
      /* Your SolidStart config */
    },
    {
      /* Your Sentry build-time config (such as source map upload options) */
    },
  ),
);

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:

src/middleware.ts
Copied
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:

app.config.ts
Copied
import { withSentry } from "@sentry/solidstart";
import { defineConfig } from "@solidjs/start/config";

export default defineConfig(
  withSentry({
    // other SolidStart config options...
    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.

app.tsx
Copied
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>
  );
}

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

For example, update your scripts in package.json.

package.json
Copied
{
  "scripts": {
    "start:vinxi": "NODE_OPTIONS='--import ./.output/server/instrument.server.mjs ' vinxi start",
    "start:node": "node --import ./.output/server/instrument.server.mjs .output/server/index.mjs"
  }
}

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.

.env.sentry-build-plugin
Copied
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
Copied
// 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,
      }),
    ],
  },
  // ...
});

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

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

Learn more about manually capturing an error or message in our Usage documentation.

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.

Previous
Welcome to Sentry
Next
Installation Methods
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").