From e97668724f48dc3da0e4a299f34f9f34600398f3 Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Fri, 16 Feb 2024 03:14:10 +1100
Subject: [PATCH] Capture console.log to in-app log

---
 client/package-lock.json                  |  6 ++++++
 client/package.json                       |  1 +
 client/src/App.tsx                        |  2 ++
 client/src/services/LogCaptureService.tsx | 26 +++++++++++++++++++++++
 4 files changed, 35 insertions(+)
 create mode 100644 client/src/services/LogCaptureService.tsx

diff --git a/client/package-lock.json b/client/package-lock.json
index 8705ee9f..b65e3222 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,6 +15,7 @@
         "@mui/icons-material": "^5.14.11",
         "@mui/lab": "^5.0.0-alpha.146",
         "@mui/material": "^5.14.11",
+        "capture-console-logs": "^2.0.1-rc.1",
         "color-interpolate": "^1.0.5",
         "css-element-queries": "^1.2.3",
         "downloadjs": "^1.4.7",
@@ -3755,6 +3756,11 @@
         }
       ]
     },
+    "node_modules/capture-console-logs": {
+      "version": "2.0.1-rc.1",
+      "resolved": "https://registry.npmjs.org/capture-console-logs/-/capture-console-logs-2.0.1-rc.1.tgz",
+      "integrity": "sha512-Mm5dmR4+iVjpEBCB2p8z6Xsw08KXsWPpwkthXf+e/KcsyG0opamltU2NyPZWjoJZR5Fr1a+68+cNcVrfAL6KWA=="
+    },
     "node_modules/chai": {
       "version": "4.3.10",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
diff --git a/client/package.json b/client/package.json
index c184c460..9931fb07 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
     "@mui/icons-material": "^5.14.11",
     "@mui/lab": "^5.0.0-alpha.146",
     "@mui/material": "^5.14.11",
+    "capture-console-logs": "^2.0.1-rc.1",
     "color-interpolate": "^1.0.5",
     "css-element-queries": "^1.2.3",
     "downloadjs": "^1.4.7",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0f9e1922..1c058048 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -12,12 +12,14 @@ import { useSettings } from "slices/settings";
 import { SliceProvider as EnvironmentProvider } from "slices/SliceProvider";
 import { makeTheme } from "theme";
 import { TitleBar } from "components/title-bar/TitleBar";
+import { LogCaptureService } from "services/LogCaptureService";
 
 const services = [
   ConnectionsService,
   FeaturesService,
   RendererService,
   LayerService,
+  LogCaptureService,
 ];
 
 function App() {
diff --git a/client/src/services/LogCaptureService.tsx b/client/src/services/LogCaptureService.tsx
new file mode 100644
index 00000000..1ed32ecb
--- /dev/null
+++ b/client/src/services/LogCaptureService.tsx
@@ -0,0 +1,26 @@
+import CaptureConsole from "capture-console-logs";
+import { useSnackbar } from "components/generic/Snackbar";
+import { head, truncate } from "lodash";
+import { useEffect } from "react";
+
+export function LogCaptureService() {
+  const notify = useSnackbar();
+  useEffect(() => {
+    const cc = new CaptureConsole();
+    cc.start(true);
+    const interval = setInterval(() => {
+      const captures = cc.getCaptures();
+      if (captures.length) {
+        for (const { args } of captures) {
+          notify(`${truncate(head(args), { length: 200 })}`);
+        }
+        cc.flush();
+      }
+    }, 300);
+    return () => {
+      clearInterval(interval);
+      cc.stop();
+    };
+  }, []);
+  return <></>;
+}