mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

SiteErrorBoundary: refactor links, optimize for production

environments/review-main-yi2y9f/deployments/4227
Alex Gleason 2023-10-21 15:43:25 -05:00
rodzic 45c1d252ba
commit 5bbce463e7
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 40 dodań i 30 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

70
src/components/site-error-boundary.tsx
Wyświetl plik

@ -1,4 +1,4 @@
import React, { ErrorInfo, useRef, useState } from 'react'; import React, { type ErrorInfo, useRef, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -21,12 +21,12 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
const { links } = useSoapboxConfig(); const { links } = useSoapboxConfig();
const textarea = useRef<HTMLTextAreaElement>(null); const textarea = useRef<HTMLTextAreaElement>(null);
const [error, setError] = useState<any>(); const [error, setError] = useState<unknown>();
const [componentStack, setComponentStack] = useState<any>(); const [componentStack, setComponentStack] = useState<string>();
const [browser, setBrowser] = useState<Bowser.Parser.Parser>(); const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
const isProduction = NODE_ENV === 'production'; const isProduction = NODE_ENV === 'production';
const errorText = error + componentStack; const errorText = String(error) + componentStack;
const clearCookies: React.MouseEventHandler = (e) => { const clearCookies: React.MouseEventHandler = (e) => {
localStorage.clear(); localStorage.clear();
@ -52,16 +52,18 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
setError(error); setError(error);
setComponentStack(info.componentStack); setComponentStack(info.componentStack);
captureSentryException(error, { if (isProduction) {
tags: { captureSentryException(error, {
// Allow page crashes to be easily searched in Sentry. tags: {
ErrorBoundary: 'yes', // Allow page crashes to be easily searched in Sentry.
}, 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() {
@ -141,29 +143,21 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
<footer className='mx-auto w-full max-w-7xl shrink-0 px-4 sm:px-6 lg:px-8'> <footer className='mx-auto w-full max-w-7xl shrink-0 px-4 sm:px-6 lg:px-8'>
<HStack justifyContent='center' space={4} element='nav'> <HStack justifyContent='center' space={4} element='nav'>
{links.get('status') && ( {links.get('status') && (
<> <SiteErrorBoundaryLink href={links.get('status')!}>
<a href={links.get('status')} className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'> <FormattedMessage id='alert.unexpected.links.status' defaultMessage='Status' />
<FormattedMessage id='alert.unexpected.links.status' defaultMessage='Status' /> </SiteErrorBoundaryLink>
</a>
</>
)} )}
{links.get('help') && ( {links.get('help') && (
<> <SiteErrorBoundaryLink href={links.get('help')!}>
<span className='inline-block border-l border-gray-300' aria-hidden='true' /> <FormattedMessage id='alert.unexpected.links.help' defaultMessage='Help Center' />
<a href={links.get('help')} className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'> </SiteErrorBoundaryLink>
<FormattedMessage id='alert.unexpected.links.help' defaultMessage='Help Center' />
</a>
</>
)} )}
{links.get('support') && ( {links.get('support') && (
<> <SiteErrorBoundaryLink href={links.get('support')!}>
<span className='inline-block border-l border-gray-300' aria-hidden='true' /> <FormattedMessage id='alert.unexpected.links.support' defaultMessage='Support' />
<a href={links.get('support')} className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'> </SiteErrorBoundaryLink>
<FormattedMessage id='alert.unexpected.links.support' defaultMessage='Support' />
</a>
</>
)} )}
</HStack> </HStack>
</footer> </footer>
@ -177,4 +171,20 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
); );
}; };
interface ISiteErrorBoundaryLink {
href: string;
children: React.ReactNode;
}
function SiteErrorBoundaryLink({ href, children }: ISiteErrorBoundaryLink) {
return (
<>
<span className='inline-block border-l border-gray-300' aria-hidden='true' />
<a href={href} className='text-sm font-medium text-gray-700 hover:underline dark:text-gray-600'>
{children}
</a>
</>
);
}
export default SiteErrorBoundary; export default SiteErrorBoundary;