feat: send logs feature that send logs to a distant service. Full integration in ui

+ expose logger method to frontEnd (#53)

.env.example

@@ -0,0 +1,2 @@
+BUG_REPORT_URL=
+BUG_REPORT_API_KEY=

.gitignore

@@ -6,6 +6,9 @@
 /out
 /srpm-out
 
+# .env
+*.env
+
 # Config JSON File. Create it and fill it if you want to have dev only settings
 config/config.dev.json
 

README.md

@@ -367,13 +367,29 @@ Head over to the [Freedom Loader Workshop repository](https://github.com/MasterA
 
 ### Bug Reports
 
-Use the GitHub Issues system and include:
+You can report bugs either using the built-in application system or via the GitHub Issues system.
+
+#### Using the Built-in Report Tool
+
+1. Open Freedom Loader.
+2. Trigger the bug report interface.
+3. Fill in the title and description of the issue.
+4. Choose whether to include today's logs automatically.
+5. Submit the report.
+
+> [!NOTE]
+> If you need to attach extra context like screenshots or screen recordings, it is recommended to use the GitHub Issues
+system instead.
+
+#### Using GitHub Issues
+
+Open a new issue on the GitHub repository and include:
 
 - Clear description of the issue
 - Steps to reproduce
 - Expected vs actual behavior
 - Relevant logs from `AppData\Local\FreedomLoader\logs\` or `~/.local/share/FreedomLoader/logs/`
-- Screenshots if applicable
+- Screenshots or recordings if applicable
 
 ### Feature Requests
 

app/ipcHandlers.js

@@ -19,6 +19,7 @@ const config = require("../config");
 const { validateDownloadPath, getDefaultDownloadPath } = require("./pathValidator");
 const { userThemesPath } = require("../server/helpers/path.helpers");
 const { createSystemTray, destroyTray } = require("./tray");
+const {sendReport} = require("./sendReport");
 
 /**
  * Security whitelist for feature flags that can be modified at runtime.
@@ -180,7 +181,12 @@ function registerIpcHandlers(getMainWindow) {
    */
   ipcMain.on("open-config", () => shell.openPath(configFolderPath));
 
-  
+  /**
+   * Front end logger
+   */
+  ipcMain.on("log-error", (_, message) => logger.error(`[Frontend] ${message}`));
+  ipcMain.on("log-info", (_, message) => logger.info(`[Frontend] ${message}`));
+  ipcMain.on("log-warn", (_, message) => logger.warn(`[Frontend] ${message}`));
 
   /**
    * Retrieves available themes from filesystem.
@@ -199,6 +205,13 @@ function registerIpcHandlers(getMainWindow) {
     return await reloadThemes();
   });
 
+  /**
+   * Send bug report
+   */
+  ipcMain.handle("send-report", async (_, params) => {
+    return await sendReport(params);
+  })
+
   /**
    * Updates a runtime feature flag and persists it to disk.
    *

app/sendReport.js

@@ -0,0 +1,54 @@
+const fs = require("fs");
+const path = require("path");
+const {logger, logDir} = require("../server/logger");
+
+async function sendReport(params) {
+    try {
+        const {title, description, includeLogs} = params;
+
+        if (!title || !description) {
+            throw new Error("Title and description are required.");
+        }
+
+        const formData = new FormData();
+        formData.append("title", title);
+        formData.append("context", description);
+
+        if (includeLogs === "yes" && logDir) {
+            // YYYY-MM-DD
+            const today = new Date().toISOString().split("T")[0];
+
+            const logFilePath = path.join(logDir, `LOGS-${today}.log`);
+
+            if (fs.existsSync(logFilePath)) {
+                const logFileContent = fs.readFileSync(logFilePath);
+                const blob = new Blob([logFileContent], {type: "text/plain"});
+                formData.append("file", blob, `LOGS-${today}.log`);
+                logger.info("Logs attached to bug report.");
+            } else {
+                logger.warn(`Log file not found for today: ${logFilePath}`);
+            }
+        }
+
+        const response = await fetch(process.env.BUG_REPORT_URL, {
+            method: "POST",
+            headers: {
+                "X-Api-Key": process.env.BUG_REPORT_API_KEY
+            },
+            body: formData
+        });
+
+        if (!response.ok) {
+            logger.error(`Server returned an error: ${response.status}`);
+            throw new Error(`Server responded with status ${response.status}`);
+        }
+
+        logger.info("Bug report successfully sent.");
+        return true;
+    } catch (err) {
+        logger.error(`Failed to send bug report: ${err.message}`);
+        throw err;
+    }
+}
+
+module.exports = {sendReport};

main.js

@@ -78,6 +78,11 @@ const { userThemesPath, initUserThemes, validateBinaries, defaultDownloadFolder
 const {createSystemTray, destroyTray} = require("./app/tray");
 const { stopServer } = require("./server/server");
 
+/**
+ * Expose .env in process.env
+ */
+require("dotenv").config();
+
 /**
  * Global flag indicating if the application is intentionally shutting down.
  * Used across the app to bypass the "minimize to tray on close" behavior.

package-lock.json

@@ -12,6 +12,7 @@
         "chalk": "^4.1.2",
         "debug": "^4.4.1",
         "discord-rpc": "^4.0.1",
+        "dotenv": "^17.4.2",
         "electron-updater": "^6.6.2",
         "express": "^5.1.0",
         "express-rate-limit": "^8.2.1",

package.json

@@ -38,6 +38,7 @@
     "chalk": "^4.1.2",
     "debug": "^4.4.1",
     "discord-rpc": "^4.0.1",
+    "dotenv": "^17.4.2",
     "electron-updater": "^6.6.2",
     "express": "^5.1.0",
     "express-rate-limit": "^8.2.1",

preload.js

@@ -9,6 +9,35 @@ const { contextBridge, ipcRenderer } = require("electron");
  */
 contextBridge.exposeInMainWorld("electronAPI", {
 
+  /**
+   * Sends error log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logError: (...args) => ipcRenderer.send("log-error", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Sends info log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logInfo: (...args) => ipcRenderer.send("log-info", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Sends warning log message.
+   *
+   * @param {...any} args - Values to log
+   */
+  logWarn: (...args) => ipcRenderer.send("log-warn", args.map(arg => typeof arg === "object" ? JSON.stringify(arg) : arg).join(" ")),
+
+  /**
+   * Send Bug Report
+   *
+   * @param params
+   * @returns {Promise<any>}
+   */
+  sendReport: (params) => ipcRenderer.invoke('send-report', params),
+
   /**
    * Return process.platform to renderer
    */

public/index.html

@@ -21,6 +21,7 @@
             <div class="custom-controls">
                 <button id="devtools-btn" title="Dev Tools">Tools</button>
                 <button id="logs-btn" title="Logs">Logs</button>
+                <button id="report-bug-btn" title="Report a bug" onclick="open">Report a Bug</button> <!-- TODO: Find a better place -->
                 <button id="website-btn" title="Website">Website</button>
                 <button id="wiki-btn" title="Wiki">Wiki</button>
                 <button id="workshop-btn" title="Workshop">Theme Workshop</button>
@@ -295,7 +296,6 @@
 
             <span id="version-badge" class="version-badge"></span>
 
-        </div>
     </main>
 
     <!-- Toast Container -->
@@ -314,6 +314,7 @@
     <script src="script/fetchinfo.js"></script>
     <script src="script/progressBar.js"></script>
     <script src="script/customthemes.js"></script>
+    <script src="script/reportBug.js"></script>
     <script type="module" src="script/topbar.js"></script>
 
 </body>

public/script/reportBug.js

@@ -0,0 +1,121 @@
+class BugReportModal {
+    constructor() {
+        this.modal = null;
+        this.form = null;
+        this.init();
+    }
+
+    init() {
+        this.modal = document.createElement("div");
+        this.modal.className = "bug-modal-overlay";
+        this.modal.style.cssText = "display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:99999; font-family:sans-serif;";
+
+        this.modal.innerHTML = `
+      <div class="bug-modal-content" style="background:#14141491 !important; color:#ffffff !important; padding:24px !important; border-radius:10px !important; width:420px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.8) !important; display:flex !important; flex-direction:column !important; gap:16px !important; border: 1px solid #333 !important; box-sizing: border-box !important;">
+        <h3 style="margin:0 !important; font-size:1.2rem !important; font-weight:600 !important; color:#ffffff !important;">Report a Bug</h3>
+        <form id="bugReportForm" style="display:flex !important; flex-direction:column !important; gap:12px !important; width:unset !important; margin:0 !important; background:transparent !important; box-shadow: unset !important;">
+          <div style="display:flex !important; flex-direction:column !important; gap:4px !important;">
+            <label style="font-size:0.85rem !important; color:#aaaaaa !important;">Title <span style="color: red; font-weight: bold" >*</span> </label>
+            <input type="text" id="bugTitle" required style="background:#2a2a2a !important; border:1px solid #444 !important; color:#ffffff !important; border-radius:6px !important; padding:8px 10px !important; outline:none !important; width:100% !important; box-sizing: border-box !important;" />
+          </div>
+          <div style="display:flex !important; flex-direction:column !important; gap:4px !important;">
+            <label style="font-size:0.85rem !important; color:#aaaaaa !important;">Description <span style="color: red; font-weight: bold" >*</span></label>
+            <textarea id="bugDescription" placeholder="Provide some details about the bug" required rows="4" style="background:#2a2a2a !important; border:1px solid #444 !important; color:#ffffff !important; border-radius:6px !important; padding:8px 10px !important; outline:none !important; resize:vertical !important; width:100% !important; box-sizing: border-box !important;"></textarea>
+          </div>
+          <div style="display:flex !important; flex-direction:column !important; gap:4px !important;">
+            <label style="font-size:0.85rem !important; color:#aaaaaa !important;">Include Logs From Today</label>
+            <select id="bugIncludeLogs" style="background:#2a2a2a !important; border:1px solid #444 !important; color:#ffffff !important; border-radius:6px !important; padding:8px 10px !important; outline:none !important; width:100% !important; box-sizing: border-box !important;">
+              <option value="yes" style="background:#2a2a2a !important; color:#ffffff !important;">Yes</option>
+              <option value="no" style="background:#2a2a2a !important; color:#ffffff !important;">No</option>
+            </select>
+          </div>
+          <div style="display:flex !important; justify-content:flex-end !important; gap:8px !important; margin-top:8px !important;">
+            <button type="button" id="bugCancelBtn" style="background:#333333 !important; border:none !important; color:#cccccc !important; padding:8px 14px !important; border-radius:6px !important; cursor:pointer !important;">Cancel</button>
+            <button type="submit" style="background:#4f46e5 !important; border:none !important; color:#ffffff !important; padding:8px 16px !important; border-radius:6px !important; cursor:pointer !important; font-weight:500 !important;">Send</button>
+          </div>
+        </form>
+      </div>
+    `;
+
+        document.body.appendChild(this.modal);
+        this.form = this.modal.querySelector("#bugReportForm");
+
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        const titleInput = this.modal.querySelector("#bugTitle");
+        const descInput = this.modal.querySelector("#bugDescription");
+
+        titleInput.addEventListener("input", () => {
+            localStorage.setItem("draft_bug_title", titleInput.value);
+        });
+
+        descInput.addEventListener("input", () => {
+            localStorage.setItem("draft_bug_desc", descInput.value);
+        });
+
+        this.modal.querySelector("#bugCancelBtn").addEventListener("click", () => {
+            this.close();
+        });
+
+        this.modal.addEventListener("click", (e) => {
+            if (e.target === this.modal) {
+                this.close();
+            }
+        });
+
+        this.form.addEventListener("submit", async (e) => {
+            e.preventDefault();
+            const data = {
+                title: titleInput.value,
+                description: descInput.value,
+                includeLogs: this.modal.querySelector("#bugIncludeLogs").value
+            };
+
+            window.electronAPI.logInfo("Submitting:", data);
+
+            try {
+                const success = await window.electronAPI.sendReport(data);
+
+                if (success) {
+                    localStorage.removeItem("draft_bug_title");
+                    localStorage.removeItem("draft_bug_desc");
+                    this.form.reset();
+                    this.close();
+                    window.showSuccess("Bug report sent successfully!");
+                }
+            } catch (err) {
+                window.showError("Failed to send bug report.");
+                window.electronAPI.logError("Failed to send bug report:", err.message);
+            }
+        });
+    }
+
+    loadState() {
+        const savedTitle = localStorage.getItem("draft_bug_title");
+        const savedDesc = localStorage.getItem("draft_bug_desc");
+
+        if (savedTitle) {
+            this.modal.querySelector("#bugTitle").value = savedTitle;
+        }
+        if (savedDesc) {
+            this.modal.querySelector("#bugDescription").value = savedDesc;
+        }
+    }
+
+    open() {
+        this.loadState();
+        this.modal.style.display = "flex";
+    }
+
+    close() {
+        this.modal.style.display = "none";
+    }
+}
+
+window.bugModal = new BugReportModal();
+
+document.getElementById("report-bug-btn").addEventListener("click", () => {
+    window.bugModal.open();
+});