Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
@sentry/react
SDK Version
7.119.1
Framework Version
18.2.0
Link to Sentry event
Reproduction Example/SDK Setup
Sentry.init({
debug: !!Number(env.VITE_SENTRY_DEBUG),
dsn: env.VITE_SENTRY_DSN,
environment,
integrations: [
// https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/
new Sentry.BrowserTracing({
routingInstrumentation: Sentry.reactRouterV6Instrumentation(
React.useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
),
}),
new Sentry.Breadcrumbs(),
new Sentry.HttpContext(),
],
// Performance Monitoring
tracesSampleRate: 1.0, // Capture 100% of the transactions
});Steps to Reproduce
We are using jotai and if we make a query using atomWithQuery or atomWithSuspenseQuery and the response is bad, we throw an error i.e:
// fetch function
const fetch = () => {
const response = await window.fetch(`someEndpoint`)
if (!response.ok) {
span?.setStatus('unknown_error');
throw new Error(`Fetch error: ${response.status} at ${input}`);
}
else {
return response;
}
}
// query atom
export const userDetailsAtom = atomWithSuspenseQuery(get => {
const queryKey = ['user'] as const;
const queryFn = async () => {
const { fetch } = get(fetchClientAtom);
const response = await fetch(`/user-details`);
return response as UserDetails;
};
return { queryKey, queryFn };
});The problem here is that errors thrown from the fetch don't get marked as handled by sentry, even though the component they get called from are wrapped with an ErrorBoundary with a fallback like:
// component
const Component = ({ children }: { children: React.ReactNode }) => {
const response = useAtomValue(userDetailsAtom);
return response.data;
};
// wrapper
<ErrorBoundary fallback={<div>Some fallback test</div>}>
<Component>{children}</ShowErrorWithData>
</ErrorBoundary>Instead these get marked as unhandled, whereas if you did something similar but threw the error just inside the component (rather than in the fetch itself) it would be marked as handled i.e
// component
const Component = ({ children }: { children: React.ReactNode }) => {
const response = useAtomValue(userDetailsAtom);
if (response === "bad") throw new Error("Show Error")
return response.data;
};
// wrapper
<ErrorBoundary fallback={<div>Some fallback test</div>}>
<Component>{children}</ShowErrorWithData>
</ErrorBoundary>Which you can see here being marked as handled: https://statsbomb.sentry.io/issues/6011758573/?environment=development&project=4506507098062848&query=is%3Aunresolved%20issue.priority%3A%5Bhigh%2C%20medium%5D&referrer=issue-stream&statsPeriod=1h&stream_index=1
Expected Result
Expected behaviour is that the error gets marked as handled as it's happening within a component being wrapped by an ErrorBoundary.
Actual Result
The error is not being marked as handled
Metadata
Assignees
Type
Projects
Status
Waiting for: Community
Activity