We are currently adding Sentry.io to our React app and wrapping our root App component with the Sentry.withErrorBoundary() HOC and displaying a fallback ErrorPage. However, I think this only displays for errors that occur within the React Component Tree, and I'm wondering how to display the fallback ErrorPage for Global errors that occur outside the ErrorBoundary. See below for example:
// index.tsx
const AppRoot = withSentryErrorBoundary(App, {
fallback: getErrorPage,
});
ReactDOM.render(
<Provider store={store}>
<IntlProvider locale={locale} messages={messages}>
<AppRoot ... />
</IntlProvider>
</Provider>,
domNode
);
const getErrorPage: FallbackRender = (errorData): React.ReactNode => {
const { foo } = store.getState();
return (<DefaultErrorPage {...foo, ...errorData} />);
};
So I need to figure out 1.) how to hook into the global Sentry error handler so I can 2.) manually trigger the ReactDOM.render() with the ErrorPage component instead of the root App. Can anyone help point me in the right direction? Thanks!