Can't get feedback dialog, or fallback component to show up

• 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 (N/A)

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other: @sentry/react

Version:

5.29.2

Description

I’m attempting to integrate Sentry into the front-end of my app. The app is an ejected Create-React-App arrangement.

I am successfully pushing errors to Sentry using Sentry.ErrorBoundary, but no matter what I do, I’m having trouble with two things:

1. The fallback value isn’t respected, and whatever component is being wrapped by Sentry.ErrorBoundary simply gets rendered as-normal when an error occurs.
2. No user feedback dialog is presented. In fact, using the described integration as-is, it doesn’t even attempt to fetch the code for the dialog. No network connection is attempted at all. When I try the framework-less approach adding a beforeSend hook, and calling Sentry.showReportDialog, the network request is attempted, but the URL is apparently wrong (domain is o450034.ingest.sentry.io instead of sentry.io), resulting in a 404 error and no dialog being shown.

Relevant code in src/index.jsx:

import * as Sentry from '@sentry/react';

// ...

Sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN,
    environment: process.env.REACT_APP_ENV || 'unknown',
    autoSessionTracking: true,
    integrations: [
        new Integrations.BrowserTracing(),
    ],

    tracesSampleRate: 1.0,
});

// ...

ReactDOM.render(
    <React.StrictMode>
        <ToastProvider autoDismiss autoDismissTimeout={5000}>
            <ApolloProvider client={client}>
                <ProvideAuth>
                    <Provider>
                        <BrowserRouter>
                            <App>
                                <Switch>
                                    {/* ... */}
                                    <PublicRoute path={routes.WHATEVER}><Whatever /></PublicRoute>

                                    <PrivateRoute path={routes.WHEREVER} exact><Wherever /></PrivateRoute>
                                </Switch>
                            </App>
                        </BrowserRouter>
                    </Provider>
                </ProvideAuth>
            </ApolloProvider>
        </ToastProvider>
    </React.StrictMode>,
    document.getElementById('root'),
);

With PrivateRoute defined as:

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router';
import * as Sentry from '@sentry/react';

import routes from 'routes';
import { useAuth } from 'hooks/use_auth';
import Fallback from 'modules/fallback';

function PrivateRoute({ children, path, ...rest }) {
    const auth = useAuth();

    return (
        <Sentry.ErrorBoundary
            showDialog
            fallback={Fallback}
        >
            <Route
                {...rest}
                path={path}
                render={({ location }) => {
                    if (!auth.initialized) {
                        return <>Checking that you&apos;re still logged in...</>;
                    }

                    if (auth.isSignedIn) {
                        return children;
                    }

                    const redirectState = {
                        pathname: routes.LOGIN,
                        state: { from: location },
                    };

                    return (<Redirect to={redirectState} />);
                }}
            />
        </Sentry.ErrorBoundary>
    );
}

PrivateRoute.propTypes = {
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
    path: PropTypes.string.isRequired,
    rest: PropTypes.arrayOf(PropTypes.any),
};

PrivateRoute.defaultProps = {
    rest: null,
};

export default PrivateRoute;

And PublicRoute:

import React from 'react';
import PropTypes from 'prop-types';
import { Route } from 'react-router';
import * as Sentry from '@sentry/react';

import Fallback from 'modules/fallback';

function PublicRoute({ children, path, ...rest }) {
    return (
        <Sentry.ErrorBoundary
            showDialog
            fallback={Fallback}
        >
            <Route
                {...rest}
                path={path}
            >
                {children}
            </Route>
        </Sentry.ErrorBoundary>
    );
}

PublicRoute.propTypes = {
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
    path: PropTypes.string.isRequired,
    rest: PropTypes.arrayOf(PropTypes.any),
};

PublicRoute.defaultProps = {
    rest: null,
};

export default PublicRoute;

And finally, Fallback:

import React from 'react';
import PropTypes from 'prop-types';

function Fallback({ error, componentStack, resetError }) {
    return (
        <>
            <div>You have encountered an error</div>
            <div>{error.toString()}</div>
            <div>{componentStack}</div>
            <button
                type="button"
                onClick={() => {
                    resetError();
                }}
            >
                Click here to reset!
            </button>
        </>
    );
}

Fallback.propTypes = {
    componentStack: PropTypes.arrayOf(PropTypes.any).isRequired,
    error: PropTypes.any.isRequired,
    resetError: PropTypes.func.isRequired,
};

Fallback.defaultProps = {};

export default Fallback;

[MrJoy]

Sigh. Just found where the docs for error boundaries explicitly note that they don’t catch exceptions from event handlers. That explains pretty much all of the issues I’ve encountered. >.<

[MrJoy]

@molanostephane Are you having problems with the fallback component not being rendered as well?