Fix missing wildcardRequire and error overlay showing error boundary issues

Author: CompuIves

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -530,14 +530,18 @@ export const previewActionReceived: Action<{
         severity: action.severity,
         type: action.type,
       };
-      const module = resolveModule(
-        error.path,
-        state.editor.currentSandbox.modules,
-        state.editor.currentSandbox.directories
-      );
+      try {
+        const module = resolveModule(
+          error.path,
+          state.editor.currentSandbox.modules,
+          state.editor.currentSandbox.directories
+        );
 
-      module.errors.push(json(error));
-      state.editor.errors.push(error);
+        module.errors.push(json(error));
+        state.editor.errors.push(error);
+      } catch (e) {
+        /* ignore, this module can be in a node_modules for example */
+      }
       break;
     }
     case 'show-correction': {
@@ -551,14 +555,18 @@ export const previewActionReceived: Action<{
         source: action.source,
         severity: action.severity,
       };
-      const module = resolveModule(
-        correction.path,
-        state.editor.currentSandbox.modules,
-        state.editor.currentSandbox.directories
-      );
+      try {
+        const module = resolveModule(
+          correction.path,
+          state.editor.currentSandbox.modules,
+          state.editor.currentSandbox.directories
+        );
 
-      state.editor.corrections.push(correction);
-      module.corrections.push(json(correction));
+        state.editor.corrections.push(correction);
+        module.corrections.push(json(correction));
+      } catch (e) {
+        /* ignore, this module can be in a node_modules for example */
+      }
       break;
     }
     case 'clear-errors': {

packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js

@@ -359,11 +359,17 @@ async function compile(code, customConfig, path, isV7) {
     if (isV7) {
       // Force push this dependency, there are cases where it isn't included out of our control.
       // https://twitter.com/vigs072/status/1103005932886343680
+      // TODO: look into this
       dependencies.push({
-        type: 'direct',
         path: '@babel/runtime/helpers/interopRequireDefault',
+        type: 'direct',
+      });
+      dependencies.push({
+        path: '@babel/runtime/helpers/interopRequireWildcard',
+        type: 'direct',
       });
     }
+
     dependencies.forEach(dependency => {
       self.postMessage({
         type: 'add-dependency',

packages/sandbox-hooks/react-error-overlay/effects/proxyConsole.js

@@ -1,10 +1,8 @@
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
  *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 /* @flow */
@@ -23,7 +21,7 @@ export type { ReactFrame };
 // We're implementing just enough to get the invalid element type warnings
 // to display the component stack in React 15.6+:
 // https://github.com/facebook/react/pull/9679
-/// TODO: a more comprehensive implementation.
+// / TODO: a more comprehensive implementation.
 
 const registerReactStack = () => {
   if (typeof console !== 'undefined') {
@@ -44,34 +42,27 @@ const unregisterReactStack = () => {
 };
 
 type ConsoleProxyCallback = (message: string, frames: ReactFrame[]) => void;
-
-let registered = false;
 const permanentRegister = function proxyConsole(
   type: string,
   callback: ConsoleProxyCallback
 ) {
-  if (!registered) {
-    registered = true;
-    if (typeof console !== 'undefined') {
-      const orig = console[type];
-      if (typeof orig === 'function') {
-        console[type] = function __stack_frame_overlay_proxy_console__() {
-          try {
-            const message = arguments[0];
-            if (typeof message === 'string') {
-              if (reactFrameStack.length > 0) {
-                callback(message, reactFrameStack[reactFrameStack.length - 1]);
-              }
-            }
-          } catch (err) {
-            // Warnings must never crash. Rethrow with a clean stack.
-            setTimeout(function() {
-              throw err;
-            });
+  if (typeof console !== 'undefined') {
+    const orig = console[type];
+    if (typeof orig === 'function') {
+      console[type] = function __stack_frame_overlay_proxy_console__() {
+        try {
+          const message = arguments[0];
+          if (typeof message === 'string' && reactFrameStack.length > 0) {
+            callback(message, reactFrameStack[reactFrameStack.length - 1]);
           }
-          return orig.apply(this, arguments);
-        };
-      }
+        } catch (err) {
+          // Warnings must never crash. Rethrow with a clean stack.
+          setTimeout(function() {
+            throw err;
+          });
+        }
+        return orig.apply(this, arguments);
+      };
     }
   }
 };

packages/sandbox-hooks/react-error-overlay/effects/unhandledRejection.js

@@ -19,7 +19,7 @@ function rejectionHandler(
   if (e == null || e.reason == null) {
     return callback(new Error('Unknown'));
   }
-  let { reason } = e;
+  const { reason } = e;
   if (reason instanceof Error) {
     return callback(reason);
   }

packages/sandbox-hooks/react-error-overlay/listenToRuntimeErrors.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  register as registerError,
+  unregister as unregisterError,
+} from './effects/unhandledError';
+import {
+  register as registerPromise,
+  unregister as unregisterPromise,
+} from './effects/unhandledRejection';
+import {
+  register as registerStackTraceLimit,
+  unregister as unregisterStackTraceLimit,
+} from './effects/stackTraceLimit';
+import {
+  permanentRegister as permanentRegisterConsole,
+  registerReactStack,
+  unregisterReactStack,
+} from './effects/proxyConsole';
+import { massage as massageWarning } from './utils/warnings';
+import getStackFrames from './utils/getStackFrames';
+
+import type { StackFrame } from './utils/stack-frame';
+
+const CONTEXT_SIZE: number = 3;
+
+export type ErrorRecord = {|
+  error: Error,
+  unhandledRejection: boolean,
+  contextSize: number,
+  stackFrames: StackFrame[],
+|};
+
+export const crashWithFrames = (crash: ErrorRecord => void) => (
+  error: Error,
+  unhandledRejection = false
+) => {
+  getStackFrames(error, unhandledRejection, CONTEXT_SIZE)
+    .then(stackFrames => {
+      // SOURCE_CHANGE,
+      if (stackFrames == null && error.name !== 'SyntaxError') {
+        return;
+      }
+      crash({
+        error,
+        unhandledRejection,
+        contextSize: CONTEXT_SIZE,
+        stackFrames,
+      });
+    })
+    .catch(e => {
+      console.log('Could not get the stack frames of error:', e);
+    });
+};
+
+export function listenToRuntimeErrors(
+  crash: ErrorRecord => void,
+  filename: string = '/static/js/bundle.js'
+) {
+  const crashWithFramesRunTime = crashWithFrames(crash);
+
+  registerError(window, error => crashWithFramesRunTime(error, false));
+  registerPromise(window, error => crashWithFramesRunTime(error, true));
+  registerStackTraceLimit();
+  registerReactStack();
+  permanentRegisterConsole('error', (warning, stack) => {
+    const data = massageWarning(warning, stack);
+    crashWithFramesRunTime(
+      // $FlowFixMe
+      {
+        message: data.message,
+        stack: data.stack,
+        __unmap_source: filename,
+      },
+      false
+    );
+  });
+
+  return function stopListening() {
+    unregisterStackTraceLimit();
+    unregisterPromise(window);
+    unregisterError(window);
+    unregisterReactStack();
+  };
+}

packages/sandbox-hooks/react-error-overlay/overlay.js

@@ -11,32 +11,7 @@
 import { transformError } from 'codesandbox-api';
 import { getCurrentManager } from 'app/src/sandbox/compile';
 
-import {
-  register as registerError,
-  unregister as unregisterError,
-} from './effects/unhandledError';
-import {
-  register as registerPromise,
-  unregister as unregisterPromise,
-} from './effects/unhandledRejection';
-import {
-  register as registerShortcuts,
-  unregister as unregisterShortcuts,
-  handler as keyEventHandler,
-  SHORTCUT_ESCAPE,
-  SHORTCUT_LEFT,
-  SHORTCUT_RIGHT,
-} from './effects/shortcuts';
-import {
-  register as registerStackTraceLimit,
-  unregister as unregisterStackTraceLimit,
-} from './effects/stackTraceLimit';
-import {
-  permanentRegister as permanentRegisterConsole,
-  registerReactStack,
-  unregisterReactStack,
-} from './effects/proxyConsole';
-import { massage as massageWarning } from './utils/warnings';
+import { listenToRuntimeErrors } from './listenToRuntimeErrors';
 
 import {
   consume as consumeError,
@@ -204,7 +179,7 @@ function transformErrors() {
         }
       });
 
-      let tModule = errRef.error.tModule;
+      let { tModule } = errRef.error;
 
       if (!tModule && relevantFrame) {
         const fileName =
@@ -294,38 +269,25 @@ function shortcutHandler(type: string) {
       break;
     }
     default: {
-      //TODO: this
+      // TODO: this
       break;
     }
   }
 }
 
+let listenToRuntimeErrorsUnmounter;
+
 function inject() {
-  registerError(window, error => crash(error));
-  registerPromise(window, error => crash(error, true));
-  registerShortcuts(window, shortcutHandler);
-  registerStackTraceLimit();
-
-  registerReactStack();
-  permanentRegisterConsole('error', (warning, stack) => {
-    const data = massageWarning(warning, stack);
-    crash(
-      // $FlowFixMe
-      {
-        message: data.message,
-        stack: data.stack,
-      },
-      false
-    );
+  listenToRuntimeErrorsUnmounter = listenToRuntimeErrors(error => {
+    console.log('what the matter', error);
+    crash(error.error);
   });
 }
 
 function uninject() {
-  unregisterStackTraceLimit();
-  unregisterShortcuts(window);
-  unregisterPromise(window);
-  unregisterError(window);
-  unregisterReactStack();
+  if (listenToRuntimeErrorsUnmounter) {
+    listenToRuntimeErrorsUnmounter();
+  }
   unmount();
 }
 

packages/sandbox-hooks/react-error-overlay/utils/getStackFrames.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* @flow */
+import type { StackFrame } from './stack-frame';
+import { parse } from './parser';
+import { map } from './mapper';
+import { unmap } from './unmapper';
+
+function getStackFrames(
+  error: Error,
+  unhandledRejection: boolean = false,
+  contextSize: number = 3
+): Promise<StackFrame[] | null> {
+  const parsedFrames = parse(error);
+  let enhancedFramesPromise;
+  // $FlowFixMe
+  if (error.__unmap_source) {
+    enhancedFramesPromise = unmap(
+      // $FlowFixMe
+      error.__unmap_source,
+      parsedFrames,
+      contextSize
+    );
+  } else {
+    enhancedFramesPromise = map(parsedFrames, contextSize);
+  }
+  return enhancedFramesPromise.then(enhancedFrames => {
+    if (
+      enhancedFrames
+        .map(f => f._originalFileName)
+        .filter(f => f != null && f.indexOf('node_modules') === -1).length === 0
+    ) {
+      return null;
+    }
+    return enhancedFrames.filter(
+      ({ functionName }) =>
+        functionName == null ||
+        functionName.indexOf('__stack_frame_overlay_proxy_console__') === -1
+    );
+  });
+}
+
+export default getStackFrames;
+export { getStackFrames };