feat: Support native JSON module (#135)

Since Elixir 1.18 there is a native `JSON` module, so new projects don't
need `Jason` and many don't have it. This pull request updates the error
tracker so:
- Jason is an optional dependency as the error tracker can work without
it
- We try to use the user-defined JSON library (just like we did before)
but if none is defined we default to the native `JSON` module for Elixir
1.18 and newer. On older versions we still default to `Jason` just like
we did before.
- We use the `encode_to_iodata!` function which is the most performant
and provided by both libraries.
- The `JSON` module can't pretty print like `Jason` does. Instead we are
now pretty printing in the client using `JSON.stringify` which is widely
available across all browsers.

There should not be any user-facing changes. Users will still see the
JSON context formatted just like they did before but now the
ErrorTracker works well on Elixir 1.18 and newer projects that don't
include Jason. We also don't force it for such projects as a native
alternative exists.

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.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
@@ -384,4 +383,24 @@ defmodule ErrorTracker do
     Telemetry.new_occurrence(occurrence, muted)
     occurrence
   end
+
+  @default_json_encoder (cond do
+                           Code.ensure_loaded?(JSON) ->
+                             JSON
+
+                           Code.ensure_loaded?(Jason) ->
+                             Jason
+
+                           true ->
+                             raise """
+                             No JSON encoder found. Please add Jason to your dependencies:
+
+                                 {:jason, "~> 1.1"}
+
+                             Or upgrade to Elixir 1.18+.
+                             """
+                         end)
+
+  @doc false
+  def __default_json_encoder__, do: @default_json_encoder
 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 ->
+            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

@@ -79,7 +79,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.13"},
       {:ecto, "~> 3.13"},
-      {:jason, "~> 1.1"},
       {:phoenix_live_view, "~> 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},