feat: provide error messages for import failed custom node.

js/common.js

@@ -397,3 +397,12 @@ export const icons = {
 	passed: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.667 426.667"><path fill="#6AC259" d="M213.333,0C95.518,0,0,95.514,0,213.333s95.518,213.333,213.333,213.333c117.828,0,213.333-95.514,213.333-213.333S331.157,0,213.333,0z M174.199,322.918l-93.935-93.931l31.309-31.309l62.626,62.622l140.894-140.898l31.309,31.309L174.199,322.918z"/></svg>',
 	download: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="100%" height="100%" viewBox="0 0 32 32"><path fill="currentColor" d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"></path></svg>'
 }
+
+export function sanitizeHTML(str) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}

js/custom-nodes-manager.js

@@ -4,7 +4,7 @@ import { api } from "../../scripts/api.js";
 
 import {
 	manager_instance, rebootAPI, install_via_git_url,
-	fetchData, md5, icons, show_message, customConfirm, customAlert, customPrompt
+	fetchData, md5, icons, show_message, customConfirm, customAlert, customPrompt, sanitizeHTML
 } from  "./common.js";
 
 // https://cenfun.github.io/turbogrid/api.html
@@ -250,6 +250,13 @@ const pageCss = `
 	color: white;
 }
 
+.cn-manager .cn-btn-import-failed {
+	background-color: #AA1111;
+    font-size: 10px;
+	font-weight: bold;
+	color: white;
+}
+
 .cn-manager .cn-btn-install {
 	background-color: black;
 	color: white;
@@ -872,6 +879,38 @@ export class CustomNodesManager {
 		return this.filter === ShowMode.ALTERNATIVES
 	}
 
+	async handleImportFail(rowItem) {
+		var info;
+		if(rowItem.version == 'unknown'){
+			info = {
+				'url': rowItem.originalData.files[0]
+			};
+		}
+		else{
+			info = {
+				'cnr_id': rowItem.originalData.id
+			};
+		}
+
+		const response = await api.fetchApi(`/customnode/import_fail_info`, {
+									method: 'POST',
+									headers: { 'Content-Type': 'application/json' },
+									body: JSON.stringify(info)
+								});
+
+		let res = await response.json();
+
+		let title = `<FONT COLOR=GREEN><B>Error message occurred while importing the '${rowItem.title}' module.</B></FONT><BR><HR><BR>`
+
+		if(res.code == 400)
+		{
+			show_message(title+'The information is not available.')
+		}
+		else {
+			show_message(title+sanitizeHTML(res['msg']).replace(/ /g, '&nbsp;').replace(/\n/g, '<BR>'));
+		}
+	}
+
 	renderGrid() {
 
 		// update theme
@@ -905,6 +944,7 @@ export class CustomNodesManager {
 			}
 		}
 
+		let self = this;
 		const columns = [{
 			id: 'id',
 			name: 'ID',
@@ -918,16 +958,29 @@ export class CustomNodesManager {
 			maxWidth: 500,
 			classMap: 'cn-node-name',
 			formatter: (title, rowItem, columnItem) => {
-			    var prefix = '';
-			    if(rowItem.action === 'invalid-installation') {
-			        prefix = '<font color="red"><B>(INVALID)</B></font>';
-			    }
+				const container = document.createElement('div');
 
-			    else if(rowItem.action === 'import-fail') {
-			        prefix = '<font color="red"><B>(IMPORT FAILED)</B></font>';
-			    }
+				if (rowItem.action === 'invalid-installation') {
+					const invalidTag = document.createElement('span');
+					invalidTag.style.color = 'red';
+					invalidTag.innerHTML = '<b>(INVALID)</b>';
+					container.appendChild(invalidTag);
+				} else if (rowItem.action === 'import-fail') {
+					const button = document.createElement('button');
+					button.className = 'cn-btn-import-failed';
+					button.innerText = 'IMPORT FAILED ↗';
+					button.onclick = () => self.handleImportFail(rowItem);
+					container.appendChild(button);
+					container.appendChild(document.createElement('br'));
+				}
 
-				return `${prefix}<a href=${rowItem.reference} target="_blank"><b>${title}</b></a>`;
+				const link = document.createElement('a');
+				link.href = rowItem.reference;
+				link.target = '_blank';
+				link.innerHTML = `<b>${title}</b>`;
+				container.appendChild(link);
+
+				return container;
 			}
 		}, {
 			id: 'version',