feat: add http request block fallback

src/background/workflow-engine/blocks-handler/handler-webhook.js

@@ -5,6 +5,7 @@ import { executeWebhook } from '@/utils/webhookUtil';
 
 export async function webhook({ data, outputs }) {
   const nextBlockId = getBlockConnection({ outputs });
+  const fallbackOutput = getBlockConnection({ outputs }, 2);
 
   try {
     if (isWhitespace(data.url)) throw new Error('url-empty');
@@ -13,6 +14,13 @@ export async function webhook({ data, outputs }) {
     const response = await executeWebhook(data);
 
     if (!response.ok) {
+      if (fallbackOutput) {
+        return {
+          data: '',
+          nextBlockId: fallbackOutput,
+        };
+      }
+
       throw new Error(`(${response.status}) ${response.statusText}`);
     }
 
@@ -45,6 +53,13 @@ export async function webhook({ data, outputs }) {
       data: returnData,
     };
   } catch (error) {
+    if (fallbackOutput && error.message === 'Failed to fetch') {
+      return {
+        data: '',
+        nextBlockId: fallbackOutput,
+      };
+    }
+
     error.nextBlockId = nextBlockId;
 
     throw error;

src/components/block/BlockBase.vue

@@ -3,10 +3,11 @@
     <slot name="prepend" />
     <div
       :class="contentClass"
-      class="z-10 bg-white dark:bg-gray-800 relative rounded-lg overflow-hidden w-full p-4"
+      class="z-10 bg-white dark:bg-gray-800 relative rounded-lg overflow-hidden w-full p-4 block-base__content"
     >
       <slot></slot>
     </div>
+    <slot name="append" />
     <div
       class="absolute bottom-1 transition-transform duration-300 pt-4 ml-1 menu"
     >

src/components/block/BlockBasic.vue

@@ -3,34 +3,36 @@
     :id="componentId"
     :hide-edit="block.details.disableEdit"
     :hide-delete="block.details.disableDelete"
-    content-class="flex items-center"
     class="block-basic"
     @edit="editBlock"
     @delete="editor.removeNodeId(`node-${block.id}`)"
   >
-    <span
-      :class="block.category.color"
-      class="inline-block p-2 mr-2 rounded-lg dark:text-black"
-    >
-      <v-remixicon :name="block.details.icon || 'riGlobalLine'" />
-    </span>
-    <div style="max-width: 200px">
-      <p
-        v-if="block.details.id"
-        class="font-semibold leading-none whitespace-nowrap"
+    <div class="flex items-center">
+      <span
+        :class="block.category.color"
+        class="inline-block p-2 mr-2 rounded-lg dark:text-black"
       >
-        {{ t(`workflow.blocks.${block.details.id}.name`) }}
-      </p>
-      <p class="text-gray-600 dark:text-gray-200 text-overflow leading-tight">
-        {{ block.data.description }}
-      </p>
-      <input
-        type="text"
-        class="hidden trigger"
-        disabled="true"
-        @change="handleDataChange"
-      />
+        <v-remixicon :name="block.details.icon || 'riGlobalLine'" />
+      </span>
+      <div style="max-width: 200px">
+        <p
+          v-if="block.details.id"
+          class="font-semibold leading-none whitespace-nowrap"
+        >
+          {{ t(`workflow.blocks.${block.details.id}.name`) }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-200 text-overflow leading-tight">
+          {{ block.data.description }}
+        </p>
+        <input
+          type="text"
+          class="hidden trigger"
+          disabled="true"
+          @change="handleDataChange"
+        />
+      </div>
     </div>
+    <slot></slot>
     <template #prepend>
       <div
         v-if="block.details.id !== 'trigger'"

src/components/block/BlockWebhook.vue

@@ -0,0 +1,38 @@
+<template>
+  <block-basic :editor="editor" class="block-webhook">
+    <div class="fallback flex items-center pb-2 justify-end">
+      <v-remixicon
+        :title="t('workflow.blocks.webhook.fallback')"
+        name="riInformationLine"
+        size="18"
+      />
+      <span class="ml-1">
+        {{ t('common.fallback') }}
+      </span>
+    </div>
+  </block-basic>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+import BlockBasic from './BlockBasic.vue';
+
+const { t } = useI18n();
+
+defineProps({
+  editor: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+<style>
+.block-webhook .block-base__content {
+  padding-bottom: 0;
+}
+.drawflow-node.webhook .outputs {
+  top: 64%;
+}
+.drawflow-node.webhook .outputs .output_1 {
+  margin-bottom: 14px;
+}
+</style>

src/locales/en/blocks.json

@@ -377,6 +377,7 @@
         "contentType": "Content type",
         "method": "Request method",
         "url": "Request URL",
+        "fallback": "Execute when failed or error making an HTTP request",
         "buttons": {
           "header": "Add header"
         },

src/utils/shared.js

@@ -567,11 +567,11 @@ export const tasks = {
     name: 'HTTP Request',
     description: 'make an HTTP request',
     icon: 'riEarthLine',
-    component: 'BlockBasic',
+    component: 'BlockWebhook',
     editComponent: 'EditWebhook',
     category: 'general',
     inputs: 1,
-    outputs: 1,
+    outputs: 2,
     allowedInputs: true,
     maxConnection: 1,
     refDataKeys: ['body', 'url'],