How do I detect if a browser supports a react-redux application and/or fails to load?

Question

I joined a small team that's developing/maintaining a react-redux based website several months ago; one of my colleagues informed me that some users are using old versions of internet explorer and that the website fails to load in those cases. I'm pretty sure it's because we are using many of the modern conveniences offered by ES 6 and the like but I don't know specifically what's causing the issue; accordingly, without providing the proper support for older browsers ( https://facebook.github.io/create-react-app/docs/supported-browsers-features and using polyfill) is there a way to display alternative content if the browser can't load anything without refactoring the pieces of JavaScript that use modern features?

I'm developing on a very modern workstation with windows 10 and I quickly tested the website using three major browsers: Chrome, Firefox and Edge. From my knowledge, all the browsers on this computer are up to date and the website would even load on my phone using a mobile version of Chrome.

Without having the luxury of knowing exactly what's causing older browsers to fail and/or which ones and what versions are a problem and learning about how to use polyfill or other techniques to provide support for those older browsers, is there something I can do quickly in the meantime just so users that happen to use old browsers will know why the site doesn't work by displaying an error message?

Luckily the root of the website is nice and tidy:

    import React from 'react';
    import { render } from 'react-dom';
    import configureStore from './configureStore';
    import Root from './components/Root';

    const store = configureStore();

    render(
      <Root store={store} />,
      document.getElementById('root')
    );

And that's it, this is the topmost component. How would I display alternative content for browsers that can't load the website? We're going to include a list of supported browsers on the website but if users can't even load the page they wouldn't even know what was going wrong; a simple message would be sufficient for now.

It would be nice to support older browsers too but I don't know what modern browser feature(s) are the problem and how to add/implement support for them; as a nice to have bonus question, what is involved with doing just that? That is, adding support for older browsers by determining exactly what is causing the issue for which browsers feature-set. There are other things I am working on and this issue a lower priority for now but if it doesn't take much work then I'll be more than happy to implement cross browser support stuff, I don't know how at the moment and I'm not sure where to start.

In any case, hopefully providing a fallback message to display is easy enough to add and should at least alleviate some user frustration/confusion.

Answer 1

Babel has integrated support for Browser compatibility compilation . For example, you can add this in a .browserlistrc file:

> 0.25%
not dead

and the generated compiled code will be compatible with 99.75% of alive browsers. Based on this, you can build a React app that will work correctly on these browsers. It's then up to you to decide on the compatibility VS performance tradeoff.

Additionally, you can build two React apps, one for performance and one for compatibility. Using the navigator API , you can detect whether or not the browser will be compatible with your performant React app, and chose which app to serve.