Capture console.log to in-app log

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",

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() {

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 <></>;
+}