WIP: pretty print context in client

Author: crbelaus

assets/js/app.js

@@ -8,7 +8,36 @@ let socketPath = document.querySelector("meta[name='socket-path']").getAttribute
 let socketTransport = document.querySelector("meta[name='socket-transport']").getAttribute("content");
 let normalizedTransport = (socketTransport == "longpoll") ? LongPoll : WebSocket;
 
-let liveSocket = new LiveSocket(socketPath, Socket, { transport: normalizedTransport, params: { _csrf_token: csrfToken }});
+
+const Hooks = {
+  JsonPrettyPrint: {
+    mounted() {
+      this.formatJson();
+    },
+    updated() {
+      this.formatJson();
+    },
+    formatJson() {
+      try {
+        // Get the raw JSON content
+        const rawJson = this.el.textContent.trim();
+        // Parse and stringify with indentation
+        const formattedJson = JSON.stringify(JSON.parse(rawJson), null, 2);
+        // Update the element content
+        this.el.textContent = formattedJson;
+      } catch (error) {
+        console.error("Error formatting JSON:", error);
+        // Keep the original content if there's an error
+      }
+    }
+  }
+};
+
+let liveSocket = new LiveSocket(socketPath, Socket, {
+  transport: normalizedTransport,
+  params: { _csrf_token: csrfToken },
+  hooks: Hooks
+});
 
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });

lib/error_tracker/web/live/show.html.heex

@@ -77,7 +77,11 @@
     </.section>
 
     <.section title="Context">
-      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900">
+      <pre
+        id="context"
+        class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900"
+        phx-hook="JsonPrettyPrint"
+      >
         <%= ErrorTracker.__default_json_encoder__().encode_to_iodata!(@occurrence.context) %>
       </pre>
     </.section>