Supporting old browsers

[nickoferrall]

Problem

When users use old browsers, they can encounter bugs and a degraded experience.

In December 2020, we upgraded to webpack 5 (#4455) where automatic polyfills were removed. Since then, ~100 users have experienced a fatal bug as their browser doesn't support flatMap. Sentry errors here & here.

What could we do?

• Add polyfills ❌
• Ask the user to upgrade their browser ✅
• Consider squashing older browser bugs on a case by case basis ✅
• Do nothing ❌

Suggestion

I suggest that we ask the user to upgrade their browser if they encounter a browser related bug.

I also suggest that we review older browser bugs on a case by case basis. If there's a simple solution, we could implement it.

Polyfills

If we use polyfills to add support for older browsers, we may prevent bugs and improve the user experience on older browsers.

However, polyfills can be complex to implement, unreliable and bloat the app. Adding support for <1% of users (who are typically non-paying customers) can degrade the performance for the remaining 99%. Supporting older browsers also degrades the developer experience.

Ask the user to upgrade their browser

We could show a pop-up when the user encounters a bug or display a temporary snackbar if we detect that they're using an old browser.

I suspect that people using an ancient browser are unlikely to upgrade if the app is working fine but a snackbar tells them to do so. It would probably just irritate them. But if they encounter a bug, it's helpful to give them feedback.

If Sentry reports a browser related bug, e.g. flatMap is not a function, we can add a check in the ErrorComponent that says if (arrayOfBrowserBugs.includes(error.name) show old browser error message instead of current generic error feedback.

Consider squashing older browser bugs if they're super simple

We've got an infinite number of things to build. Supporting older browsers for a tiny percentage of users shouldn't take our focus. However, if there's a bug affecting lots of users that can be fixed in minimal time without degrading the user or dev experience, why not do it?

Currently, we're using flatMap in two places causing a fatal bug for ~100 users. We could create a simple util function that performs the same method without crashing the app on older browsers.

The downside is that it's a frustrating for devs to not be able to use modern JavaScript and the team is unlikely to remember to use the util function as we scale.

Still, if replacing two flatMaps saves ~50 fatal bugs per month (at our current user base size), takes minimal time to implement and remains highly readable, I think it's worth doing.

Do nothing

There's an opportunity cost to everything but the above solutions are quick to implement and would provide helpful feedback to users.

[tianrunhe]

Here's another angle: is this a personal issue or a team/org issue?

1. Personal issue, meaning you are running on an ancient browser and your team member all have good Parabol experience. In this case I would imagine your team members will help you find the issue or you will contact customer support. If your team members don't help you, then find a new job. If you don't wanna contact CS, then you probably don't wanna use Parabol badly enough (considering all of your team members are using it just fine)?
2. Team-wide issue. Your entire team are running on ancient browsers. What do you do my friends? Do you work at government? 😂 In this case I guess the scenario will be like they run a meeting at Parabol, they all hit the bug, they wouldn't think their browsers are old. Instead they will just think Parabol is a stupid app that simply doesn't work. THIS is probably the issue we do like to solve if we have more government purchase in the future. Well, but I guess if that time comes, we can specify a minimum browser version requirement in the purchase contract.

Overall I guess I'm leaning toward to not worry about this for now but I do agree a simple pop-up is safe-to-try.

[adaniels-parabol]

Government is a good point. There is still a large portion of Federal/DOD using IE11. However, Edge/Chrome are quickly being adopted as Microsoft announced end of support back in Aug 2020 for IE11, with phase out dates for support rolling into 2021.

[avivapinchas]

Not sure what counts as an 'older browser' in this case, but wanted to share some data, in case it's helpful: what browser & version our users are using when visiting the app 🔒

[nickoferrall]

Helpful comments everyone, and thanks for the data Aviva. For me, an older browsers is one that is unable to use modern web features, such as flatMap. flatMap has been causing fatal bugs for customers using Chrome version 68 or older which makes up 0.41% of our users.

An additional point that @mattkrick brought up in our 1-1:

• Customers using old, deprecated browsers are a security risk. It's in both our and their best interest for them to upgrade their browser. If they encounter a bug, we can remind them to upgrade their browser rather than prevent the bug from happening.

I propose the following next steps:

• In the ErrorComponent, we check if the error is the flatMap one. If it is, rather than showing the default error message, render a message that explains that this happened because they're using an old browser and ask them to upgrade it.
• Don't send the error message to Sentry as we don't intend to fix it.
• If further old browser bugs occur, add the error message to the ErrorComponent to give the user feedback. If we feel a significant amount of user tension, particularly from paying users (e.g. a govt contract), we can reopen the discussion and consider implementing polyfills.

Please let me know if you have any objections. If not, I'll create an issue at the end of the week.