@sentry/gatsby fails to catch error triggered from useEffect #2785
Description
- Review the documentation: https://docs.sentry.io/
- Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
- Use the latest release: https://github.com/getsentry/sentry-javascript/releases
- Provide a link to the affected event from your Sentry account (There is no event, that's the point)
Package + Version
-
@sentry/browser -
@sentry/node -
raven-js -
raven-node(raven for node) - other:
@sentry/gatsby
Version:
5.20.1
Description
I'm using the official Sentry Gatsby plugin, but while it manages to catch and report crashes caused on click, it fails to catch a crash caused inside a useEffect. I have created two pages to test these two behaviours in my project, I'll provide the code below.
This is page error-test-sentry-on-click, and everything works fine, on each click of the button I see a request being sent to Sentry and the issue appears there:
import React from 'react';
import PageLayout from '../components/PageLayout';
const ErrorTestSentryOnClickPage = () => {
return (
<PageLayout title={'Error'}>
<button
onClick={() => {
const o = { d: 3 };
console.log(o.e.f);
}}
>
CLICK ME!
</button>
</PageLayout>
);
};
export default ErrorTestSentryOnClickPage;This is page error-test-sentry-use-effect, and while it does crash as soon as I open it, I see no request being sent to Sentry and no issue appears there:
import React, { useEffect } from 'react';
import PageLayout from '../components/PageLayout';
const ErrorTestSentryUseEffect = () => {
useEffect(() => {
const o = { a: 3 };
console.log(o.b.c);
});
return <PageLayout title={'Error'}>asdf</PageLayout>;
};
export default ErrorTestSentryUseEffect;My theory was that since the useEffect fires on load, it is firing before Sentry had a chance to initialize, but the onClientEntry (which is where Sentry is initializing) is always running before the useEffect does so that would be weird.
On the other hand, just adding a timeout of 0 is enough for the error to be correctly reported:
import React, { useEffect } from 'react';
import PageLayout from '../components/PageLayout';
const ErrorTestSentryUseEffect = () => {
useEffect(() => {
const o = { a: 3 };
setTimeout(() => {
console.log(o.b.c);
}, 0);
});
return <PageLayout title={'Error'}>asdf</PageLayout>;
};
export default ErrorTestSentryUseEffect;