moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SiteErrorBoundary: rework conditionals for Sentry and production

This commit is contained in:
Alex Gleason 2023-10-21 15:52:37 -05:00
parent 5bbce463e7
commit c33ff771da
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/site-error-boundary.tsx
View File

@ -18,13 +18,14 @@ interface ISiteErrorBoundary {
/** Application-level error boundary. Fills the whole screen. */ /** Application-level error boundary. Fills the whole screen. */
const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => { const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
const { links } = useSoapboxConfig(); const { links, sentryDsn } = useSoapboxConfig();
const textarea = useRef<HTMLTextAreaElement>(null); const textarea = useRef<HTMLTextAreaElement>(null);
const [error, setError] = useState<unknown>(); const [error, setError] = useState<unknown>();
const [componentStack, setComponentStack] = useState<string>(); const [componentStack, setComponentStack] = useState<string>();
const [browser, setBrowser] = useState<Bowser.Parser.Parser>(); const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
const sentryEnabled = Boolean(sentryDsn);
const isProduction = NODE_ENV === 'production'; const isProduction = NODE_ENV === 'production';
const errorText = String(error) + componentStack; const errorText = String(error) + componentStack;
@ -52,18 +53,16 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
setError(error); setError(error);
setComponentStack(info.componentStack); setComponentStack(info.componentStack);
if (isProduction) { captureSentryException(error, {
captureSentryException(error, { tags: {
tags: { // Allow page crashes to be easily searched in Sentry.
// Allow page crashes to be easily searched in Sentry. ErrorBoundary: 'yes',
ErrorBoundary: 'yes', },
}, });
});
import('bowser') import('bowser')
.then(({ default: Bowser }) => setBrowser(Bowser.getParser(window.navigator.userAgent))) .then(({ default: Bowser }) => setBrowser(Bowser.getParser(window.navigator.userAgent)))
.catch(() => {}); .catch(() => {});
}
} }
function goHome() { function goHome() {
@ -116,27 +115,31 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
</div> </div>
</div> </div>
{!isProduction && ( <div className='mx-auto max-w-lg space-y-4 py-16'>
<div className='mx-auto max-w-lg space-y-4 py-16'> {(isProduction && sentryEnabled) ? (
{errorText && ( <>{/* TODO: Sentry report form. */}</>
<textarea ) : (
ref={textarea} <>
className='block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm' {errorText && (
value={errorText} <textarea
onClick={handleCopy} ref={textarea}
dir='ltr' className='block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
readOnly value={errorText}
/> onClick={handleCopy}
)} dir='ltr'
readOnly
/>
)}
{browser && ( {browser && (
<Stack> <Stack>
<Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text> <Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
<Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text> <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
</Stack> </Stack>
)} )}
</div> </>
)} )}
</div>
</div> </div>
</main> </main>