Feat: Error modal and report option in context menu (#190)

* fix: safeExecute working with functions

* fix: App version available in modal templating

* feat(interface): Error modal appearing when an error occurs during the export process

* refactor(tab): separately safeExecute scraping and post-scraping to avoid inconsistency

* feat(contextMenu): Adding option to report bugs

* fix(tab): Fix error not launching modal

* fix(tab): Also report issue

* docs: update notes

esbuild.config.js

@@ -7,6 +7,7 @@ const {watchStatic} = require("./config/esbuild/watchStatic");
 const outdir = 'dist';
 const targetBrowser = process.env.TARGET || 'chrome';
 const appMode = process.env.APP_MODE || 'dev';
+const appVersion = require('./package.json').version.toString();
 const watchMode = process.env.WATCH_MODE || false; // Flag for watch mode
 
 const options = {
@@ -27,7 +28,7 @@ const options = {
   define: {
     'APP_MODE': `"${appMode}"`,
     'APP_TARGET': `"${targetBrowser}"`,
-    'APP_VERSION': `"${require('./package.json').version}"`,
+    'APP_VERSION': `"${appVersion}"`,
   },
   plugins: [
     cleanDirectoryPlugin(outdir),

public/files/modalMessages/modalError.md

@@ -0,0 +1,20 @@
+---
+title: "🤔 Well... The export didn't go as planned..."
+buttons:
+  - { text: "I'll try again" }
+  - {
+      text: "🐞 Report this bug",
+      url: "${appInfos.URLS.REPORT}",
+      style: "btn-primary",
+    }
+
+---
+It seems like an error has occurred during the export process. Please try again. If the issue persists, please report this bug.
+This information can help:
+- The steps to reproduce the problem 
+- The URL of this page 
+- The app version: v${appInfos.APP_VERSION} 
+- Screenshots illustrating the problem
+
+❤️ Thank you for your help and sorry for the inconvenience.
+

public/files/updateNotes.md

@@ -1,4 +1,9 @@
 # Update notes
+# 3.3.0
+🐞 Facilitating bug reports
+When an error occurs during the export process, a modal will appear inviting you report the bug. 
+Plus, an option is available in the icon context menu.
+
 # 3.2.6
 🧩 Some bug fixes
 Fixing ChatGPT sources export and the sources markdown formatting thanks to users feedback.

src/data/infos.json

@@ -14,7 +14,8 @@
     "STORES": {
       "CHROME": "https://chromewebstore.google.com/u/1/detail/agklnagmfeooogcppjccdnoallkhgkod",
       "FIREFOX": "https://addons.mozilla.org/firefox/addon/save-my-phind"
-    }
+    },
+    "REPORT": "https://save.hugocollin.com/issue"
   },
   "CONTACT_EMAIL": "[email protected]",
   "COPY_MODE": "tab"

src/entrypoints/tab.js

@@ -7,6 +7,7 @@ import {domainChecker} from "../scripts/shared/checker/domainChecker";
 import {getHostAndPath} from "../scripts/content/utils/getters";
 import {getStorageData} from "../scripts/shared/utils/chromeStorage";
 import {safeExecute} from "../scripts/shared/utils/jsShorteners";
+import {SCRAPER_FALLBACK_ACTION} from "../scripts/content/utils/fallbackActions";
 
 /**
  * @description - Main function to handle action on the tab
@@ -44,8 +45,11 @@ export async function actionExtensionIconClicked() {
     console.warn("Domain not allowed");
     return;
   }
-  launchScrapping(domainPage); // don't safeExecute because we don't want handleModalDisplay to increment count
-  await safeExecute(handleModalDisplay());
+
+  await safeExecute(async () => {
+    await launchScrapping(domainPage);
+    handleModalDisplay();
+  }, SCRAPER_FALLBACK_ACTION());
 }
 
 // Launch the main content script

src/scripts/background/interface/contextMenu/buildContextMenu.js

@@ -14,7 +14,7 @@ export function buildContextMenu() {
     });
     chrome.contextMenus.create({
       id: "tutorial",
-      title: (emojiSupported ? "❓ " : "") + "How-To-Use Tutorial",
+      title: (emojiSupported ? "❓ " : "") + "User's Guide",
       contexts: ["action"]
     });
     chrome.contextMenus.create({
@@ -27,6 +27,11 @@ export function buildContextMenu() {
       title: (emojiSupported ? "🤩 " : "") + "Share your feedback on the store",
       contexts: ["action"]
     });
+    chrome.contextMenus.create({
+      id: "bugReport",
+      title: (emojiSupported ? "🚀 " : "") + "Report a bug or suggest a feature",
+      contexts: ["action"]
+    });
     chrome.contextMenus.create({
       id: "donation",
       title: (emojiSupported ? "❤️ " : "") + "Support the project",
@@ -56,6 +61,9 @@ export function buildContextMenu() {
       case "exportPage":
         await launchIconClickAction(tab);
         break;
+      case "bugReport":
+        await chrome.tabs.create({url: appInfos.URLS.REPORT});
+        break;
       // case "openIconPopup":
       //   setOneTimePopup("pages/popup.html");
       //   break;

src/scripts/content/interface/uiEnhancer/modals/types/ModalMessage.js

@@ -30,10 +30,11 @@ export default class ModalMessage extends Modal {
     const [yamlContent, markdownContent] = markdownWithYaml.split('---\n').slice(1, 3);
 
     // Parse the YAML header
-    const yamlHeader = yaml.load(await replaceVariables(yamlContent, appInfos));
+    const variablesList = {...appInfos, APP_VERSION: APP_VERSION}; // include esbuild define variables
+    const yamlHeader = yaml.load(await replaceVariables(yamlContent, variablesList));
 
     // Process Markdown content
-    const processedMarkdownContent = replaceLocalPath(await replaceVariables(markdownContent, appInfos));
+    const processedMarkdownContent = replaceLocalPath(await replaceVariables(markdownContent, variablesList));
 
     // Title
     const innerDivImage = document.createElement('span');

src/scripts/content/utils/fallbackActions.js

@@ -1,4 +1,5 @@
 import appInfos from "../../../data/infos.json";
+import ModalMessage from "../interface/uiEnhancer/modals/types/ModalMessage";
 
 export function EXTRACTOR_FALLBACK_ACTION() {
   return (error) => {
@@ -13,3 +14,10 @@ export function EXPORTER_FALLBACK_ACTION() {
     throw new Error("File conversion error:\n" + error.stack);
   };
 }
+
+export function SCRAPER_FALLBACK_ACTION() {
+  return async (error) => {
+    await new ModalMessage('../files/modalMessages/modalError.md').appendModal();
+    throw error;
+  };
+}

src/scripts/shared/utils/jsShorteners.js

@@ -36,12 +36,21 @@ export function dynamicCall(object, funcToCall, ...args) {
  * @param catchAction
  */
 export async function safeExecute(action, catchAction = null) {
-  if (APP_MODE === 'dev') {
-    // console.log("Action to execute:", action);
-    return await action;
+  async function executeAction() {
+    switch (typeof action) {
+      case 'function':
+        return await action();
+      default:
+        // console.log("Action to execute:", action);
+        return await action;
+    }
   }
+
+  // if (APP_MODE === 'dev') {
+  //   return await executeAction();
+  // }
   try {
-    return await action;
+    return await executeAction();
   } catch (error) {
     catchAction
       ? catchAction(error)