Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: better error page #5536

Merged
merged 6 commits into from
Dec 5, 2022
Merged

feat: better error page #5536

merged 6 commits into from
Dec 5, 2022

Conversation

grabbou
Copy link
Contributor

@grabbou grabbou commented Dec 5, 2022

Implements a new design of the error page as per Figma, aligns with new components/sizing where possible.

To reproduce, uncomment isProduction check in index.tsx to init Sentry and then, add the following:

useEffect(() => {
    throw new Error('test')
  })

somewhere in the code, preferably in a top-level page component.


Screenshot 2022-12-05 at 21 44 56

Screenshot 2022-12-05 at 21 45 02

Screenshot 2022-12-05 at 21 45 16


Todo:

  • check translations
  • vertical scroll when text overflows on smaller screens / large error stack trace
  • error id from Sentry instead of a placeholder

@vercel
Copy link

vercel bot commented Dec 5, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
interface ✅ Ready (Inspect) Visit Preview Dec 5, 2022 at 6:38PM (UTC)

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Dec 5, 2022

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 54b8ec4
Status: ✅  Deploy successful!
Preview URL: https://edab4cdc.interface-y3o.pages.dev
Branch Preview URL: https://feat-error-page.interface-y3o.pages.dev

View logs

@grabbou
Copy link
Contributor Author

grabbou commented Dec 5, 2022

Sentry temporarily pinned down to an older version till getsentry/sentry-javascript#6392 is released (results in an eventId being 0000000)

@grabbou grabbou marked this pull request as ready for review December 5, 2022 17:42
@grabbou grabbou requested review from a team and vm and removed request for a team December 5, 2022 17:46
package.json Show resolved Hide resolved
@@ -90,19 +90,19 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
</RowBetween>
{stakingInfo?.stakedAmount && (
<AutoColumn justify="center" gap="md">
<ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
<ThemedText.HeadlineLarge>
Copy link
Contributor Author

@grabbou grabbou Dec 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding HeadlineLarge from Figma, I did a quick search to replace places where DeprecatedBody was used to achieve same settings. Note that this is non-breaking, since DeprecatedBody text color is actually a textPrimary.

@grabbou
Copy link
Contributor Author

grabbou commented Dec 5, 2022

Will wait for another pass, since I ended up doing few more changes!

@grabbou grabbou merged commit e8880be into main Dec 5, 2022
@grabbou grabbou deleted the feat/error-page branch December 5, 2022 18:55
@grabbou
Copy link
Contributor Author

grabbou commented Dec 5, 2022

Errors just got better 🎉 Now it's time to make sure this page appears less often!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants