feat(overmind-devtools): add error indication

Author: christianalfoni

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

@@ -13,6 +13,7 @@ import * as styles from './styles'
 import * as actionStyles from '../Action/styles'
 import * as textStyles from '../../styles/text'
 import { css } from 'emotion'
+import { colors } from '../../theme'
 
 type Props = {
   prevOperator: OperatorType
@@ -39,7 +40,15 @@ const ActionOperator: SFC<Props> = ({ prevOperator, operator, value }) => {
       </Path>
       <div className={styles.operator}>
         <div className={styles.operatorHeader}>
-          <span className={styles.operatorType}>{operator.type}</span>
+          <span
+            className={styles.operatorType}
+            style={{
+              backgroundColor: operator.error ? colors.red : null,
+              color: operator.error ? colors.white : null,
+            }}
+          >
+            {operator.type}
+          </span>
           {operator.name}
           {value === undefined ? null : (
             <div className={styles.value}>
@@ -51,6 +60,24 @@ const ActionOperator: SFC<Props> = ({ prevOperator, operator, value }) => {
           className={styles.operatorBody}
           onClick={(event) => event.stopPropagation()}
         >
+          {operator.error ? (
+            <div className={styles.operatorItem}>
+              <span
+                className={css(
+                  textStyles.description,
+                  textStyles.red,
+                  textStyles.monospace
+                )}
+              >
+                error
+              </span>
+              <span
+                className={css(textStyles.description, textStyles.monospace)}
+              >
+                {operator.error}
+              </span>
+            </div>
+          ) : null}
           {operator.events.map((event, index) => {
             if (event.type === EventType.Effect) {
               const effect = event.data as Effect

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

@@ -253,6 +253,7 @@ export const updateOperator: Operator<EndOperatorMessage> = action(
     operator.isAsync = operatorData.isAsync
     operator.isRunning = false
     operator.result = operatorData.result
+    operator.error = operatorData.error
   }
 )
 

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

@@ -67,6 +67,7 @@ export type Operator = {
   operatorId: number
   path: string[]
   result?: any
+  error?: string
 }
 
 export type Action = {
@@ -262,6 +263,7 @@ export type EndOperatorMessage = AppMessage<{
   type: string
   isAsync: boolean
   result: any
+  error?: string
 }>
 
 export type AsyncOperatorMessage = AppMessage<{

packages/node_modules/overmind-devtools/src/styles/text.ts

@@ -5,6 +5,10 @@ export const white = css({
   color: colors.white,
 })
 
+export const red = css({
+  color: colors.red,
+})
+
 export const purple = css({
   color: colors.purple,
 })

packages/node_modules/overmind/src/index.ts

@@ -536,20 +536,32 @@ export class Overmind<ThisConfig extends IConfiguration>
 
         const scopedValue = this.scopeValue(value, mutationTree)
         const context = this.createContext(scopedValue, execution, mutationTree)
-        const result = action(context, scopedValue)
 
-        this.eventHub.emit(EventType.OPERATOR_END, {
-          ...execution,
-          isAsync: result instanceof Promise,
-          result: undefined,
-        })
-        this.eventHub.emit(EventType.ACTION_END, execution)
+        try {
+          const result = action(context, scopedValue)
 
-        if (result) {
-          await result
-        }
+          this.eventHub.emit(EventType.OPERATOR_END, {
+            ...execution,
+            isAsync: result instanceof Promise,
+            result: undefined,
+          })
+          this.eventHub.emit(EventType.ACTION_END, execution)
 
-        return this.mode.mode === MODE_TEST ? execution : undefined
+          if (result) {
+            await result
+          }
+
+          return this.mode.mode === MODE_TEST ? execution : undefined
+        } catch (err) {
+          this.eventHub.emit(EventType.OPERATOR_END, {
+            ...execution,
+            isAsync: false,
+            result: undefined,
+            error: err.message,
+          })
+          this.eventHub.emit(EventType.ACTION_END, execution)
+          throw err
+        }
       }
     }
 
@@ -794,6 +806,7 @@ export class Overmind<ThisConfig extends IConfiguration>
         type: 're_init',
         data: {
           state: proxyStateTree.sourceState,
+          actions: getActionPaths(configuration.actions),
         },
       })
     }

packages/node_modules/overmind/src/internalTypes.ts

@@ -68,6 +68,7 @@ export type Execution = {
   }
   getMutationTree(): IMutationTree<any>
   value?: any
+  error?: string
 }
 
 export interface Events {

packages/node_modules/overmind/src/operator.ts

@@ -17,7 +17,7 @@ export function startDebugOperator(type, arg, context) {
   })
 }
 
-export function stopDebugOperator(context, value) {
+export function stopDebugOperator(context, value, error?) {
   if (IS_PRODUCTION) {
     return
   }
@@ -39,6 +39,7 @@ export function stopDebugOperator(context, value) {
       ...context.execution,
       result: safeValue(value),
       isAsync: false,
+      error: error ? error.message : undefined,
     })
   }
 }
@@ -136,7 +137,7 @@ export function createOperator<ThisConfig extends IConfiguration>(
         }
       )
     } catch (error) {
-      stopDebugOperator(context, context.value)
+      stopDebugOperator(context, context.value, error)
       next(error, createContext(context, context.value))
     }
   }
@@ -202,7 +203,7 @@ export function createMutationOperator<ThisConfig extends IConfiguration>(
         }
       )
     } catch (error) {
-      stopDebugOperator(context, context.value)
+      stopDebugOperator(context, context.value, error)
       next(error, createContext(context, context.value))
     }
   }