Enhancement: Use telemetry event for updating components tree (#926)

* Add service for handling LiveView telemetry

* Bump :phoenix_live_view

* Fix

* Refactor

* Add e2e test

* Remove redundant tests

* Extract :phoenix_live_view version checks

* Remove unused functions

* If out logic that changes based on LiveView version

* Fix alias

Author: hhubert6

dev/embedded_live_view_controller.ex

@@ -1,5 +1,7 @@
 defmodule LiveDebuggerDev.EmbeddedLiveViewController do
-  use Phoenix.Controller, layouts: [html: {LiveDebuggerDev.Layout, :embedded}]
+  use Phoenix.Controller,
+    layouts: [html: {LiveDebuggerDev.Layout, :embedded}],
+    formats: []
 
   import Phoenix.LiveView.Controller
 

e2e/tests/dev-dbg-test.ts

@@ -21,7 +21,7 @@ export const test = base
     },
   });
 
-export const assigns_entry = (page: Page, key: string, value: string) =>
+export const findAssignsEntry = (page: Page, key: string, value: string) =>
   page.locator(
     `xpath=//*[@id=\"assigns\"]//*[contains(normalize-space(text()), \"${key}:\")]/../..//*[contains(normalize-space(text()), \"${value}\")]`
   );

e2e/tests/node-inspector.spec.ts

@@ -2,18 +2,25 @@ import {
   test,
   expect,
   findTraces,
-  assigns_entry,
+  findAssignsEntry,
   findSwitchTracingButton,
   findRefreshTracesButton,
   findClearTracesButton,
+  Page,
 } from './dev-dbg-test';
 
