Added support for logging client self log to text area

Author: niemyjski

example/browser/index.html

@@ -25,6 +25,9 @@ <h1>Log Submission</h1>
     <h1>Diagnostics</h1>
     <button id="config-settings-log">Log Client Configuration Settings (settings sent from server)</button>
 
+    <h2>Client Logs</h2>
+    <textarea id="logs" rows="30" style="width: 100%;"></textarea>
+
     <script type="module" src="index.js"></script>
   </body>
 </html>

example/browser/index.js

@@ -1,12 +1,14 @@
 import { Exceptionless } from "../../node_modules/@exceptionless/browser/dist/index.min.js";
 import { divide } from "./math.js";
+import { TextAreaSelfLogger } from "./text-area-logger.js";
 
 Exceptionless.startup(c => {
   c.apiKey = "LhhP1C9gijpSKCslHHCvwdSIz298twx271n1l6xw";
   c.serverUrl = "http://localhost:5000";
   c.updateSettingsWhenIdleInterval = 15000;
-  c.useDebugLogger();
   c.useLocalStorage();
+  c.useDebugLogger();
+  c.services.log = new TextAreaSelfLogger("logs", c.services.log);
   c.setUserIdentity("12345678", "Blake");
   c.useSessions();
 

example/browser/text-area-logger.js

@@ -0,0 +1,44 @@
+export class TextAreaSelfLogger {
+  constructor(elementId, logger) {
+    if (!elementId) {
+      throw new Error("elementId is required");
+    }
+
+    this.logger = logger;
+    this.messageBuffer = [];
+    if (document.readyState === "complete") {
+      this.element = document.getElementById(elementId);
+    } else {
+      document.addEventListener("DOMContentLoaded", () => {
+        this.element = document.getElementById(elementId);
+        this.element.innerHTML = this.messageBuffer.join("\n") + this.element.innerHTML;
+        this.messageBuffer = [];
+      });
+    }
+  }
+
+  trace(message) {
+    this.logger?.trace(message);
+    this.log("debug", message);
+  }
+  info(message) {
+    this.logger?.info(message);
+    this.log("info", message);
+  }
+  warn(message) {
+    this.logger?.warn(message);
+    this.log("warn", message);
+  }
+  error(message) {
+    this.logger?.error(message);
+    this.log("error", message);
+  }
+
+  log(level, message) {
+    if (this.element) {
+      this.element.innerHTML += `\n[${level}] Exceptionless: ${message}`;
+    } else {
+      this.messageBuffer.push(`[${level}] Exceptionless: ${message}`)
+    }
+  }
+}