Fix spurious console errors (codesandbox#1689)

* Fix spurious console errors.

* More removed console.logs

* Remove more spurious logs

* Remove unneeded code.

Author: lbogdan

packages/app/src/app/components/CodeEditor/VSCode/index.tsx

@@ -4,7 +4,10 @@ import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import { TextOperation } from 'ot';
 import { debounce } from 'lodash-es';
-import { getModulePath, resolveModule } from '@codesandbox/common/lib/sandbox/modules';
+import {
+  getModulePath,
+  resolveModule,
+} from '@codesandbox/common/lib/sandbox/modules';
 import { listen } from 'codesandbox-api';
 
 import prettify from 'app/src/app/utils/prettify';
@@ -254,11 +257,16 @@ class MonacoEditor extends React.Component<Props> implements Editor {
     this.modelAddedListener = this.editor.textFileService.modelService.onModelAdded(
       model => {
         if (this.modelListeners[model.uri.path] === undefined) {
-          const module = resolveModule(
-            model.uri.path.replace(/^\/sandbox/, ''),
-            this.sandbox.modules,
-            this.sandbox.directories
-          );
+          let module: Module;
+          try {
+            module = resolveModule(
+              model.uri.path.replace(/^\/sandbox/, ''),
+              this.sandbox.modules,
+              this.sandbox.directories
+            );
+          } catch (e) {
+            return;
+          }
 
           const listener = model.onDidChangeContent(e => {
             const path = model.uri.path;

packages/app/src/app/components/Preview/DevTools/index.tsx

@@ -436,8 +436,8 @@ export default class DevTools extends React.PureComponent<Props, State> {
       >
         {!hideTabs && (
           <Header
-            onTouchStart={!primary && this.handleTouchStart}
-            onMouseDown={!primary && this.handleMouseDown}
+            onTouchStart={!primary ? this.handleTouchStart : undefined}
+            onMouseDown={!primary ? this.handleMouseDown : undefined}
             primary={primary}
             open={!this.state.hidden}
           >

packages/app/src/app/pages/Dashboard/Sidebar/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import history from 'app/utils/history';
 import { inject, observer } from 'mobx-react';
-import { Route } from 'react-router-dom';
+import { Route, withRouter } from 'react-router-dom';
 import { Query } from 'react-apollo';
 import Input from '@codesandbox/common/lib/components/Input';
 import { Button } from '@codesandbox/common/lib/components/Button';
@@ -17,12 +17,6 @@ import { Items, CategoryHeader, SidebarStyled, InputWrapper } from './elements';
 import { TEAMS_QUERY } from '../queries';
 
 class Sidebar extends React.Component {
-  shouldComponentUpdate() {
-    // Without this the app won't update on route changes, we've tried using
-    // `withRouter`, but it caused the app to remount on every route change.
-    return true;
-  }
-
   handleSearchFocus = () => {
     history.push('/dashboard/search');
   };
@@ -129,4 +123,4 @@ class Sidebar extends React.Component {
   }
 }
 
-export default inject('signals', 'store')(observer(Sidebar));
+export default inject('signals', 'store')(withRouter(observer(Sidebar)));

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js

@@ -47,7 +47,13 @@ export default class VersionEntry extends React.PureComponent {
 
   getSizeForPKG(pkg) {
     fetch(`https://bundlephobia.com/api/size?package=${pkg}`)
-      .then(response => response.json())
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Bad request');
+        }
+
+        return response.json();
+      })
       .then(size =>
         this.setState({
           size,

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/More/index.tsx

@@ -16,7 +16,7 @@ type Props = {
 const NOT_OWNED_MESSAGE = `Fork this sandbox to make deployments, commit to GitHub, create live sessions with others and more!`;
 const NOT_SIGNED_IN_MESSAGE = `Sign in to be able to organize your sandboxes with a dashboard, make deployments, collaborate live with others, make commits to GitHub and more!`;
 
-class More extends React.PureComponent<Props> {
+class More extends React.Component<Props> {
   componentDidMount() {
     track('Workspace - More Opened');
   }

packages/app/src/app/pages/index.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 import Loadable from 'app/utils/Loadable';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 
 import _debug from '@codesandbox/common/lib/utils/debug';
 import Notifications from 'app/pages/common/Notifications';
@@ -61,12 +61,6 @@ class Routes extends React.Component<Props> {
     this.props.signals.appUnmounted();
   }
 
-  shouldComponentUpdate() {
-    // Without this the app won't update on route changes, we've tried using
-    // `withRouter`, but it caused the app to remount on every route change.
-    return true;
-  }
-
   render() {
     return (
       <Container>
@@ -114,5 +108,5 @@ class Routes extends React.Component<Props> {
 }
 
 export default inject('signals', 'store')(
-  DragDropContext(HTML5Backend)(observer(Routes))
+  DragDropContext(HTML5Backend)(withRouter(observer(Routes)))
 );

packages/app/src/app/store/providers/FSSync.ts

@@ -76,18 +76,22 @@ async function syncDependencyTypings(
       Object.keys(absoluteDependencies).map(async depName => {
         const depVersion = absoluteDependencies[depName];
 
-        return fetch(`${SERVICE_URL}/${depName}@${depVersion}.json`)
-          .then(x => x.json())
-          .then(x => x.files)
-          .then(x => {
-            types = { ...types, ...x };
-
-            sendTypes();
-          })
-          .catch(() => {
+        try {
+          const fetchRequest = await fetch(`${SERVICE_URL}/${depName}@${depVersion}.json`);
+
+          if (!fetchRequest.ok) {
+            throw new Error("Fetch error");
+          }
+
+          const {files} = await fetchRequest.json();
+          types = {...types, ...files};
+          sendTypes();
+        } catch (e) {
+          if (process.env.NODE_ENV === 'development') {
             console.warn('Trouble fetching types for ' + depName);
-            return {};
-          });
+          }
+          return {};
+        }
       })
     );
   } catch (e) {