feat(solidjs): Add withSentryErrorBoundary HOC
#12421
Conversation
size-limit report 📦
|
| import { captureException } from '@sentry/browser'; | ||
| import type { Component, JSX } from 'solid-js'; | ||
| import { mergeProps, splitProps, untrack } from 'solid-js'; | ||
| import { createComponent } from 'solid-js/web'; |
There was a problem hiding this comment.
Is solid-js/web always available to us? I don't see it being listed as peerDependency or dependency in the SDK's package.json
There was a problem hiding this comment.
I believe it's available through solid-js. At least I didn't have any issues developing locally. The solidjs templates (these are used to start projects ala create-react-app) also don't specifically list it as dep, e.g. here.
There was a problem hiding this comment.
Ahh I see, thx for explaining! Let's leave it as is and if we get error reports (I have a feeling pnpm could complain 👀 ) we can add it later.
| /** | ||
| * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions. | ||
| */ | ||
| export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> { |
There was a problem hiding this comment.
I have a naive question (sorry if I missed convos around this): Why do users need to pass in the ErrorBoundary component from solid here? Can we not import it like the other solid imports?
There was a problem hiding this comment.
Not naive at all. That's the approach I initially took, but it doesn't quite do the job correctly.
From local testing and similar experience with the router instrumentation, certain functions and functionality are app context specific. For the router, this meant that we couldn't use use hooks because they didn't have the user's router context. For the ErrorBoundary the reset function is contextual, so exporting a generic error boundary from this package would mean the reset function does nothing.
Hope this helps to understand it a bit better.
There was a problem hiding this comment.
Makes sense, thanks for explaining!
andreiborza
force-pushed
the
ab/solidjs-error-boundary
branch
from
df01b63 to
322c45f
Compare
There was a problem hiding this comment.
Any chance the yarn.lock file was created accidentally? I think we mainly use pnpm in the e2e tests but if you're using yarn it should work too.
There was a problem hiding this comment.
Ah, yea I used yarn locally. I had problems with pnpm and volta/yarn before, it also always adds itself as packageManager to the top level package.json which is a pain to remember/revert.
There was a problem hiding this comment.
Thanks, I removed the yarn lock and error log :)
To automatically capture exceptions from inside a component tree and
render a fallback component, wrap the native Solid
JS `ErrorBoundary` component with `Sentry.withSentryErrorBoundary`.
```js
import * as Sentry from '@sentry/solidjs';
import { ErrorBoundary } from 'solid-js';
Sentry.init({
dsn: '__PUBLIC_DSN__',
tracesSampleRate: 1.0, // Capture 100% of the transactions
});
const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
render(
() => (
<SentryErrorBoundary fallback={err => <div>Error: {err.message}</div>}>
<ProblematicComponent />
</SentryErrorBoundary>
),
document.getElementById('root'),
);
```
**Note**: When using an `ErrorBoundary` in conjunction with Solid
Router, the fallback component renders twice, see
[here](solidjs/solid-router#440).
To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid
JS
ErrorBoundarycomponent withSentry.withSentryErrorBoundary.Note: When using an
ErrorBoundaryin conjunction with Solid Router, the fallback component renders twice, see here.