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
eastern-cyan•17mo ago
GitHub.com/TanStack/tanstack.com uses sentry
stormy-goldOP•17mo ago
Cool, thanks 🙂
reduced-jade•16mo 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 ?eastern-cyan•16mo 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.eastern-cyan•16mo 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.
wise-white•16mo 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.
reduced-jade•16mo 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
wise-white•16mo ago
👍 Nuke it
reduced-jade•16mo 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 🙂reduced-jade•16mo 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
stormy-goldOP•16mo 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...
stormy-goldOP•16mo ago
I'm seeing that there are forces trying to implement this feature, so I'll follow the updates. Thank you all.
reduced-jade•16mo ago
🎉
continuing-cyan•16mo ago
👋
Worked on this with Luca at React Conf.
correct-apricot•16mo ago
PR got merged 🥳
like-gold•16mo ago
We immediately implemented this. Reallt nice 🙂
wise-white•16mo ago
So cool!
Thanks everyone!