Show original error for transformed errors

Author: Ives van Hoorne

src/sandbox/react-error-overlay/components/overlay.js

@@ -14,6 +14,8 @@ import {
   overlayStyle,
   headerStyle,
   messageHeaderStyle,
+  originalHeaderStyle,
+  originalMessageHeaderStyle,
 } from '../styles';
 import { createClose } from './close';
 import { createFrames } from './frames';
@@ -92,6 +94,28 @@ function createOverlay(
   container.appendChild(header);
   container.appendChild(messageHeader);
 
+  // If the error has been transformed
+  if (error.originalName || error.originalMessage) {
+    const originalErrorContainer = document.createElement('div');
+    const errorHeader = document.createElement('div');
+    applyStyles(errorHeader, originalHeaderStyle);
+    errorHeader.appendChild(document.createTextNode('Original error:'));
+    originalErrorContainer.appendChild(errorHeader);
+
+    // Create header
+    const originalMessageHeader = document.createElement('div');
+    applyStyles(originalMessageHeader, originalMessageHeaderStyle);
+
+    originalMessageHeader.appendChild(
+      document.createTextNode(
+        `${error.originalName || ''}: ${error.originalMessage}`
+      )
+    );
+
+    originalErrorContainer.appendChild(originalMessageHeader);
+    messageHeader.appendChild(originalErrorContainer);
+  }
+
   if (
     areActionsEnabled() &&
     error.suggestions &&

src/sandbox/react-error-overlay/overlay.js

@@ -212,6 +212,9 @@ function transformErrors() {
         );
 
         if (transformation) {
+          errRef.error.originalName = errRef.error.name;
+          errRef.error.originalMessage = errRef.error.message;
+
           errRef.error.name = transformation.name || errRef.error.name;
           errRef.error.message = transformation.message;
           errRef.error.suggestions = transformation.suggestions;

src/sandbox/react-error-overlay/styles.js

@@ -112,6 +112,22 @@ const messageHeaderStyle = {
   'border-bottom': '1px solid #ddd',
 };
 
+const originalHeaderStyle = {
+  color: 'rgba(0, 0, 0, 0.7)',
+  'font-size': '.75em',
+  'padding-top': '1rem',
+  'padding-bottom': '.5rem',
+};
+
+const originalMessageHeaderStyle = {
+  color: 'black',
+  'font-size': '.875em',
+  'font-family': 'Consolas, Menlo, monospace',
+  margin: 0,
+  'white-space': 'pre-wrap',
+  overflow: 'auto',
+};
+
 const functionNameStyle = {};
 
 const linkStyle = {
@@ -234,6 +250,7 @@ const suggestionsButtonStyle = {
   'margin-bottom': '.5rem',
   'font-size': '.75rem',
   'border-radius': '4px',
+  'margin-right': '.5rem',
   border: '1px solid #6CAEDD',
   cursor: 'pointer',
 };
@@ -259,6 +276,8 @@ export {
   secondaryPreStyle,
   omittedFramesCollapsedStyle,
   omittedFramesExpandedStyle,
+  originalHeaderStyle,
+  originalMessageHeaderStyle,
   toggleStyle,
   codeStyle,
   hiddenStyle,