Overhaul error system

Ives van Hoorne · Ives van Hoorne · commit d374f8a5397b · 2017-09-19T21:02:44.000+02:00
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
@@ -222,5 +222,6 @@ module.exports = merge(commonConfig, {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.IgnorePlugin(/\/src\/node_modules/),
   ],
 });
diff --git a/package.json b/package.json
@@ -101,7 +101,7 @@
     "babel-standalone": "^6.25.0",
     "base64-loader": "^1.0.0",
     "codemirror": "^5.27.4",
-    "codesandbox-api": "^0.0.3",
+    "codesandbox-api": "0.0.6",
     "color": "^0.11.4",
     "css-modules-loader-core": "^1.1.0",
     "cssnano": "^3.10.0",
diff --git a/src/node_modules/codesandbox-api/package.json b/src/node_modules/codesandbox-api/package.json
diff --git a/src/node_modules/codesandbox-api/src/codesandbox.ts b/src/node_modules/codesandbox-api/src/codesandbox.ts
diff --git a/src/node_modules/codesandbox-api/src/errors/index.ts b/src/node_modules/codesandbox-api/src/errors/index.ts
diff --git a/src/node_modules/codesandbox-api/src/typings/codesandbox.d.ts b/src/node_modules/codesandbox-api/src/typings/codesandbox.d.ts
diff --git a/src/sandbox/compile.js b/src/sandbox/compile.js
@@ -1,8 +1,9 @@
-import { dispatch } from 'codesandbox-api';
+import { dispatch, clearErrorTransformers } from 'codesandbox-api';
 
 import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
 import type { Module, Directory } from 'common/types';
 
+import initializeErrorTransformers from './errors/transformers';
 import getPreset from './eval';
 import Manager from './eval/manager';
 import resolveDependency from './eval/loaders/dependency-resolver';
