notFound.tsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. import styled from '@emotion/styled';
  2. import {Alert} from 'sentry/components/alert';
  3. import ExternalLink from 'sentry/components/links/externalLink';
  4. import Link from 'sentry/components/links/link';
  5. import {t, tct} from 'sentry/locale';
  6. import {space} from 'sentry/styles/space';
  7. const NotFound = () => (
  8. <Alert type="error" showIcon>
  9. <Heading>{t('Page Not Found')}</Heading>
  10. <p>{t('The page you are looking for was not found.')}</p>
  11. <p>{t('You may wish to try the following:')}</p>
  12. <ul>
  13. <li>
  14. {t(
  15. `If you entered the address manually, double check the path. Did you
  16. forget a trailing slash?`
  17. )}
  18. </li>
  19. <li>
  20. {t(
  21. `If you followed a link here, try hitting back and reloading the
  22. page. It's possible the resource was moved out from under you.`
  23. )}
  24. </li>
  25. <li>
  26. {tct('If all else fails, [link:contact us] with more details', {
  27. link: (
  28. <ExternalLink href="https://github.com/getsentry/sentry/issues/new/choose" />
  29. ),
  30. })}
  31. </li>
  32. </ul>
  33. <p>
  34. {tct('Not sure what to do? [link:Return to the dashboard]', {
  35. link: <Link to="/" />,
  36. })}
  37. </p>
  38. </Alert>
  39. );
  40. const Heading = styled('h1')`
  41. font-size: ${p => p.theme.fontSizeLarge};
  42. line-height: 1.4;
  43. margin-bottom: ${space(1)};
  44. `;
  45. export default NotFound;