feat: logging and devtool entry

Author: zerosoul

electron/main/index.ts

@@ -3,7 +3,8 @@ import { join } from "node:path";
 // import NodeURL from "node:url";
 import { app, BrowserWindow, desktopCapturer, ipcMain, Menu, shell, Tray } from "electron";
 import { VocechatServer } from "@/types/common";
-import { readUserData, USER_DATA_PATH, writeUserData } from "./user-data";
+import { readUserData, USER_DATA_PATH, USER_LOG_PATH, writeUserData } from "./user-data";
+import logger from "./logger";
 
 // import { update } from "./update";
 
@@ -195,6 +196,12 @@ app.on("activate", () => {
     createWindow();
   }
 });
+ipcMain.on("vocechat-logging", (evt, arg) => {
+  console.log("handle:vocechat-logging", arg);
+
+  logger.error(JSON.stringify(arg));
+  // return true;
+});
 // Event handler for asynchronous incoming messages
 // init redux store
 ipcMain.handle("init-servers", () => {
@@ -205,9 +212,18 @@ ipcMain.handle("data-file-path", () => {
   console.log("handle:data-file-path", USER_DATA_PATH);
   return USER_DATA_PATH;
 });
-ipcMain.on("show-data-file", () => {
-  console.log("show-data-file", USER_DATA_PATH);
-  shell.showItemInFolder(USER_DATA_PATH);
+ipcMain.on("show-file", (evt, arg) => {
+  console.log("show-file", arg);
+  switch (arg) {
+    case "data":
+      shell.showItemInFolder(USER_DATA_PATH);
+      break;
+    case "log":
+      shell.showItemInFolder(USER_LOG_PATH);
+      break;
+    default:
+      break;
+  }
 });
 // controls from non-macOS
 ipcMain.on("control-mini", () => {

electron/main/logger.ts

@@ -0,0 +1,34 @@
+import winston from "winston";
+import { USER_ERROR_LOG_FILE, USER_LOG_FILE } from "./user-data";
+const logger = winston.createLogger({
+  level: "info",
+  format: winston.format.json(),
+  defaultMeta: { service: "vocechat" },
+  transports: [
+    //
+    // - Write all logs with importance level of `error` or less to `error.log`
+    // - Write all logs with importance level of `info` or less to `combined.log`
+    //
+    new winston.transports.File({
+      filename: USER_ERROR_LOG_FILE,
+      level: "error",
+      maxsize: 5242880,
+      maxFiles: 5,
+      tailable: true
+    }),
+    new winston.transports.File({ filename: USER_LOG_FILE })
+  ]
+});
+
+//
+// If we're not in production then log to the `console` with the format:
+// `${info.level}: ${info.message} JSON.stringify({ ...rest }) `
+//
+if (process.env.NODE_ENV !== "production") {
+  logger.add(
+    new winston.transports.Console({
+      format: winston.format.simple()
+    })
+  );
+}
+export default logger;

electron/main/user-data.ts

@@ -2,8 +2,13 @@
 import fs from "fs";
 import path from "path";
 import { app } from "electron";
-
+const date = new Date();
+const d = date.getDate();
+const m = date.getMonth() + 1;
 export const USER_DATA_PATH = path.join(app.getPath("userData"), "server_list.json");
+export const USER_LOG_PATH = path.join(app.getPath("userData"), "log/");
+export const USER_ERROR_LOG_FILE = path.join(USER_LOG_PATH, `error-${m}-${d}.log`);
+export const USER_LOG_FILE = path.join(USER_LOG_PATH, `combined-${m}-${d}.log`);
 
 export function readUserData() {
   try {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-desktop",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "main": "dist-electron/main/index.js",
   "description": "vocechat desktop version",
   "author": "Tristan <yanggc888@163.com>",
@@ -25,39 +25,40 @@
     "@tippyjs/react": "^4.2.6",
     "clsx": "^2.0.0",
     "electron-updater": "^6.1.1",
-    "framer-motion": "^10.15.0",
+    "framer-motion": "^10.15.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
     "redux-state-sync": "^3.1.4",
     "rooks": "^7.14.1",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "winston": "^3.10.0"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@types/redux-state-sync": "^3.1.5",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.14",
-    "electron": "^25.3.2",
+    "electron": "^25.4.0",
     "electron-builder": "^24.6.3",
     "electron-builder-notarize": "^1.5.1",
     "eslint": "^8.46.0",
-    "eslint-config-prettier": "^8.9.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "patch-package": "^8.0.0",
     "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
-    "vite": "^4.4.8",
+    "vite": "^4.4.9",
     "vite-plugin-electron": "^0.12.0",
     "vite-plugin-electron-renderer": "^0.14.5",
     "vite-plugin-svgr": "^3.2.0",

src/app/config.ts

@@ -1,4 +1,5 @@
 export const LOCAL_DATA_KEY = "VC_DESKTOP_DATA";
 export const PRIVOCE_SERVER_URL = "https://dev.voce.chat";
+// export const PRIVOCE_WEB_URL = "https://privoce.voce.chat";
 export const PRIVOCE_WEB_URL =
   process.env.NODE_ENV == "development" ? "http://localhost:3009" : "https://privoce.voce.chat";

src/assets/icons/debug.svg

@@ -2,7 +2,7 @@
 import IconLogo from "../assets/icon.png";
 import pkg from "../../package.json";
 import { useEffect, useState } from "react";
-import { ipcRenderer, shell } from "electron";
+import { ipcRenderer } from "electron";
 import Button from "./base/button";
 // type Props = {}
 
@@ -14,16 +14,21 @@ const About = () => {
       setFilePath(path);
     });
   }, []);
-  const handleOpen = () => {
-    ipcRenderer.send("show-data-file");
+  const handleOpen = (type: "data" | "log") => {
+    ipcRenderer.send("show-file", type);
   };
   return (
     <section className="flex h-screen w-screen flex-col items-center justify-center gap-2 dark:bg-neutral-800">
       <img className="h-20 w-20" src={IconLogo} alt="vocechat logo" />
       <h1 className="dark:text-neutral-200">About VoceChat Desktop</h1>
-      <Button onClick={handleOpen} title={filePath} size="sm">
-        Data file
-      </Button>
+      <div className="flex items-center gap-2">
+        <Button onClick={handleOpen.bind(null, "data")} title={filePath} size="sm">
+          Data
+        </Button>
+        <Button onClick={handleOpen.bind(null, "log")} size="sm">
+          Log
+        </Button>
+      </div>
       <div className="mt-8 flex flex-col items-center gap-1">
         <span className="text-xs text-gray-500">Version: {pkg.version}</span>
         <span className="text-xs text-gray-500">

src/components/about.tsx

@@ -5,18 +5,22 @@ import { motion } from "framer-motion";
 import { switchServer, updateAddModalVisible } from "@/app/slices/data";
 import { useAppSelector } from "@/app/store";
 import { ReactComponent as IconAdd } from "@/assets/icons/add.svg";
-// import { ReactComponent as IconDrag } from "@/assets/icons/drag.svg";
 import { ReactComponent as IconRefresh } from "@/assets/icons/refresh.svg";
-// import { isDarkMode } from "@/utils";
+import { ReactComponent as IconDebug } from "@/assets/icons/debug.svg";
 import ServerTip from "./server-tip";
 import AddServerModal from "./modal-add-server";
 import RemoveServerModal from "./modal-remove-server";
-import { WebviewTag } from "electron";
+import { WebviewTag, ipcRenderer } from "electron";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
 import ContextMenu, { MenuItem } from "./context-menu";
 import TitleBar from "./titlebar";
-
+// const LevelMap = {
+//   0: "verbose",
+//   1: "info",
+//   2: "warning",
+//   3: "error"
+// };
 const Layout = () => {
   const [removeServer, setRemoveServer] = useState<undefined | string>();
   const [reloadVisible, setReloadVisible] = useState(false);
@@ -26,6 +30,22 @@ const Layout = () => {
   useEffect(() => {
     if (servers.length == 0) {
       handleAddServer();
+    } else {
+      const webviews = [...document.querySelectorAll("webview")] as WebviewTag[];
+      webviews.forEach((webview) => {
+        webview.addEventListener("dom-ready", () => {
+          const url = webview.dataset.src;
+          console.log(`${url} dom-ready`);
+        });
+        webview.addEventListener("console-message", (e) => {
+          const { level, message, sourceId } = e;
+          if (level == 3) {
+            //  error
+            // console.log("Guest page logged a message:", message, sourceId);
+            ipcRenderer.send("vocechat-logging", { level, message, sourceId });
+          }
+        });
+      });
     }
   }, [servers]);
   const handleSwitch = (evt: MouseEvent<HTMLLIElement>) => {
@@ -45,6 +65,12 @@ const Layout = () => {
       wv.loadURL(wv.dataset.src);
     }
   };
+  const handleOpenWebviewDevTools = () => {
+    const wv = document.querySelector("webview[data-visible='true']") as WebviewTag;
+    if (wv && wv.dataset.src) {
+      wv.openDevTools();
+    }
+  };
   const showContextMenu = (_key: string) => {
     setMenuVisibleMap((prev) => {
       return {
@@ -92,6 +118,7 @@ const Layout = () => {
       >
         <aside
           className={clsx(
+            "relative",
             "flex h-full w-[66px] flex-col items-center gap-3 bg-neutral-200 dark:bg-gray-900",
             contextMenuVisible ? "" : "app-drag",
             isMac ? "pt-8" : "pt-1"
@@ -185,6 +212,13 @@ const Layout = () => {
               <IconRefresh className="outline-none group-hover:stroke-white" />
             </div>
           </ServerTip>
+          <button
+            title="Open DevTools"
+            onClick={handleOpenWebviewDevTools}
+            className="app-no-drag group absolute bottom-2 left-4 flex h-9 w-9 cursor-pointer items-center justify-center rounded  hover:bg-gray-500/50"
+          >
+            <IconDebug className="invisible outline-none group-hover:visible group-hover:stroke-white" />
+          </button>
         </aside>
         <motion.main className="relative flex h-full flex-1 items-center justify-center">
           {servers.map((server) => {