Expensify Pay Someone White Screen Issue During Identity Verification

Hey guys! Let's dive into a quirky issue that's been popping up in Expensify. It's all about the white screen of doom (well, not really doom, but it's annoying!) when trying to pay someone. We're going to break down the problem, what causes it, and what we can do about it. So, buckle up and let's get started!

Understanding the Issue

So, what's the deal? Expensify users are encountering a frustrating white screen issue when using the Pay Someone feature. This hiccup occurs specifically during the identity verification process, which is a crucial step for security. Imagine you're trying to send money, you've entered all the details, and then... blank screen! Not cool, right? This issue is reproducible in the staging environment, meaning our testers have been able to replicate the problem before it hits the live version. That's a win for us because we can catch these things early. However, we haven't been able to validate it in the production environment just yet. We're on it!

This problem was flagged during regression testing – a process where we re-run tests to make sure new changes haven't broken existing features. The specific test case that caught this is located here in our TestRail system. So, if you're into the nitty-gritty details, you can check that out. The issue was reported by our awesome Applause Internal Team, who are always on the lookout for these kinds of things. They've been using various devices, including a MacBook Air and an iPhone 15, to try and replicate the issue, which helps us get a clearer picture of the scope.

Steps to Reproduce the White Screen

Okay, so let's get into the specifics of how this white screen glitch happens. If you want to try and reproduce it yourself (maybe you're a QA whiz or just super curious), here are the steps:

