Merge branch 'main' into 787-nested-liveviews-improvements

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
 

docs/config.md

@@ -94,6 +94,8 @@ config :live_debugger,
   signing_salt: "your_signing_salt", # Signing salt used for LiveDebugger.Endpoint
   adapter: Bandit.PhoenixAdapter, # Adapter used in LiveDebugger.Endpoint
   server: true, # Forces LiveDebugger to start even if project is not started with the `mix phx.server`
+  drainer: [shutdown: 1000] # Wait a maximum of 1000ms before forcefully terminating connections. You can also switch it off with `false`.
+
 
 # Name for LiveDebugger PubSub (it will create new one so don't put already used name)
 config :live_debugger, :pubsub_name, LiveDebugger.CustomPubSub

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

@@ -14,6 +14,7 @@ defmodule LiveDebugger do
   @default_port 4007
   @default_secret_key_base "DEFAULT_SECRET_KEY_BASE_1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcd"
   @default_signing_salt "live_debugger_signing_salt"
+  @default_drainer [shutdown: 1000]
 
   @js_path "assets/live_debugger/client.js"
   @css_path "assets/live_debugger/client.css"
@@ -67,7 +68,8 @@ defmodule LiveDebugger do
         secret_key_base: Keyword.get(config, :secret_key_base, @default_secret_key_base),
         live_view: [signing_salt: Keyword.get(config, :signing_salt, @default_signing_salt)],
         adapter: Keyword.get(config, :adapter, default_adapter()),
-        live_reload: Keyword.get(config, :live_reload, [])
+        live_reload: Keyword.get(config, :live_reload, []),
+        drainer: Keyword.get(config, :drainer, @default_drainer)
       ]
 
     endpoint_server = Keyword.get(config, :server)

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()