windows

app/app.global.css

@@ -23,3 +23,7 @@ table {
 table td {
   word-wrap: break-word;
 }
+
+::-webkit-scrollbar {
+  display: none;
+}

app/components/HeaderActions.js

@@ -4,6 +4,7 @@ import FaCog from 'react-icons/lib/fa/cog';
 import FaEye from 'react-icons/lib/fa/eye';
 
 const HeaderAction = styled.button`
+  -webkit-app-region: no-drag;
   border: 0;
   background: none;
   outline: none;
@@ -26,7 +27,7 @@ const HeaderActionWrapper = styled.div`
   transform: translateY(-50%);
 `;
 
-const HeaderActions = ({ vizActive, onVizToggle }) =>
+const HeaderActions = ({ vizActive, onVizToggle }) => (
   <HeaderActionWrapper>
     <HeaderAction onClick={onVizToggle} vizActive={vizActive}>
       <FaEye width="24px" height="24px" />
@@ -38,6 +39,7 @@ const HeaderActions = ({ vizActive, onVizToggle }) =>
     >
       <FaCog width="24px" height="24px" />
     </HeaderAction>
-  </HeaderActionWrapper>;
+  </HeaderActionWrapper>
+);
 
 export default HeaderActions;

app/components/HeaderIcons.js

@@ -20,6 +20,7 @@ const close = () => {
 };
 
 const HeaderIcon = styled.span`
+  -webkit-app-region: no-drag;
   background: white;
   border-radius: 50%;
   display: inline-block;
@@ -42,11 +43,12 @@ const HeaderIconWrapper = styled.div`
   transform: translateY(-50%);
 `;
 
-const HeaderIcons = () =>
+const HeaderIcons = () => (
   <HeaderIconWrapper>
     <HeaderIcon onClick={close} />
     <HeaderIcon onClick={minimize} />
     <HeaderIcon onClick={maximize} />
-  </HeaderIconWrapper>;
+  </HeaderIconWrapper>
+);
 
 export default HeaderIcons;

app/containers/Body.js

@@ -37,20 +37,25 @@ class Body extends React.PureComponent {
     problemsLoading: false,
   };
   componentWillMount() {
-    this.server = new SocketIO(DEFAULT_PORT);
-    this.server.on('connection', socket => {
-      socket.on('message', message => {
-        this.setState(handleSocketData(message));
+    try {
+      this.server = new SocketIO(DEFAULT_PORT);
+    } catch (e) {
+      alert(e);
+    }
+    this.server &&
+      this.server.on('connection', socket => {
+        socket.on('message', message => {
+          this.setState(handleSocketData(message));
+        });
       });
-    });
   }
   componentDidMount() {
     window.addEventListener('resize', this.checkLayout);
     this.checkLayout();
   }
   componentWillUnmount() {
     window.removeEventListener('resize', this.checkLayout);
-    this.server.disconnect();
+    this.server && this.server.disconnect();
   }
   checkLayout = () => {
     let breakpoint;

app/containers/Modules.js

@@ -35,6 +35,7 @@ class Modules extends React.PureComponent {
     }
     if (stats) {
       const modules = formatModules(stats);
+      console.log(modules);
       return (
         <Container>
           <table>

app/util/format-modules.js

@@ -159,6 +159,7 @@ function bundleSizeTree(stats) {
 
 export function formatModules(data) {
   let trees;
+  console.log(data);
   if (!data.hasOwnProperty('modules')) {
     trees = data.children.map(bundleSizeTree);
   } else {