[HOLD for payment 2022-01-25] Create Expensify branded generic error page

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Coming from #6478 – following a good suggestion from @zoontek.

Action Performed:

No specific action – just any action that causes an uncaught JS exception caught by our ErrorBoundary. Of course, we never want to land here, because it's a sign that our app isn't working as it's supposed to. But over the lifetime of this app it's a near-inevitability that we'll introduce a few bugs that get caught by our error boundary. Right now, we just display a blank white screen.

Expected Result:

Instead of rendering a blank white screen, we should display an Expensify-branded generic error screen.

Mockup

Copy

Title

Uh-oh, something went wrong!

Body (iOS/Android)

Please try closing and reopening the app or switching to web.

If the problem persists, reach out to concierge@expensify.com.

Body (web/mWeb/desktop)

If the problem persists, reach out to concierge@expensify.com.

Button text

Should say Reload, not Refresh

Actual Result:

We show a blank white screen.

Workaround:

n/a

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Reproducible in staging?:
Reproducible in production?:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by: @zoontek here
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @megankelso (Design), see these Stack Overflow questions for more details.

[megankelso]

I've been approaching this as essentially a 404 page but @roryabraham let me know if I'm mistaken? Depending on what errors will land you here probably affects what kind of links/copy we should include.

On the design side, I've been a bit stumped. I agree that this is a great opportunity for a little brand moment but it feels like we have no branding to insert here, at least not visually. We could play with our colors for perhaps a two color design but New Expensify is so minimal and light that something colorful would probably feel too dissimilar compared to the other screens.

Here's what I played around with just to see.

I think the best options for now is come up with some clever copy for a simple screen like on the left? cc @Expensify/marketing for ideas!

[rosegrech]

Love your proposal here Megan! So do we need more specific error copy? Are you are proposing copy on the left? If the latter, then just add the Waiting for copy label for someone to review it.

If specific error fun copy is needed would be helpful to shed more light there @roryabraham and feel free to propose it and then add the waiting for copy label for marketing to review. thanks gang!

[mallenexpensify]

@roryabraham and whomever might be assigned as the CM, I added @zoontek as "Reported by:" in the OP because I think they should be compensated $250 for reporting this here, once this issue has been fixed internally or externally

[megankelso]

I think we need some clarity on what information this copy may need to include. If it's just a 404 page, I think something like the above is fine.

Regardless, would love to work with marketing on ideas! Just wrote these for mockups.

[rosegrech]

Thanks @megankelso

@roryabraham please let us know what info in this copy, if any, is needed. If something nada and we can go with something generic like Megan proposed, we can work off that! thanks

[roryabraham]

Okay @rosegrech let's include the following information:

1. On iOS/Android, a link to the website.
2. concierge email link

So something like this might be a rough draft (which you can tweak and improve as you see fit):

Uh-oh, something went wrong! (next sentence on mobile only) Please try closing and reopening the app, and if that doesn't work you can always try using our [website](https://new.expensify.com/). And as always, Concierge is available to help! You can reach out on our website or by emailing concierge@expensify.com to get help!

[roryabraham]

This is similar to a 404, but not exactly the same. 404 means the user tried to go to a page that doesn't exist (and that concept doesn't really exist on a mobile app). This is more of a 500 error page which means the user didn't do anything wrong, and the error happened on our side. Basically, this page would be shown when we have a bug in the application that would normally crash the app, but instead we'll catch that error and show them this page.

[megankelso]

super helpful clarification, thanks Rory! going to add the waiting for copy label for review/ideas now, then I can update the mockup