@@ -82,6 +83,8 @@ async function compile({
   template,
 }) {
   try {
+    clearErrorTransformers();
+    initializeErrorTransformers();
     uninject();
     inject();
   } catch (e) {
diff --git a/src/sandbox/errors/dependency-not-found-error.js b/src/sandbox/errors/dependency-not-found-error.js
@@ -4,29 +4,24 @@ import SandboxError from './sandbox-error';
 
 export default class DependencyNotFoundError extends SandboxError {
   constructor(dependencyName: string) {
-    super();
-
     const [root, second] = dependencyName.split('/');
 
     // If the package starts with a @ it's scoped, we should add the second
     // part of the name in that case
     const parsedName = root.startsWith('@') ? `${root}/${second}` : root;
-
-    this.payload = {
-      dependency: parsedName,
-      path: dependencyName,
-    };
-    this.name = 'DependencyNotFoundError';
-    this.message = `Could not find dependency: '${parsedName}'`;
-
-    this.suggestions = [
+    const suggestions = [
       {
         title: `Add ${parsedName} as dependency`,
         action: () => {
           dispatch(actions.source.dependencies.add(parsedName));
         },
       },
     ];
+
+    super(suggestions);
+
+    this.name = 'DependencyNotFoundError';
+    this.message = `Could not find dependency: '${parsedName}'`;
   }
   type = 'dependency-not-found';
   severity = 'error';
diff --git a/src/sandbox/errors/raw-react-component-error.js b/src/sandbox/errors/raw-react-component-error.js
diff --git a/src/sandbox/errors/transformers/index.js b/src/sandbox/errors/transformers/index.js
@@ -0,0 +1,9 @@
+import { registerErrorTransformer } from 'codesandbox-api';
+
+import rawReactErrorTransformer from './raw-react-component-error';
+
+const transformers = [rawReactErrorTransformer];
+
+export default function registerErrorTransformers() {
+  transformers.forEach(t => registerErrorTransformer(t));
+}
diff --git a/src/sandbox/errors/transformers/raw-react-component-error.js b/src/sandbox/errors/transformers/raw-react-component-error.js
@@ -0,0 +1,59 @@
+import { actions, dispatch } from 'codesandbox-api';
+
+function findRawModule(module) {
+  const rawModule = Array.from(module.dependencies).find(
+    m => !/\.([\w]{2}|[\w]{3})$/.test(m.module.title)
+  );
+
+  if (rawModule) {
+    return [module, rawModule];
+  }
+
+  // The error is thrown at the root, so we check for children components
+  return Array.from(module.dependencies).reduce((foundResult, m) => {
+    // We already found it, immediately return
+    if (foundResult) return foundResult;
+
+    return findRawModule(m);
+  }, null);
+}
+
+/**
+ * This transformer detects raw imports used as React component, when the module
+ * is missing a file extension
+ *
+ * @export
+ * @param {Error} error
+ * @param {any} module
+ * @returns
+ */
+export default function(error: Error, module) {
+  if (error.message.includes('Invalid tag: import React')) {
+    const result = findRawModule(module);
+
+    if (result) {
+      const [sourceModule, rawModule] = result;
+      return {
+        name: 'Raw import',
+        message: `It seems like '${sourceModule.module
+          .title}' is importing a raw module (${rawModule.module.title})`,
+        suggestions: [
+          {
+            title: `Rename ${rawModule.module.title} to ${rawModule.module
+              .title}.js`,
+            action: () => {
+              dispatch(
+                actions.source.modules.rename(
+                  rawModule.module.id,
+                  `${rawModule.module.title}.js`
+                )
+              );
+            },
+          },
+        ],
+      };
+    }
+  }
+
+  return null;
+}
diff --git a/src/sandbox/eval/loaders/dependency-resolver.js b/src/sandbox/eval/loaders/dependency-resolver.js
@@ -22,6 +22,9 @@ export default function getDependency(
     )}`);
   }
 
+  if (dependencyPath === 'codesandbox-api') {
+    return require('codesandbox-api');
+  }
   const dependencyModule =
     externals[dependencyPath] || externals[`${dependencyPath}.js`];
   if (dependencyModule) {
diff --git a/src/sandbox/eval/transpiled-module.js b/src/sandbox/eval/transpiled-module.js
@@ -1,7 +1,7 @@
 // @flow
 import { flattenDeep } from 'lodash';
 
-import { actions, dispatch } from 'codesandbox-api';
+import { actions, dispatch, transformError } from 'codesandbox-api';
 
 import type { Module } from 'common/types';
 import getModulePath from 'common/sandbox/get-module-path';
@@ -460,6 +460,24 @@ export default class TranspiledModule {
       return exports;
     } catch (e) {
       e.module = e.module || module;
+
+      try {
+        const errorDecorations = transformError(
+          e,
+          this,
+          manager.getTranspiledModules(),
+          manager.getDirectories()
+        );
+        if (errorDecorations) {
+          e.name = errorDecorations.name || e.name;
+          e.message = errorDecorations.message;
+          e.suggestions = errorDecorations.suggestions;
+        }
+      } catch (ex) {
+        /* Decorating went wrong, don't throw */
+        console.error(ex);
+      }
+
       throw e;
     }
   }
diff --git a/src/sandbox/react-error-overlay/overlay.js b/src/sandbox/react-error-overlay/overlay.js
@@ -162,7 +162,6 @@ function unmount() {
 function sendErrorsToEditor() {
   errorReferences.forEach(ref => {
     const error = getErrorRecord(ref);
-
     buildError(error);
   });
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2116,9 +2116,9 @@ codemirror@^5.27.4:
   version "5.28.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.28.0.tgz#2978d9280d671351a4f5737d06bbd681a0fd6f83"
 
-codesandbox-api@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/codesandbox-api/-/codesandbox-api-0.0.3.tgz#369e1eea4b1344f6e7c751ecb0e91c92de88d811"
+codesandbox-api@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/codesandbox-api/-/codesandbox-api-0.0.6.tgz#0a4f253836170947e01252d745f817790ac20d12"
 
 color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.0"
