Has anyone integrated sentry with router?
I'm searching for something like sentry integration for react router but for the TanStack router, has anyone done some integration?
17 Replies
foreign-sapphire•2y ago
GitHub.com/TanStack/tanstack.com uses sentry
mute-goldOP•2y ago
Cool, thanks 🙂
rare-sapphire•2y ago
I just looked into this and I'm not sure how this tracks errors that are caught by error boundaries?
It doesn't use the ErrorBoundary by sentry and it also doesn't use
Sentry.captureException.
usually, we did that in the onError handler of the ErrorBoundary, but since tanstack-router uses its own CatchBoundary, which we can't customize, I'm not sure how to track these errors.. any idea how that works on the tanstack page @Sean Cassiere ?foreign-sapphire•2y ago
Honestly no clue how it works on the tanstack website, it was recently added by @Tanner Linsley I believe.
Reading the Sentry's docs, we could probably use their
CaptureConsole integration which captures logs from the console. And since TSR logs everything to the console, this'd probably catch that.foreign-sapphire•2y ago
A un-optimal way of approaching this, could possibly be to wrap the individual pages in the
<Sentry.ErrorBoundary> component.
https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/#optionsReact Error Boundary | Sentry for React
Learn how the React SDK exports an error boundary component that leverages React component APIs.
multiple-amethyst•2y ago
They have a PR open for an integration right now.
Right?
I’ve been buried in Start, and haven’t had time to come up for air.
rare-sapphire•2y ago
I think it's not good that we just do console.error on production - I wanted to suggest to move away from this. In query, lots of people were confused about console errors just because a fetch returned 404, and we have the same here with route loaders
multiple-amethyst•2y ago
👍 Nuke it
rare-sapphire•2y ago
If you wrap a page in your own ErrorBoundary then you won't be able to use errorComponent. Ideally, CatchBoundary could be customized but I hit a wall with this last time I tried
I think we should be able to add an
onError and defaultOnError property to the router and routes, which can call form our own CatchBoundary. That shoud be enough to add sentry error tracking.
I'll try to do this next to removing the manual console.error statements 🙂rare-sapphire•2y ago
PR is here: https://github.com/TanStack/router/pull/1623
GitHub
feat: onCatch callback on routes and defaultOnCatch for router by T...
to catch errors thrown by ErrorBoundaries
mute-goldOP•2y ago
Last time I checked, they didn't have plans to implement it (https://github.com/getsentry/sentry-javascript/issues/7927), but I checked again today and someone started the implementation (https://github.com/getsentry/sentry-javascript/pull/12095) and the person who opens the PR is calling for you 😅
GitHub
Issues · getsentry/sentry-javascript
Official Sentry SDKs for JavaScript. Contribute to getsentry/sentry-javascript development by creating an account on GitHub.
GitHub
Initial TanStack Router Integration by MicahLyle · Pull Request #12...
Before submitting a pull request, please take a look at our
Contributing guidelines and verify:
If you've added code that should be tested, please add tests.
Ensure your code lints and the t...
mute-goldOP•2y ago
I'm seeing that there are forces trying to implement this feature, so I'll follow the updates. Thank you all.
rare-sapphire•2y ago
🎉
fascinating-indigo•2y ago
👋
Worked on this with Luca at React Conf.
robust-apricot•2y ago
PR got merged 🥳
other-emerald•2y ago
We immediately implemented this. Reallt nice 🙂
multiple-amethyst•2y ago
So cool!
Thanks everyone!