Don't Let Them See Your Errors! Use Friendly Error Pages

Tips and Tricks
1

Friendly error pages aren't new, or tricky. But at some point, you will need to prevent your users from seeing errors on your site. These errors can reveal sensitive data at the worst, or leave the user with no idea what happened or what to do next. A poor user experience for sure.

I love how Wappler easily lets us create friendly error pages when things go wrong. It's as simple as creating a new content page, calling it "404" or "500" as examples, and designing it to be informative for the user. A standard error page should be written in simple, non-technical language, say something unexpected happened, and offer ways for the user to continue or get further help. None of that is provided by the server if you aren't using a friendly error page.

I like to keep things lighthearted in the copy. It's not the end of the world, and in all cases, the top navigation bar is always present (located in my main layout page) to allow the user a way to navigate off the friendly error page.

Screenshot 2024-09-20 at 4.24.42 PM
Screenshot 2024-09-20 at 4.24.42 PM1920×1131 143 KB

Here's a tip: include a mailer element in your friendly error pages to email yourself pertinent info whenever the page is sent by the server. You'll get a notification in near-real time and find it easier to diagnose what might be happening.

5 Likes
2

tl;dr

Be careful suggesting this! 404 errors can be triggered by random bots, and you don't want to receive 20 e-mails per minute!

I think it's best to sign-up to Google's Search Console to get notified of any 404 errors.

1 Like
3

Fair point. I too use google's search console (search.google.com/search-console). To each his/her own on the notifications. My personal preference is to be notified of errors, especially when created internally by my app. I use the mailer element on many of my Stripe webhook API's for example, registration flow, and password changes.

4

Have you heard of Sentry or GlitchTip?