fix: Failing regression E2E tests

[DafyddLlyr]

What's the problem?

E2E "Invite to Pay" tests have been failing for a while (and flaky prior to that). Here's a description and video of the bug which was leading to these failures -

• Visit any "Invite to Pay" URL (e.g. /:team/:flow/pay or /:team/:flow/invite)
• Page loads as expected ✅
• Refresh page
• Endless "Loading..." spinner, error thrown in console ❌
• Refresh again - issue persists
• Hard refresh - back to normal page load

Sometime you can hit the error immediately without first encountering the successful page load.

This bug was getting hit in Invite to Pay E2E tests where multiple tabs were being opened and refreshed to check the status of payment requests.

Screen.Recording.2023-10-25.at.08.50.10.mov

What error is being thrown?

Uncaught (in promise) TypeError: ot is not a function
    at map.ts:20:47
    at Resolvable.ts:51:16
    at fi (main.f54878ac.js:1093:20469)
    at Object.next (main.f54878ac.js:1093:19696)
    at fi (main.f54878ac.js:1093:24012)
    at Object.next (main.f54878ac.js:1093:23809)
    at fi (main.f54878ac.js:1093:19899)
    at Object.next (main.f54878ac.js:1093:19696)
    at fi (main.f54878ac.js:1093:24012)
    at Object.next (main.f54878ac.js:1093:23809)

It's always some version of the above - please note that ot is a minified function name and can change from deploy to deploy. The stack trace however is consistent, and source maps show that it's an error being thrown by our routing library react-navi. The library is unfortunately deprecated and unmaintained, but having scoured their repo I'm pretty sure that the error matches this unresolved issue - frontarm/navi#174. The error call stack and actual location in the code suggests this.

Try as I might, I can't trigger this bug when React is running locally - only once it's built.

I've also spent a lot of time trying to wrap various functions and components in try/catch blocks or <ErrorBoundary>s without success to programmatically narrow it down - there's something happening internally in react-navi that we're not being exposed to or isn't bubbling up correctly.

No network requests are being made prior to the error being thrown.

What's the cause?

Something within the route() or map() functions for the /pay routes is throwing an error - usually the second time the page is loaded. This suggests caching (could be happening at a number of levels) and I spent a good while pursuing this line of thought as well - making sure all calls were not cached via Apollo or any other mechanism.

It eventually resorted to a tedious process of commenting out components and functions within the affected routes, rebuilding the React app, and running manual and E2E tests.

Narrowing down pointed to a pretty unlikely suspect - useSWRMutation(). If this was commented out, I couldn't replicate the issue - commented in it was consistently recreatable 🤯

useSWRMutation() also has cache options - changing these seemed to have no effect.

I don't actually think that this is an issue with useSWRMutation() as such, but rather some sort of incompatibility issue with
react-navi that we're not quite able to see and pick up on.

What's the fix?

Replace useSWRMutation() with fetch() and a few setState() hooks and all seems to work as expected. In the medium term I would be very interested in prioritising replacing this library for something stable, maintained, and established.

How as this bug introduced?

This is a great question which I wish I had a better answer for.

The first regression test failure related to this on main was on the 5th of October. Here's the list of commits from the 4th - nothing obvious here. I've also gone back through recent changes to permissions, routing, teamStore etc without much avail in finding the cause. Similarly git bisect wasn't super helpful - the bug is sort of flaky and I could find it further back than expected.

There was a successful regression test run on the 10th of October which demonstrates this "flakiness" - sometimes they pass, sometimes they don't.

So are regression tests passing now?

No 🥲

All E2E tests pass locally, and all previously failing "Invite to pay" test are now passing - see latest run here ✅

Now, two other tests are failing - I'm currently looking into this and hoping for a quick fix!

  2 failed
    [chromium] › create-flow.spec.ts:94:7 › Navigation › user data persists on page refresh @regression 
    [chromium] › create-flow.spec.ts:154:7 › Navigation › Preview a created flow ───────────────────
  32 passed (5.4m)

[github-actions]

Removed vultr server and associated DNS entries

[DafyddLlyr]

The missing ! here is my schoolboy error here that caused the latest Uniform submission to fail sorry!

If I can't progress this PR by later today I'll cherry-pick this commit into a new PR to get to prod for re-submission to take place.

[DafyddLlyr]

This allows us to run the React app at localhost:3000 when running Playwright tests and makes for a much better feedback loop than make change → build → re-run tests.

[DafyddLlyr]

The code changes in this file represent the fix to get the /pay routes to work as expected.

[jessicamcinchak]

Phew, thanks for really thorough write up of this one - swr <> react-navi incompatibility was definitely a twist !

Payments and everything else working as expected for me on the pizza, so going to approve this one now and happy for you to merge whenever you decide ready! Please feel free to ping me for re-review if you end up pushing further fixes directly to this branch / or very understandable if you want to temporarily skip newly failing tests & separate changes here 👍

[DafyddLlyr]

Thanks for the review! I've decided to go ahead and merge this and look into the outstanding issues on a new branch.