Sentry SDK for SolidJS

[AbhiPrasad]

Update: We are working on this! See #12142

https://www.solidjs.com/

Publish an offical SolidJS Sentry SDK -@sentry/solid-js

All the goodies you expect out of a Sentry SDK.

• Error monitoring and crash reporting OOB for client/server
• Performance monitoring support for client/server
• Release health support + Automatic sourcemaps uploading

Update: @atilafassina wrote some docs for Sentry for using Solid - please give it a read.

Tracking issue for SolidStart support #11293

Please comment/react to this post if you would like to see this - that helps us prioritize this work.

[thedanchez]

@AbhiPrasad are there any updates on this? Would love to see a Sentry SDK built for SolidJS! It's definitely gaining in popularity and this would boost its ecosystem growth.

[AbhiPrasad]

Hey @thedanchez - nothing at the moment since we are waiting for some more community feedback, but for now the regular @sentry/browser SDK should work great for error monitoring!

Is there a particular thing you are looking for that the browser sdk could do better for solidjs atm?

[thedanchez]

@AbhiPrasad I'll have to spend some time with it to answer that fully. My response came from the posture of me being in the process of converting an existing React app over to SolidJS and felt it would be cool if there was a "pseudo-drop-in replacement" for @sentry/react in something like @sentry/solidjs (seeing as there are syntax similarities between React and Solid)

I'll have to create my own error boundaries and such as opposed to using the provided one by the SDK (probably not a big deal in the grand scheme of things).

[AbhiPrasad]

I'll have to create my own error boundaries and such as opposed to using the provided one by the SDK (probably not a big deal in the grand scheme of things).

Yeah unfortunately you do - but if you find anything interesting please share! Maybe we can collect some snippets and add them to our docs in the mean time to help unblock other SolidJS users as well.

From skimming the docs, we probably want to automatically hook into onError calls, as well as provide our own ErrorBoundary component. It doesn't seem like Solid provides a componentStack or something similar, so this should be fairly simple.

We also are keeping an eye on Solid Start, which we can also think about support considering we have SDKs for NextJS and Remix, and are looking building one for SvelteKit!

Let me dig though - maybe there is something interesting we can get here. I wonder if we could somehow get the store state or the reactive dependency tree on error (we could then attach that to the sentry event which should make debugging much easier).

[tian-yi]

Would be great to have Sentry SDK for Solidjs.

[danboyle8637]

Any updates or roadmaps?

[AbhiPrasad]

Hi @danboyle8637 - no updates at the moment, all the SDK maintainers are tied up in their own separate projects. If anything we probably only look at this next year.

We are happy to support community contributions and work though, PRs are welcome if you're interested in helping out!

[atilafassina]

Hello, I found this issue when adding Sentry to a production solid app.
And I noticed Solid is not listed in the supported framework options

I get that it's a capacity issue to have a dedicated SDK for Solid, and it may not even be entirely needed.
I ended up adding everything with the browser SDK, even solid-router support seems to work fine.

So, how about getting a recipe in the docs and documenting how to do so??
I'm new to Sentry, but if docs are open-source, I'd could even attempt a PR myself.

[AbhiPrasad]

@atilafassina - everything is open here at Sentry 😄

https://github.com/getsentry/sentry-docs

Before we PR into the docs though, I would recommend just leaving a post in this GH discussion about the recipe you used to get SolidJS working. Then we can figure out how best to get that in the docs + update the product onboarding to include solid as an option. Thanks for your interest in contributing!!

[davedbase]

You'll have support from the Solid core team on this if needed as well. Personally, I know of at least 4 projects that want to use Sentry but the lack of documentation makes it difficult for our community to adopt. We'd appreciate this effort greatly.

[AbhiPrasad]

sweet yeah let's figure out a way to make this happen then - happy to support the community in adding the relevant docs to places, we just don't have much bandwidth this year for a formal new SDK.

Curious - @atilafassina @davedbase are most of these just using CSR solid projects? Or are we thinking about instrumenting solid start as well?

[davedbase]

I'd recommend holding off until Start Beta 2 before doing anything, but yeah that would be ideal to include as well.

[atilafassina]

I'd also suggest adding them as separate recipes. (Solid and SolidStart) just to avoid making things confusing - this would also follow the same pattern you have with Svelte/SvelteKit and React/Next.js/Remix

[working on a draft right now]

[atilafassina]

@davedbase , @AbhiPrasad:
this draft takes the same intended structure as svelte.

if this looks decent enough as a first iteration, let me know and I'll put it in a PR.

Solid

Solid can have automatic reporting of errors and exceptions, as well as performance monitoring of your client-side app with the generic Sentry Browser SDK.

This documentation refers to Sentry's SDK version 7.83.0.

On this page, we get you up and running with Sentry's SDK.

Install

npm install --save @sentry/browser

Configure

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 the render-client.js, or render-client.tsx.

import { render } from "solid-js/web";
import Entry from "./entry";
import * as Sentry from "@sentry/browser";
import { DEV } from "solid-js";

// this will only initialize your Sentry client in production builds.
if (!DEV) {
  Sentry.init({
    dsn: "<Sentry DSN>",
    integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
  });
}

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

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

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

Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client.

It is also possible to add Client-Side routing to your app with Solid-Router without any additional setting. As long as you use the default HTML History API to handle routing.

Addd Readable Stack Traces to Errors

-- this section should be the exact same --

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 any Solid component you choose. It is useful for testing. It is recommended to base wrap your app within an Error Boundary:

import { ErrorBoundary } from "solid-js";
import Routes from './routes.tsx';
import ErrorFallbackComponent from "./components/error-fallback";
import * as Sentry from "@sentry/browser";


export default function Entry() {
  const Routes = useRoutes(ROUTES);

  return (
    <ErrorBoundary
      fallback={(error) => {
        Sentry.captureException(error);
        return <ErrorFallbackComponent />;
      }}
    >
      <Routes />
    </ErrorBoundary>
  );
}

This will push any caught exceptions within your app to Sentry while allowing your app to display a user-friendly feedback and to recover from it.

[AbhiPrasad]

We'll need an icon for the docs - requested that here getsentry/platformicons#138

Otherwise this LGTM! You can see getsentry/sentry-docs#8267 as an example of adding docs for a new SDK/platform, you should be able to follow very similar steps.

https://docs.sentry.io/contributing/

[davedbase]

@AbhiPrasad it looks like you found the logo assets on our media site. One of the vector or PNG assets from that section would suffice.

[atilafassina]

thanks a lot @AbhiPrasad ! :)
checking the contributing and preparing everything now!

[atilafassina]

it didn't link back here, so I'm leaving the link for future reference:

Add Solid Guide to Sentry Docs

[asterikx]

@AbhiPrasad do you have any plans on adding SolidStart, now that it has reached v1.0 (RC)?

[AbhiPrasad]

After we ship the next major (Sentry JS SDKs v8) it's on the TODO :) #9508

I'll create a new GitHub Discussion for it though, good reminder thank you @asterikx!

[AbhiPrasad]

SolidStart discussion: #11293

[mpj]

Lovely to see work on this, and also for SolidStart. Just got back into webdev and decided to go for SolidStart/SolidJS and it is ridiculously easy to work with and works astoundingly well for such an early project, and after a long time of react I finally feel I found something that is superior. Sentry should really, really prioritize Solid and SolidStart, it is a sound business decision and good strategical place to be.

[AbhiPrasad]

We're working on a solidjs SDK! #12142

More context here: #11293 (reply in thread)