Sentry-javascript: @sentry/gatsby fails to catch error triggered from useEffect

Created on 29 Jul 2020 · 5Comments · Source: getsentry/sentry-javascript

[x] Review the documentation: https://docs.sentry.io/
[x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
[x] 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)_
[x] 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;

In Progress

Source