Merge pull request #552 from automatisch/fix/expose-errors-as-execute-flow

fix: Expose errors within execute flow mutation

packages/backend/src/graphql/mutations/execute-flow.ts

@@ -24,7 +24,7 @@ const executeFlow = async (
 
   const flow = await untilStep.$relatedQuery('flow');
 
-  const data = await new Processor(flow, {
+  const executionStep = await new Processor(flow, {
     untilStep,
     testRun: true,
   }).run();
@@ -33,7 +33,11 @@ const executeFlow = async (
     status: 'completed',
   });
 
-  return { data, step: untilStep };
+  if (executionStep.errorDetails) {
+    throw new Error(JSON.stringify(executionStep.errorDetails));
+  }
+
+  return { data: executionStep.dataOut, step: untilStep };
 };
 
 export default executeFlow;

packages/backend/src/services/processor.ts

@@ -160,11 +160,7 @@ class Processor {
       .orderBy('created_at', 'desc')
       .first();
 
-    if (lastExecutionStepFromFirstExecution.errorDetails) {
+    return lastExecutionStepFromFirstExecution;
-      return lastExecutionStepFromFirstExecution.errorDetails;
-    } else {
-      return lastExecutionStepFromFirstExecution?.dataOut;
-    }
   }
 
   async getInitialTriggerData(step: Step) {

packages/web/src/components/TestSubstep/index.tsx

@@ -25,6 +25,19 @@ type TestSubstepProps = {
   step: IStep;
 };
 
+function serializeErrors(graphQLErrors: any) {
+  return graphQLErrors?.map((error: Record<string, unknown>) => {
+    try {
+      return {
+        ...error,
+        message: (<pre style={{ margin: 0 }}>{JSON.stringify(JSON.parse(error.message as string), null, 2)}</pre>),
+      }
+    } catch {
+      return error;
+    }
+  })
+}
+
 function TestSubstep(props: TestSubstepProps): React.ReactElement {
   const {
     substep,
@@ -81,7 +94,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
           {error?.graphQLErrors?.length && <Alert severity="error" sx={{ mb: 1, fontWeight: 500, width: '100%' }}>
-            {error?.graphQLErrors.map((error) => (<>{error.message}<br /></>))}
+            {serializeErrors(error.graphQLErrors).map((error: any) => (<div>{error.message}</div>))}
           </Alert>}
 
           {hasNoOutput && (

packages/web/src/graphql/link.ts

@@ -49,7 +49,7 @@ const createErrorLink = (callback: CreateLinkOptions['onError']): ApolloLink =>
 });
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
+const noop = () => { };
 
 const createLink = (options: CreateLinkOptions): ApolloLink => {
   const {