AbhiPrasad
Aug 9, 2022
Maintainer

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.

Replies: 7 comments 16 replies

thedanchez
Jan 30, 2023

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

3 replies

@AbhiPrasad

AbhiPrasad Jan 31, 2023
Maintainer Author

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

AbhiPrasad Jan 31, 2023
Maintainer Author

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
Aug 31, 2023

Would be great to have Sentry SDK for Solidjs.

0 replies

danboyle8637
Oct 23, 2023

Any updates or roadmaps?

1 reply

@AbhiPrasad

AbhiPrasad Oct 23, 2023
Maintainer Author

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
Nov 29, 2023

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
onboarding list

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.

5 replies

@AbhiPrasad

AbhiPrasad Nov 29, 2023
Maintainer Author

@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

davedbase Nov 29, 2023

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

AbhiPrasad Nov 29, 2023
Maintainer Author

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

davedbase Nov 29, 2023

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

@atilafassina

atilafassina Nov 29, 2023

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
Nov 29, 2023

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

4 replies

@AbhiPrasad

AbhiPrasad Nov 29, 2023
Maintainer Author

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

davedbase Nov 30, 2023

@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

atilafassina Dec 5, 2023

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

@atilafassina

atilafassina Dec 5, 2023

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

Add Solid Guide to Sentry Docs

asterikx
Mar 26, 2024

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

2 replies

@AbhiPrasad

AbhiPrasad Mar 26, 2024
Maintainer Author

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

AbhiPrasad Mar 26, 2024
Maintainer Author

SolidStart discussion: #11293

mpj
May 30, 2024

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.

Uh oh!

Uh oh!

Sentry SDK for SolidJS #5552

Uh oh!

Uh oh!

AbhiPrasad Aug 9, 2022 Maintainer

Update: We are working on this! See #12142

Replies: 7 comments · 16 replies

Uh oh!

Uh oh!

AbhiPrasad Jan 31, 2023 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

AbhiPrasad Jan 31, 2023 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

AbhiPrasad Oct 23, 2023 Maintainer Author

Uh oh!

Uh oh!

AbhiPrasad Nov 29, 2023 Maintainer Author

Uh oh!

Uh oh!

AbhiPrasad Nov 29, 2023 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Solid

Install

Configure

Addd Readable Stack Traces to Errors

Verify

Uh oh!

AbhiPrasad Nov 29, 2023 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AbhiPrasad Mar 26, 2024 Maintainer Author

Uh oh!

AbhiPrasad Mar 26, 2024 Maintainer Author

Uh oh!

Uh oh!

AbhiPrasad May 30, 2024 Maintainer Author

AbhiPrasad
Aug 9, 2022
Maintainer

Replies: 7 comments 16 replies

AbhiPrasad Jan 31, 2023
Maintainer Author

AbhiPrasad Jan 31, 2023
Maintainer Author

AbhiPrasad Oct 23, 2023
Maintainer Author

AbhiPrasad Nov 29, 2023
Maintainer Author

AbhiPrasad Nov 29, 2023
Maintainer Author

AbhiPrasad Nov 29, 2023
Maintainer Author

AbhiPrasad Mar 26, 2024
Maintainer Author

AbhiPrasad Mar 26, 2024
Maintainer Author

AbhiPrasad May 30, 2024
Maintainer Author