WIP: pretty print context in client

Author: crbelaus

assets/js/app.js

@@ -5,9 +5,35 @@ let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("
 let livePath = document.querySelector("meta[name='live-path']").getAttribute("content");
 let liveTransport = document .querySelector("meta[name='live-transport']") .getAttribute("content");
 
+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 LiveView.LiveSocket(livePath, Phoenix.Socket, {
   transport: liveTransport === "longpoll" ? Phoenix.LongPoll : WebSocket,
   params: { _csrf_token: csrfToken },
+  hooks: Hooks
+
 });
 
 // Show progress bar on live navigation and form submits

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

@@ -79,7 +79,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>