✨ Show activation error details for trigger nodes (#1787)

* ⚡ Implement error details in toast notification

* ⚡ Refactor error notification

* ⚡ Pipe activation error in prod mode to FE

* ⚡ Add node name to activation error details

* ⚡ Disable ignoring with ts-check

* 📝 fix spelling

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>

packages/cli/src/ActiveWorkflowRunner.ts

@@ -313,7 +313,6 @@ export class ActiveWorkflowRunner {
 
 			try {
 				await Db.collections.Webhook?.insert(webhook);
-
 				const webhookExists = await workflow.runWebhookMethod('checkExists', webhookData, NodeExecuteFunctions, mode, activation, false);
 				if (webhookExists !== true) {
 					// If webhook does not exist yet create it
@@ -341,7 +340,7 @@ export class ActiveWorkflowRunner {
 					errorMessage = error.message;
 				}
 
-				throw new Error(errorMessage);
+				throw error;
 			}
 		}
 		// Save static data!

packages/cli/src/ResponseHelper.ts

@@ -93,6 +93,10 @@ export function sendErrorResponse(res: Response, error: ResponseError) {
 		message: 'Unknown error',
 	};
 
+	if (error.name === 'NodeApiError') {
+		Object.assign(response, error);
+	}
+
 	if (error.errorCode) {
 		response.code = error.errorCode;
 	}

packages/editor-ui/src/api/helpers.ts

@@ -68,9 +68,14 @@ export async function makeRestApiRequest(context: IRestApiContext, method: Metho
 
 		const errorResponseData = error.response.data;
 		if (errorResponseData !== undefined && errorResponseData.message !== undefined) {
+			if (errorResponseData.name === 'NodeApiError') {
+				errorResponseData.httpStatusCode = error.response.status;
+				throw errorResponseData;
+			}
+
 			throw new ResponseError(errorResponseData.message, {errorCode: errorResponseData.code, httpStatusCode: error.response.status, stack: errorResponseData.stack});
 		}
 
 		throw error;
 	}
-}
+}

packages/editor-ui/src/components/mixins/showMessage.ts

@@ -1,16 +1,12 @@
-import Vue from 'vue';
-
 import { Notification } from 'element-ui';
 import { ElNotificationOptions } from 'element-ui/types/notification';
 import mixins from 'vue-typed-mixins';
 
 import { externalHooks } from '@/components/mixins/externalHooks';
 
-
-// export const showMessage = {
 export const showMessage = mixins(externalHooks).extend({
 	methods: {
-		$showMessage (messageData: ElNotificationOptions) {
+		$showMessage(messageData: ElNotificationOptions) {
 			messageData.dangerouslyUseHTMLString = true;
 			if (messageData.position === undefined) {
 				messageData.position = 'bottom-right';
@@ -18,14 +14,47 @@ export const showMessage = mixins(externalHooks).extend({
 
 			return Notification(messageData);
 		},
-		$showError (error: Error, title: string, message: string) {
+
+		$showError(error: Error, title: string, message: string) {
 			this.$showMessage({
 				title,
-				message: `${message}<br /><i>${error.message}</i>`,
+				message: `
+					${message}
+					<br>
+					<i>${error.message}</i>
+					${this.collapsableDetails(error)}`,
 				type: 'error',
 				duration: 0,
 			});
-			this.$externalHooks().run('showMessage.showError', { title, message, errorMessage: error.message });
+
+			this.$externalHooks().run('showMessage.showError', {
+				title,
+				message,
+				errorMessage: error.message,
+			});
+		},
+
+		// @ts-ignore
+		collapsableDetails({ description, node }: Error) {
+			if (!description) return '';
+
+			const errorDescription =
+				description.length > 500
+					? `${description.slice(0, 500)}...`
+					: description;
+
+			return `
+				<br>
+				<br>
+				<details>
+					<summary
+						style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
+					>
+						Show Details
+					</summary>
+					<p>${node.name}: ${errorDescription}</p>
+				</details>
+			`;
 		},
 	},
 });