import { css } from '@emotion/react'; import { Button, theme, typography } from '@expo/styleguide'; import { spacing } from '@expo/styleguide-base'; import * as Sentry from '@sentry/browser'; import { useEffect, useState } from 'react'; import { getRedirectPath } from '~/common/error-utilities'; import Head from '~/components/Head'; import { NotFoundImage, RedirectImage, ServerErrorImage } from '~/ui/components/ErrorPage'; import { Layout } from '~/ui/components/Layout'; import { H1, P } from '~/ui/components/Text'; const REDIRECT_SUFFIX = '?redirected'; const renderRedirect = () => ( // note(simek): "redirect-link" ID is needed for test-links script <>

Redirecting

); const renderNotFoundAfterRedirect = () => ( <>

404: Not Found

We took an educated guess and tried to direct you to the right page, but it seems that did not work out! Maybe it doesn't exist anymore! đŸ˜”

); const renderNotFound = () => ( <>

404: Not Found

We couldn't find the page you were looking for. Check the URL to make sure it's correct and try again.

); const Error = () => { const [notFound, setNotFound] = useState(false); const [redirectFailed, setRedirectFailed] = useState(false); const [redirectPath, setRedirectPath] = useState(undefined); useEffect(() => { if (typeof window === 'undefined') { return; } const { pathname, search } = window.location; if (search === REDIRECT_SUFFIX) { Sentry.captureMessage(`Redirect failed`); setRedirectFailed(true); return; } const newRedirectPath = getRedirectPath(pathname); if (newRedirectPath !== pathname) { setRedirectPath(newRedirectPath); return; } // We are confident now that we can render a not found error setNotFound(true); Sentry.captureMessage(`Page not found (404)`, { extra: { '404': pathname, }, }); }, []); useEffect(() => { if (redirectPath && typeof window !== 'undefined') { setTimeout(() => (window.location.href = `${redirectPath}${REDIRECT_SUFFIX}`), 1200); } }, [redirectPath]); const getContent = () => { if (redirectPath) { return renderRedirect(); } else if (redirectFailed) { return renderNotFoundAfterRedirect(); } else if (notFound) { return renderNotFound(); } return undefined; }; return ( {getContent()} ); }; export default Error; const styles = { layout: css({ backgroundColor: theme.background.subtle, }), container: css({ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', }), header: css({ ...typography.fontSizes[31], marginTop: spacing[8], }), description: css({ textAlign: 'center', maxWidth: 450, marginTop: spacing[6], marginBottom: spacing[8], color: theme.text.secondary, }), };