Merge pull request #13348 from storybookjs/13314-ie11-runtime-errors

Core: Fix IE11 compatibility by using XHR and plain ES5
storybookjs · Dec 3, 2020 · 2a46f0d · 2a46f0d
2 parents be5ed50 + 90871c0
commit 2a46f0d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/lib/core/src/server/dev-server.ts b/lib/core/src/server/dev-server.ts
@@ -283,9 +283,9 @@ const startManager = async ({
 
   // Used to report back any client-side (runtime) errors
   router.post('/runtime-error', express.json(), (request, response) => {
-    if (request.body?.error) {
+    if (request.body?.error || request.body?.message) {
       logger.error('Runtime error! Check your browser console.');
-      logger.error(request.body.error.stack || request.body.message || request.body);
+      logger.error(request.body.error?.stack || request.body.message || request.body);
       if (request.body.origin === 'manager') clearManagerCache(options.cache);
     }
     response.sendStatus(200);

diff --git a/lib/core/src/server/templates/base-manager-head.html b/lib/core/src/server/templates/base-manager-head.html
@@ -27,12 +27,20 @@
   window.onerror = function onerror(message, source, line, column, err) {
     if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
     // eslint-disable-next-line no-var, vars-on-top
-    var error = err ? { message: err.message, name: err.name, stack: err.stack } : {};
-    window.fetch('/runtime-error', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      // eslint-disable-next-line object-shorthand, prettier/prettier
-      body: JSON.stringify({ message: message, source: source, line: line, column: column, error: error, origin: 'manager' }),
-    });
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'manager',
+        /* eslint-enable object-shorthand */
+      })
+    );
   };
 </script>
diff --git a/lib/core/src/server/templates/base-preview-head.html b/lib/core/src/server/templates/base-preview-head.html
@@ -115,12 +115,20 @@
   window.onerror = function onerror(message, source, line, column, err) {
     if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
     // eslint-disable-next-line no-var, vars-on-top
-    var error = err ? { message: err.message, name: err.name, stack: err.stack } : {};
-    window.fetch('/runtime-error', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      // eslint-disable-next-line object-shorthand, prettier/prettier
-      body: JSON.stringify({ message: message, source: source, line: line, column: column, error: error, origin: 'preview' }),
-    });
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'preview',
+        /* eslint-enable object-shorthand */
+      })
+    );
   };
 </script>