1. First, sign in to ND (that's our internal testing environment) with a Gmail account that doesn't have a Wallet enabled. This is important because the issue seems to be related to accounts that need to set up their payment methods.
2. Next, navigate to a 1:1 chat with another user. This is where the "Pay Someone" feature lives.
3. Click the "+" button next to the composer (the text input area) and select "Pay User X." This will initiate the payment process.
4. Enter an amount you want to pay and click "Pay with Expensify."
5. Now, proceed with adding Regions BA (that's Bank Account) using the Alberta Charleson information. This is a set of test data we use for these scenarios.
6. You'll arrive at the "Verify identity" page. Click "Continue." This is where the magic (or rather, the not-so-magical white screen) happens.

If all goes according to plan (or rather, according to the bug), instead of seeing the "Consent to process biometric data and sensitive data" page, you'll be greeted by a blank, white screen. It's like the digital equivalent of a deer in headlights. The expected result is that the consent page should appear, allowing the user to proceed with identity verification. But alas, sometimes technology has other plans.

The Frustrating Actual Result: White Screen!

As we've discussed, the actual result isn't the smooth transition to the consent page we'd hoped for. Instead, users are staring at a blank white screen. It’s a bit like the internet equivalent of a blank stare – confusing and definitely not helpful. This interruption in the flow can be frustrating, especially when you're trying to send or receive money quickly. Imagine you're splitting a bill with a friend or paying a freelancer, and suddenly you're stuck at a white screen. Not ideal, right?

Now, here's a slightly weirder part: users are able to proceed with the identity verification process if they navigate back to the chat and start the "Pay someone" process again. It’s like the system needs a little nudge or a second try to get its act together. This suggests that there might be some kind of timing issue or a glitch in how the page is initially loaded. It’s like trying to start a car that needs a few tries before the engine finally turns over. It works eventually, but it’s not exactly a seamless experience.

This workaround – navigating back and restarting the process – isn't exactly intuitive, and most users wouldn't immediately think to try it. They might assume that something is fundamentally broken and abandon the process altogether. That’s why it’s so important to fix this white screen issue and make the user experience smoother and more reliable.

The Hunt for a Workaround (and a Proper Fix)

Currently, we've marked the workaround as "Unknown". This means we haven't found a consistent, reliable way for users to bypass the issue without restarting the process. While navigating back to the chat and trying again does seem to work, it’s not really a solution. It’s more of a temporary band-aid on a potentially bigger problem. We need to dig deeper and figure out what's causing this white screen in the first place so we can implement a proper fix.

The ideal scenario is that users should be able to proceed smoothly through the identity verification process without encountering any interruptions or blank screens. A seamless user experience builds trust and encourages people to use the Expensify platform for their payment needs. So, finding a workaround is just the first step. The real goal is to identify the root cause of the problem and implement a permanent solution that prevents the white screen from appearing in the first place.

Our engineers are on the case, and they'll be looking into the code, the server interactions, and everything in between to figure out what's going wrong. It could be a bug in the front-end code (the part you see), the back-end code (the part that runs on the server), or even a combination of factors. Debugging can be a bit like detective work – following clues, testing theories, and piecing together the puzzle until you find the culprit. But we're committed to solving this and making the Expensify experience as smooth as possible for everyone.

Platform Impact: A Cross-Platform Mystery

This white screen issue isn't just limited to one device or operating system; it's proving to be quite the multi-platform mystery! Our testing has revealed that it affects a wide range of platforms, which makes it a bit more challenging to pinpoint the cause. It's like trying to find a specific grain of sand on a beach – the more places it shows up, the harder it is to track down.

Here's a breakdown of the platforms affected:

• iOS: The issue is reproducible on the iOS app, as well as on mWeb Safari and mWeb Chrome. This means that whether you're using the native Expensify app on your iPhone or accessing the web version through a browser, you might encounter the dreaded white screen.
• Windows: Chrome users on Windows are also seeing the issue. So, if you're on a Windows machine and prefer Chrome, you're not immune to this bug.
• MacOS: The problem extends to MacOS users as well, affecting both Chrome and Safari. Whether you're a Safari loyalist or a Chrome devotee on a Mac, you could potentially run into the white screen.

Noticeably absent from this list are Android devices and the MacOS Desktop app. This doesn't mean they're completely immune, but so far, we haven't been able to reproduce the issue on those platforms. This information is valuable because it helps us narrow down the possible causes. Perhaps there's something specific to the way the Expensify web app interacts with Safari and Chrome on iOS, Windows, and MacOS that's triggering the bug.

Visual Evidence: Screenshots and Videos

A picture is worth a thousand words, and a video? Well, that's even more helpful when it comes to debugging! To give our developers a clearer understanding of the issue, we've included a screenshot and a video recording of the white screen in action. This visual evidence helps them see exactly what users are experiencing and provides valuable context for troubleshooting.

You can check out the visual evidence here. The screenshot shows the stark white screen that users encounter, while the video demonstrates the steps leading up to the issue and the blank screen itself. This kind of documentation is crucial for effective communication within the development team and helps ensure that everyone is on the same page.

By seeing the problem firsthand, developers can often gain insights that might not be apparent from written descriptions alone. It's like showing a mechanic the strange noise your car is making – they can often diagnose the problem much more quickly and accurately than if you just tried to describe it.

Open Jobs on GitHub: Help Wanted!

Want to get involved in solving issues like this and making Expensify even better? Good news! We have a bunch of open jobs on GitHub, and we're always looking for talented developers and QA engineers to join our team. If you're passionate about creating great user experiences and tackling challenging technical problems, we'd love to hear from you!

You can view all the open jobs on GitHub here. We're looking for people with a variety of skills and experience levels, so there's likely a role that's a good fit for you. Working at Expensify is a chance to contribute to a product that's used by millions of people around the world and to be part of a team that's dedicated to innovation and excellence.

Conclusion: Tackling the White Screen Together

So, there you have it – a deep dive into the Expensify Pay Someone feature white screen issue. It's a frustrating bug, but we're committed to squashing it! We've outlined the problem, the steps to reproduce it, the platforms affected, and the visual evidence we've gathered. Now, it's up to our amazing team of developers to get to the bottom of this and implement a fix.

In the meantime, if you encounter this white screen, remember the workaround: navigate back to the chat and try the "Pay someone" process again. It's not ideal, but it should get you through. And, of course, stay tuned for updates as we work towards a permanent solution.

Thanks for reading, guys! We appreciate your patience and understanding as we work to make Expensify the best it can be. And if you're a developer or QA engineer looking for a new challenge, don't forget to check out our open jobs on GitHub. Let's build something amazing together!