Keep HTML instead of showing a blank page when trying to load corrupted JS in IE11

Question

I'm working on a node project that uses create-react-app and webpack to bundle the JavaScript files when building the website. I don't intend to support IE, however I'd like to have a message being shown to users who open the application with IE, as by default the app crashes due to the missing support of the browser by create-react-app without polyfills.

The idea is to include a loading message in the HTML-template used by Webpack, which is removed when React has finished rendering. In case React couldn't render properly or some of the JS is not supported by the browser, the loading message is supposed to stay there. However, when the JS files are included in the browser, the whole page just goes blank due to the errors in the JavaScript files (i.e. the by IE unsupported features) and therefore the message also disappears.

Is there any way to prevent the page from going blank and instead keep the HTML that was there before?

Answer 1

I suggest you try to add polyfills below at the starting of the index.js file.

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

Add other polyfills if necessary.

Add IE 11 in development browserlist in package.json file.

"browserslist": {
    "production": [
      "ie 11",      
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Delete the .cache folder inside node_modules folder and again try to run the app.

App should load in the IE 11 browser.

After that try to use the JS code below and add it to your react app.

Below code will identify the IE browser using user agent and you can display the helpful message to the users.

 function detectIE() {
           var ua = window.navigator.userAgent;
         
           var msie = ua.indexOf('MSIE ');
           if (msie > 0) {
            
             return "IE " + parseInt( ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
           }
         
           var trident = ua.indexOf('Trident/');
           if (trident > 0) {
            
             var rv = ua.indexOf('rv:');
             return "IE " + parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
           }

           // other browser
           return "false";
         }
         var result=detectIE();
         if (result=="false")
         {
            document.getElementById("info").innerHTML +="<h2>Welcome to the site...</h2>";
         }
         else
         {
            document.getElementById("info").innerHTML += "<h2>Dear user you are using " + result + " This browser is not supported by this site. Kindly use supported browser...</h2>";
         }

Further, you can modify the code sample as per your own requirements.