feat(overmind-devtools): show error when crashing

Author: christianalfoni

packages/node_modules/overmind-devtools/src/components/ActionsList/styles.ts

@@ -5,6 +5,7 @@ export const wrapper = css({
   padding: '1rem',
   height: '100%',
   overflowY: 'scroll',
+  boxSizing: 'border-box',
 })
 
 export const actionItem = css({

packages/node_modules/overmind-devtools/src/components/Devtools/index.tsx

@@ -49,6 +49,19 @@ const Devtools: FunctionComponent = () => {
     return renderSetPort()
   }
 
+  if (state.error) {
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.container}>
+          <div className={css(text.header, text.white)}>
+            Ops, there is an error :(
+          </div>
+          <div className={text.red}>{state.error}</div>
+        </div>
+      </div>
+    )
+  }
+
   if (state.isConnecting) {
     return (
       <div className={styles.wrapper}>

packages/node_modules/overmind-devtools/src/overmind/operators.ts

@@ -66,6 +66,7 @@ export const isPortExistsMessage: (
 export const addStateAndActions: Operator<InitMessage> = action(
   ({ state }, message) => {
     state.isConnecting = false
+    state.error = null
     state.apps[message.appName].state = message.data.state
     state.apps[message.appName].actionPaths = message.data.actions
   }