SolidStart

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

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

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: "__PUBLIC_DSN__",
  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.mjs, initialize the Sentry SDK and deploy it alongside your application. For example by placing it in the public folder.

Placing instrument.server.mjs inside the public folder makes it accessible to the outside world. Consider blocking requests to this file or finding a more appropriate location which your backend can access.

public/instrument.server.mjs
Copied
import * as Sentry from "@sentry/solidstart";

Sentry.init({
  dsn: "__PUBLIC_DSN__",
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
});

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/middleware";
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 { 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.

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

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

To generate and upload source maps of your Solid Start app use our Vite bundler plugin.

Copied
npm install --save-dev @sentry/vite-plugin

To get readable stack traces in your production builds, set the SENTRY_AUTH_TOKEN environment variable in your build environment. You can also add the environment variable to a .env.sentry-build-plugin file in the root of your project.

.env.sentry-build-plugin
Copied
SENTRY_ORG="example-org"
SENTRY_PROJECT="example-project"
SENTRY_AUTH_TOKEN="sntrys_YOUR_TOKEN_HERE"

Finally, add the plugin in app.config.ts and enable sourcemaps.

app.config.ts
Copied
import { defineConfig } from '@solidjs/start/config';
import { sentryVitePlugin } from '@sentry/vite-plugin';

export default defineConfig({
  // rest of your config
  // ...
  vite: {
    build: {
      sourcemap: true,
    },
    plugins: [
      sentryVitePlugin({
        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 open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.

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").