+const findNodeBasicInfo = (page: Page) =>
+  page.locator('#node-inspector-basic-info');
+
+const findComponentsTreeButton = (page: Page, name: string) =>
+  page.getByRole('button', { name });
+
 test('user can see traces of executed callbacks and updated assigns', async ({
   devApp,
   dbgApp,
 }) => {
   const traces = findTraces(dbgApp);
-  await expect(assigns_entry(dbgApp, 'counter', '0')).toBeVisible();
+  await expect(findAssignsEntry(dbgApp, 'counter', '0')).toBeVisible();
   await expect(traces).toHaveCount(2);
 
   const incBtn = devApp.getByRole('button', {
@@ -23,15 +30,15 @@ test('user can see traces of executed callbacks and updated assigns', async ({
   await incBtn.click();
   await incBtn.click();
 
-  await expect(assigns_entry(dbgApp, 'counter', '2')).toBeVisible();
+  await expect(findAssignsEntry(dbgApp, 'counter', '2')).toBeVisible();
   await expect(traces).toHaveCount(6);
 
   await findSwitchTracingButton(dbgApp).click();
 
   await incBtn.click();
   await incBtn.click();
 
-  await expect(assigns_entry(dbgApp, 'counter', '4')).toBeVisible();
+  await expect(findAssignsEntry(dbgApp, 'counter', '4')).toBeVisible();
   await expect(traces).toHaveCount(6);
 
   await findRefreshTracesButton(dbgApp).click();
@@ -104,6 +111,49 @@ test('return button redirects to active live views dashboard', async ({
   ).toBeVisible();
 });
 
+test('user can change nodes using node tree and see their assigns and callback traces', async ({
+  devApp,
+  dbgApp,
+}) => {
+  await findComponentsTreeButton(dbgApp, 'Conditional (5)').click();
+
+  await expect(findNodeBasicInfo(dbgApp)).toContainText('LiveComponent');
+  await expect(findNodeBasicInfo(dbgApp)).toContainText(
+    'LiveDebuggerDev.LiveComponents.Conditional'
+  );
+
+  await expect(findAssignsEntry(dbgApp, 'show_child?', 'false')).toBeVisible();
+  await expect(findTraces(dbgApp)).toHaveCount(2);
+
+  await expect(
+    findComponentsTreeButton(dbgApp, 'ManyAssigns (15)')
+  ).not.toBeVisible();
+
+  await devApp.locator('#conditional-button').click();
+
+  await expect(
+    findComponentsTreeButton(dbgApp, 'ManyAssigns (15)')
+  ).toBeVisible();
+
+  await expect(findAssignsEntry(dbgApp, 'show_child?', 'true')).toBeVisible();
+  await expect(findTraces(dbgApp)).toHaveCount(4);
+
+  await findComponentsTreeButton(dbgApp, 'Conditional (6)').click();
+  await findComponentsTreeButton(dbgApp, 'Conditional (5)').click();
+
+  await expect(findAssignsEntry(dbgApp, 'show_child?', 'true')).toBeVisible();
+  await expect(findTraces(dbgApp)).toHaveCount(4);
+
+  await devApp.locator('#conditional-button').click();
+
+  await expect(
+    findComponentsTreeButton(dbgApp, 'ManyAssigns (15)')
+  ).not.toBeVisible();
+
+  await expect(findAssignsEntry(dbgApp, 'show_child?', 'false')).toBeVisible();
+  await expect(findTraces(dbgApp)).toHaveCount(6);
+});
+
 test('Open in editor is disabled when envs are not set', async ({ dbgApp }) => {
   const openButton = dbgApp.getByRole('button', { name: 'Open in editor' });
   await expect(openButton).toBeDisabled();

lib/live_debugger/app/debugger/streams/stream_utils.ex

@@ -3,8 +3,7 @@ defmodule LiveDebugger.App.Debugger.Streams.StreamUtils do
   Utilities for extracting Phoenix.LiveView.Stream diffs
   from render traces and mapping them into a list of functions.
   """
-
-  @live_view_vsn Application.spec(:phoenix_live_view, :vsn) |> to_string()
+  alias LiveDebugger.Utils.Versions
 
   @type live_stream_item :: %Phoenix.LiveView.LiveStream{
           name: atom(),
@@ -63,17 +62,9 @@ defmodule LiveDebugger.App.Debugger.Streams.StreamUtils do
         reset?: reset?,
         consumable?: _consumable?
       }) do
-    # streams changed ordering in 1.0.2 so we don't need to reverse the inserts before this version
-    inserts =
-      if Version.match?(@live_view_vsn, ">= 1.0.2") do
-        Enum.reverse(inserts)
-      else
-        inserts
-      end
-
     []
     |> maybe_add_reset(reset?, name)
-    |> maybe_add_inserts(inserts, name)
+    |> maybe_add_inserts(adjust_inserts(inserts), name)
     |> maybe_add_deletes(deletes, name)
   end
 
@@ -245,4 +236,10 @@ defmodule LiveDebugger.App.Debugger.Streams.StreamUtils do
       end
     end)
   end
+
+  if Versions.live_view_streams_order_changed?() do
+    defp adjust_inserts(inserts), do: Enum.reverse(inserts)
+  else
+    defp adjust_inserts(inserts), do: inserts
+  end
 end

lib/live_debugger/services.ex

@@ -11,7 +11,8 @@ defmodule LiveDebugger.Services do
         {LiveDebugger.Services.GarbageCollector.Supervisor, []},
         {LiveDebugger.Services.ProcessMonitor.Supervisor, []},
         {LiveDebugger.Services.ClientCommunicator.Supervisor, []},
-        {LiveDebugger.Services.SuccessorDiscoverer.Supervisor, []}
+        {LiveDebugger.Services.SuccessorDiscoverer.Supervisor, []},
+        {LiveDebugger.Services.TelemetryHandler.Supervisor, []}
       ]
   end
 end

lib/live_debugger/services/callback_tracer/actions/function_trace.ex

@@ -3,10 +3,9 @@ defmodule LiveDebugger.Services.CallbackTracer.Actions.FunctionTrace do
   This module provides actions for traces.
   """
 
+  alias LiveDebugger.Utils.Versions
   alias LiveDebugger.Structs.Trace.FunctionTrace
   alias LiveDebugger.API.TracesStorage
-  alias LiveDebugger.API.LiveViewDebug
-  alias LiveDebugger.Utils.Modules, as: UtilsModules
 
   alias LiveDebugger.Bus
   alias LiveDebugger.Services.CallbackTracer.Events.TraceCalled
@@ -34,39 +33,41 @@ defmodule LiveDebugger.Services.CallbackTracer.Actions.FunctionTrace do
     end
   end
 
-  @spec create_delete_component_trace(
-          n :: non_neg_integer(),
-          args :: list(),
-          pid :: pid(),
-          cid :: String.t(),
-          timestamp :: :erlang.timestamp()
-        ) :: {:ok, FunctionTrace.t()} | :live_debugger_trace | {:error, term()}
-  def create_delete_component_trace(n, args, pid, cid, timestamp) do
-    pid
-    |> LiveViewDebug.socket()
-    |> case do
-      {:ok, %{id: socket_id, transport_pid: t_pid, view: view}} when is_pid(t_pid) ->
-        if UtilsModules.debugger_module?(view) do
-          :live_debugger_trace
-        else
-          trace =
-            FunctionTrace.new(
-              n,
-              Phoenix.LiveView.Diff,
-              :delete_component,
-              args,
-              pid,
-              timestamp,
-              socket_id: socket_id,
-              transport_pid: t_pid,
-              cid: %Phoenix.LiveComponent.CID{cid: cid}
-            )
-
-          {:ok, trace}
-        end
-
-      _ ->
-        {:error, "Could not get socket"}
+  if not Versions.live_component_destroyed_telemetry_supported?() do
+    @spec create_delete_component_trace(
+            n :: non_neg_integer(),
+            args :: list(),
+            pid :: pid(),
+            cid :: String.t(),
+            timestamp :: :erlang.timestamp()
+          ) :: {:ok, FunctionTrace.t()} | :live_debugger_trace | {:error, term()}
+    def create_delete_component_trace(n, args, pid, cid, timestamp) do
+      pid
+      |> LiveDebugger.API.LiveViewDebug.socket()
+      |> case do
+        {:ok, %{id: socket_id, transport_pid: t_pid, view: view}} when is_pid(t_pid) ->
+          if LiveDebugger.Utils.Modules.debugger_module?(view) do
+            :live_debugger_trace
+          else
+            trace =
+              FunctionTrace.new(
+                n,
+                Phoenix.LiveView.Diff,
+                :delete_component,
+                args,
+                pid,
+                timestamp,
+                socket_id: socket_id,
+                transport_pid: t_pid,
+                cid: %Phoenix.LiveComponent.CID{cid: cid}
+              )
+
+            {:ok, trace}
+          end
+
+        _ ->
+          {:error, "Could not get socket"}
+      end
     end
   end
 

lib/live_debugger/services/callback_tracer/actions/state.ex

@@ -3,6 +3,7 @@ defmodule LiveDebugger.Services.CallbackTracer.Actions.State do
   Actions responsible for saving LiveView process' state.
   """
 
+  alias LiveDebugger.Utils.Versions
   alias LiveDebugger.API.StatesStorage
   alias LiveDebugger.API.LiveViewDebug
   alias LiveDebugger.Structs.Trace.FunctionTrace
@@ -42,8 +43,10 @@ defmodule LiveDebugger.Services.CallbackTracer.Actions.State do
     do_save_initial_state!(pid, socket)
   end
 
-  def maybe_save_state!(%FunctionTrace{pid: pid, function: :delete_component, type: :call}) do
-    do_save_state!(pid)
+  if not Versions.live_component_destroyed_telemetry_supported?() do
+    def maybe_save_state!(%FunctionTrace{pid: pid, function: :delete_component, type: :call}) do
+      do_save_state!(pid)
+    end
   end
 
   def maybe_save_state!(_), do: :ok

lib/live_debugger/services/callback_tracer/actions/tracing.ex

@@ -4,6 +4,7 @@ defmodule LiveDebugger.Services.CallbackTracer.Actions.Tracing do
   """
   require Logger
 
+  alias LiveDebugger.Utils.Versions
   alias LiveDebugger.Services.CallbackTracer.GenServers.TracingManager
   alias LiveDebugger.Services.CallbackTracer.Queries.Callbacks, as: CallbackQueries
   alias LiveDebugger.Services.CallbackTracer.Queries.Traces, as: TraceQueries
@@ -92,7 +93,10 @@ defmodule LiveDebugger.Services.CallbackTracer.Actions.Tracing do
   defp apply_trace_patterns(modules) do
     # This is not a callback created by user
     # We trace it to refresh the components tree
-    Dbg.trace_pattern({Phoenix.LiveView.Diff, :delete_component, 2}, [])
+    # This will be replaced with telemetry event added in LiveView 1.1.0
+    if not Versions.live_component_destroyed_telemetry_supported?() do
+      Dbg.trace_pattern({Phoenix.LiveView.Diff, :delete_component, 2}, [])
+    end
 
     modules
     |> CallbackQueries.all_callbacks()

lib/live_debugger/services/callback_tracer/gen_servers/trace_handler.ex

@@ -5,6 +5,7 @@ defmodule LiveDebugger.Services.CallbackTracer.GenServers.TraceHandler do
 
   use GenServer
 
+  alias LiveDebugger.Utils.Versions
   alias LiveDebugger.Utils.Callbacks, as: CallbackUtils
   alias LiveDebugger.Services.CallbackTracer.Actions.FunctionTrace, as: TraceActions
   alias LiveDebugger.Services.CallbackTracer.Actions.State, as: StateActions
@@ -64,27 +65,28 @@ defmodule LiveDebugger.Services.CallbackTracer.GenServers.TraceHandler do
   #
   #########################################################
 
-  @impl true
-  def handle_cast(
-        {:new_trace,
-         {_, pid, _, {Phoenix.LiveView.Diff, :delete_component, [cid | _] = args}, ts}, n},
-        state
-      ) do
-    Task.start(fn ->
-      with {:ok, trace} <- TraceActions.create_delete_component_trace(n, args, pid, cid, ts),
-           :ok <- StateActions.maybe_save_state!(trace),
-           :ok <- TraceActions.publish_trace(trace) do
-        :ok
-      else
-        :live_debugger_trace ->
+  if not Versions.live_component_destroyed_telemetry_supported?() do
+    def handle_cast(
+          {:new_trace,
+           {_, pid, _, {Phoenix.LiveView.Diff, :delete_component, [cid | _] = args}, ts}, n},
+          state
+        ) do
+      Task.start(fn ->
+        with {:ok, trace} <- TraceActions.create_delete_component_trace(n, args, pid, cid, ts),
+             :ok <- StateActions.maybe_save_state!(trace),
+             :ok <- TraceActions.publish_trace(trace) do
           :ok
+        else
+          :live_debugger_trace ->
+            :ok
 
-        {:error, err} ->
-          raise "Error while handling trace: #{inspect(err)}"
-      end
-    end)
+          {:error, err} ->
+            raise "Error while handling trace: #{inspect(err)}"
+        end
+      end)
 
-    {:noreply, state}
+      {:noreply, state}
+    end
   end
 
   #########################################################
@@ -97,6 +99,7 @@ defmodule LiveDebugger.Services.CallbackTracer.GenServers.TraceHandler do
   #
   #########################################################
 
+  @impl true
   def handle_cast({:new_trace, {_, pid, :call, {module, fun, args}, ts}, n}, state)
       when fun in @allowed_callbacks do
     with {:ok, trace} <- TraceActions.create_trace(n, module, fun, args, pid, ts),