[chore] Improve error message specificity and show Slack icon in Node History (baserow#5313)

* Improve frontend error message specificity.

* Show the Slack icon in  Node History.

* Scope error handling to 400 status code

* Add test

Author: paljort

changelog/entries/unreleased/refactor/added_the_slack_icon_to_node_history_entries.json

@@ -0,0 +1,9 @@
+{
+    "type": "refactor",
+    "message": "Added the Slack icon to Node History entries.",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "automation",
+    "bullet_points": [],
+    "created_at": "2026-05-06"
+}

changelog/entries/unreleased/refactor/improved_the_frontend_error_message_to_be_more_specific.json

@@ -0,0 +1,9 @@
+{
+    "type": "refactor",
+    "message": "Improved the frontend error message to be more specific.",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "core",
+    "bullet_points": [],
+    "created_at": "2026-05-06"
+}

web-frontend/modules/automation/components/workflow/sidePanels/NodeHistory.vue

@@ -7,7 +7,8 @@
       <template #header="{ expanded }">
         <div class="node-history__header-row">
           <div class="node-history__header-icon">
-            <i :class="nodeIconClass"></i>
+            <i v-if="nodeIconClass" :class="nodeIconClass"></i>
+            <img v-else :alt="nodeType.name" :src="nodeType.image" />
           </div>
           <div class="node-history__header-info">
             <div>
@@ -100,7 +101,8 @@
 
     <div v-else class="node-history__header-row">
       <div class="node-history__header-icon">
-        <i :class="nodeIconClass"></i>
+        <i v-if="nodeIconClass" :class="nodeIconClass"></i>
+        <img v-else :alt="nodeType.name" :src="nodeType.image" />
       </div>
       <div class="node-history__header-info">
         <div

web-frontend/modules/core/plugins/clientHandler.js

@@ -278,6 +278,20 @@ export class ErrorHandler {
       return this.errorMap[this.code]
     }
 
+    const status = this.response?.status || 500
+    if (
+      this.detail &&
+      typeof this.detail === 'string' &&
+      status >= 400 &&
+      status < 500 &&
+      this.code != 'ERROR_REQUEST_BODY_VALIDATION'
+    ) {
+      return new ResponseErrorMessage(
+        this.app.$i18n.t('clientHandler.notCompletedTitle'),
+        this.detail
+      )
+    }
+
     return this.genericDefaultError()
   }
 

web-frontend/test/unit/core/utils/errors.spec.js

@@ -83,6 +83,27 @@ describe('test error handling', () => {
       }
     }
   )
+  test('a 400 response with a string detail and no matching error map entry shows the detail as the message', async () => {
+    try {
+      await errorInterceptorWithStubAppAndStore()({
+        response: {
+          data: {
+            error: 'noMatchingEntryInSpecificErrorMap',
+            detail: 'The `minute` value must be greater or equal to 2.',
+          },
+          status: 400,
+        },
+      })
+    } catch (error) {
+      const message = error.handler.getMessage('name', {
+        doesntMatch: new ResponseErrorMessage('title', 'message'),
+      })
+      expect(message.title).toBe('clientHandler.notCompletedTitle')
+      expect(message.message).toBe(
+        'The `minute` value must be greater or equal to 2.'
+      )
+    }
+  })
   test('an 429 response results in a too many requests error', async () => {
     try {
       await errorInterceptorWithStubAppAndStore()({