Support native JSON module

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.ex

@@ -223,14 +223,13 @@ defmodule ErrorTracker do
 
   ## Content serialization
 
-  The content stored on the context should be serializable using the JSON library
-  used by the application (usually `Jason`), so it is rather recommended to use
-  primitive types (strings, numbers, booleans...).
+  The content stored on the context should be serializable using the JSON library used by the
+  application (usually `JSON` for Elixir 1.18+ and `Jason` for older versions), so it is
+  recommended to use primitive types (strings, numbers, booleans...).
 
   If you still need to pass more complex data types to your context, please test
-  that they can be encoded to JSON or storing the errors will fail. In the case
-  of `Jason` that may require defining an Encoder for that data type if not
-  included by default.
+  that they can be encoded to JSON or storing the errors will fail. You may need to define a
+  custom encoder for that data type if not included by default.
   """
   @spec set_context(context()) :: context()
   def set_context(params) when is_map(params) do
@@ -383,4 +382,13 @@ defmodule ErrorTracker do
     Telemetry.new_occurrence(occurrence, muted)
     occurrence
   end
+
+  @doc false
+  def __default_json_encoder__ do
+    # Elixir 1.18+ includes the JSON module. On older versions we should fall back to Jason (which
+    # is listed as an optional dependency).
+    if Version.match?(System.version(), ">= 1.18.0"),
+      do: JSON,
+      else: Jason
+  end
 end

lib/error_tracker/schemas/occurrence.ex

@@ -46,26 +46,32 @@ defmodule ErrorTracker.Occurrence do
     if changeset.valid? do
       context = get_field(changeset, :context, %{})
 
-      json_encoder =
+      db_json_encoder =
         ErrorTracker.Repo.with_adapter(fn
-          :postgres -> Application.get_env(:postgrex, :json_library, Jason)
-          :mysql -> Application.get_env(:myxql, :json_library, Jason)
-          :sqlite -> Application.get_env(:ecto_sqlite3, :json_library, Jason)
+          :postgres -> Application.get_env(:postgrex, :json_library)
+          :mysql -> Application.get_env(:myxql, :json_library)
+          :sqlite -> Application.get_env(:ecto_sqlite3, :json_library)
         end)
 
-      case json_encoder.encode_to_iodata(context) do
-        {:ok, _} ->
-          put_change(changeset, :context, context)
-
-        {:error, _} ->
-          Logger.warning(
-            "[ErrorTracker] Context has been ignored: it is not serializable to JSON."
-          )
-
-          put_change(changeset, :context, %{
-            error: "Context not stored because it contains information not serializable to JSON."
-          })
-      end
+      validated_context =
+        try do
+          json_encoder = db_json_encoder || ErrorTracker.__default_json_encoder__()
+          _iodata = json_encoder.encode_to_iodata!(context)
+
+          context
+        rescue
+          _e in Protocol.UndefinedError ->
+            Logger.warning(
+              "[ErrorTracker] Context has been ignored: it is not serializable to JSON."
+            )
+
+            %{
+              error:
+                "Context not stored because it contains information not serializable to JSON."
+            }
+        end
+
+      put_change(changeset, :context, validated_context)
     else
       changeset
     end

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

@@ -77,7 +77,13 @@
     </.section>
 
     <.section title="Context">
-      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= Jason.encode!(@occurrence.context, pretty: true) %></pre>
+      <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>
   </div>
 

mix.exs

@@ -86,10 +86,10 @@ defmodule ErrorTracker.MixProject do
     [
       {:ecto_sql, "~> 3.0"},
       {:ecto, "~> 3.11"},
-      {:jason, "~> 1.1"},
       {:phoenix_live_view, "~> 0.19 or ~> 1.0"},
       {:phoenix_ecto, "~> 4.6"},
       {:plug, "~> 1.10"},
+      {:jason, "~> 1.1", optional: true},
       {:postgrex, ">= 0.0.0", optional: true},
       {:myxql, ">= 0.0.0", optional: true},
       {:ecto_sqlite3, ">= 0.0.0", optional: true},