better error display for unsupported browsers

[bkmartinjr]

We see occasional users attempt to use cellxgene with unsupported browsers (eg, IE on Win 7). It would be nice if the front-end could present the user with something other than a hard failure.

[colinmegill]

MDN has a thoughtful article on feature detection vs user agent detection: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

If we decide to go the user agent route, ua-parser-js https://www.npmjs.com/package/ua-parser-js seems serviceable.

[colinmegill]

Todo: add hard page refresh to trigger Google Analytics, so that we know how many people are seeing the page (and by proxy, to be explicit, what percentage of our users are on an unsupported browser)

[seve]

As of now, what browsers are confirmed unsupported?

[bkmartinjr]

Candidates likely to be outside of design scope or not work:

• any version of IE due to missing features
• small form-factor devices
  This will require some research on the basic mechanism is built, eg, https://caniuse.com/

Suggest starting with the known failures we have, eg, the old IE that doesn't have required feature suppot.

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-N

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-1R

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-1E

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-1B

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-18

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-M

[tihuan]

For context, Meta uses nomodule attribute on <script /> tag to show a custom message to unsupported browsers. I think we got the inspiration from this post

The gist is that older browsers don't recognize nomodule attribute, so it will execute the custom message script, while modern browsers won't.

The actual PR is here: https://github.com/chanzuckerberg/khepri/pull/3825!

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-1Q

[seve]

babel-preset-modern-browsersdefined most, if not all, of our incompatibilities(https://github.com/christophehurpeau/babel-preset-modern-browsers)

[tihuan]

It seems like we just want to have a better error message for browsers we don't support, instead of showing a blank page or something?

If so, I think #1477 (comment) would solve the problem, and for the versions of modern browsers we support, we could do the same as Meta?:

"browserslist": [
    "Chrome > 60",
    "Safari >= 10.1",
    "iOS >= 10.3",
    "Firefox >= 60",
    "Edge >= 15"
  ],

Then we just need to make sure to transpile our code down to ES6 and things should just work!

[bkmartinjr]

We don't support small form factor devices. So we want to catch that as well. My primary requirement is that we show a clean page, with a friendly "sorry" message, if it is a device we don't support.

[tihuan]

Ahh viewport size! I see that iPad's viewport size is 1024x768. So do we just add another requirement that the viewport needs to be above that (and explicitly say that in the message too)?

And we will also show the sorry message if someone resizes their laptop browser to be below the threshold too?

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-1X

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-26

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-22

[seve]

Looks like the TextDecoder API is unsupported by Edge < v79.0.0
https://sentry.prod.si.czi.technology/sci-sc/hosted-cellxgene/issues/7558/?environment=prod

---

Template Literals API unsupported by FireFox < 34 + Chrome < 40

---

const has limited functionality in Firefox < 36 + Chrome < 49 + Safari < 10

https://sentry.prod.si.czi.technology/sci-sc/hosted-cellxgene/issues/4347/?referrer=github_integration

[seve]

@tihuan Looks like Meta's supported browser list includes Edge versions 15-18 which don't support TextDecoder. Since Edge 14+ supports ES6 it would pass through the nomodule attribute. Is there a way we could tweak Babel to polyfill TextDecoder?

[tihuan]

Ooh awesome catch, @seve ! 🥇 🎉

I was looking at https://stackoverflow.com/a/36949791, it seems like https://github.com/anonyco/FastestSmallestTextEncoderDecoder is the library recommended by MDN!

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-2K

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-27

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-W

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-2P

[si-sentry]

Sentry issue: HOSTED-CELLXGENE-1G