3 files changed, 25 insertions, 3 deletions
diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js
index 62950a7d3..8998802b1 100644
--- a/app/javascript/flavours/glitch/components/error_boundary.js
+++ b/app/javascript/flavours/glitch/components/error_boundary.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { preferencesLink } from 'flavours/glitch/util/backend_links';
+import StackTrace from 'stacktrace-js';
 
 export default class ErrorBoundary extends React.PureComponent {
 
@@ -11,15 +12,29 @@ export default class ErrorBoundary extends React.PureComponent {
 
   state = {
     hasError: false,
+    errorMessage: undefined,
     stackTrace: undefined,
+    mappedStackTrace: undefined,
     componentStack: undefined,
   }
 
   componentDidCatch(error, info) {
     this.setState({
       hasError: true,
+      errorMessage: error.toString(),
       stackTrace: error.stack,
       componentStack: info && info.componentStack,
+      mappedStackTrace: undefined,
+    });
+
+    StackTrace.fromError(error).then((stackframes) => {
+      this.setState({
+        mappedStackTrace: stackframes.map((sf) => sf.toString()).join('\n'),
+      });
+    }).catch(() => {
+      this.setState({
+        mappedStackTrace: undefined,
+      });
     });
   }
 
@@ -29,13 +44,16 @@ export default class ErrorBoundary extends React.PureComponent {
   }
 
   render() {
-    const { hasError, stackTrace, componentStack } = this.state;
+    const { hasError, errorMessage, stackTrace, mappedStackTrace, componentStack } = this.state;
 
     if (!hasError) return this.props.children;
 
     let debugInfo = '';
     if (stackTrace) {
-      debugInfo += 'Stack trace\n-----------\n\n```\n' + stackTrace.toString() + '\n```';
+      debugInfo += 'Stack trace\n-----------\n\n```\n' + errorMessage + '\n' + stackTrace.toString() + '\n```';
+    }
+    if (mappedStackTrace) {
+      debugInfo += 'Mapped stack trace\n-----------\n\n```\n' + errorMessage + '\n' + mappedStackTrace.toString() + '\n```';
     }
     if (componentStack) {
       if (debugInfo) {
diff --git a/app/javascript/flavours/glitch/util/base_polyfills.js b/app/javascript/flavours/glitch/util/base_polyfills.js
index ad023eb73..4b8123dba 100644
--- a/app/javascript/flavours/glitch/util/base_polyfills.js
+++ b/app/javascript/flavours/glitch/util/base_polyfills.js
@@ -6,6 +6,7 @@ import assign from 'object-assign';
 import values from 'object.values';
 import isNaN from 'is-nan';
 import { decode as decodeBase64 } from './base64';
+import promiseFinally from 'promise.prototype.finally';
 
 if (!Array.prototype.includes) {
   includes.shim();
@@ -23,6 +24,8 @@ if (!Number.isNaN) {
   Number.isNaN = isNaN;
 }
 
+promiseFinally.shim();
+
 if (!HTMLCanvasElement.prototype.toBlob) {
   const BASE64_MARKER = ';base64,';
 
diff --git a/app/javascript/flavours/glitch/util/load_polyfills.js b/app/javascript/flavours/glitch/util/load_polyfills.js
index 8cb81c1a6..73eedc9dc 100644
--- a/app/javascript/flavours/glitch/util/load_polyfills.js
+++ b/app/javascript/flavours/glitch/util/load_polyfills.js
@@ -18,7 +18,8 @@ function loadPolyfills() {
     Number.isNaN &&
     Object.assign &&
     Object.values &&
-    window.Symbol
+    window.Symbol &&
+    Promise.prototype.finally
   );
 
   // Latest version of Firefox and Safari do not have IntersectionObserver.