From c0ec1ed60664a0b32192a3aed2933846a0c6d89f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Sat, 12 Jun 2021 17:06:56 +0200
Subject: [PATCH] :sparkles: Show activation error details for trigger nodes
 (#1787)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :zap: Implement error details in toast notification

* :zap: Refactor error notification

* :zap: Pipe activation error in prod mode to FE

* :zap: Add node name to activation error details

* :zap: Disable ignoring with ts-check

* 📝 fix spelling

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
---
 packages/cli/src/ActiveWorkflowRunner.ts      |  3 +-
 packages/cli/src/ResponseHelper.ts            |  4 ++
 packages/editor-ui/src/api/helpers.ts         |  7 ++-
 .../src/components/mixins/showMessage.ts      | 45 +++++++++++++++----
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/packages/cli/src/ActiveWorkflowRunner.ts b/packages/cli/src/ActiveWorkflowRunner.ts
index c323e8373e..66d4ec02e2 100644
--- a/packages/cli/src/ActiveWorkflowRunner.ts
+++ b/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!
diff --git a/packages/cli/src/ResponseHelper.ts b/packages/cli/src/ResponseHelper.ts
index 014589e0b8..465fdb5dde 100644
--- a/packages/cli/src/ResponseHelper.ts
+++ b/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;
 	}
diff --git a/packages/editor-ui/src/api/helpers.ts b/packages/editor-ui/src/api/helpers.ts
index ea4d16e10c..df3f5d8ddd 100644
--- a/packages/editor-ui/src/api/helpers.ts
+++ b/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;
 	}
-}
\ No newline at end of file
+}
diff --git a/packages/editor-ui/src/components/mixins/showMessage.ts b/packages/editor-ui/src/components/mixins/showMessage.ts
index f7d9c21b2e..61fe20a5c4 100644
--- a/packages/editor-ui/src/components/mixins/showMessage.ts
+++ b/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>
+			`;
 		},
 	},
 });