Log location urls for nicer error messages (#41)

tomfarm · web-flow · commit 6b148fe1b67b · 2025-07-16T12:48:17.000+02:00
* log location urls for nicer error messages like 14:41:19.464 [error] Javascript console: Failed to load resource: the server responded with a status of 404 (Not Found) (http://localhost:4002/afile.css)

* don't log unknown location

and add the line number

* Add tests for PhoenixTest.Playwright.Connection.add_location/1
diff --git a/lib/phoenix_test/playwright/connection.ex b/lib/phoenix_test/playwright/connection.ex
@@ -49,7 +49,9 @@ defmodule PhoenixTest.Playwright.Connection do
   def launch_browser(type, opts) do
     types = initializer("Playwright")
     type_id = Map.fetch!(types, type).guid
-    timeout = opts[:browser_launch_timeout] || opts[:timeout] || Config.global(:browser_launch_timeout)
+
+    timeout =
+      opts[:browser_launch_timeout] || opts[:timeout] || Config.global(:browser_launch_timeout)
 
     params =
       opts
@@ -93,7 +95,12 @@ defmodule PhoenixTest.Playwright.Connection do
   """
   def post(msg, timeout \\ nil) do
     default = %{params: %{}, metadata: %{}}
-    msg = msg |> Enum.into(default) |> update_in(~w(params timeout)a, &(&1 || timeout || Config.global(:timeout)))
+
+    msg =
+      msg
+      |> Enum.into(default)
+      |> update_in(~w(params timeout)a, &(&1 || timeout || Config.global(:timeout)))
+
     call_timeout = max(@min_genserver_timeout, round(msg.params.timeout * @timeout_grace_factor))
     GenServer.call(@name, {:post, msg}, call_timeout)
   end
@@ -161,7 +168,10 @@ defmodule PhoenixTest.Playwright.Connection do
   end
 
   defp log_js_error(state, %{method: :page_error} = msg) do
-    Logger.error("Javascript error: #{inspect(msg.params.error)}")
+    "Javascript error: #{inspect(msg.params.error)}"
+    |> add_location(msg)
+    |> Logger.error()
+
     state
   end
 
@@ -177,7 +187,9 @@ defmodule PhoenixTest.Playwright.Connection do
             _ -> :info
           end
 
-        Logger.log(level, "Javascript console: #{msg.params.text}")
+        "Javascript console: #{msg.params.text}"
+        |> add_location(msg)
+        |> tap(&Logger.log(level, &1))
 
       fun when is_function(fun, 1) ->
         fun.(msg)
@@ -194,6 +206,20 @@ defmodule PhoenixTest.Playwright.Connection do
 
   defp log_console(state, _), do: state
 
+  def add_location(text, %{params: %{location: %{url: url, line_number: 0}}} = _message) do
+    "#{text} (#{url})"
+  end
+
+  def add_location(text, %{params: %{location: %{url: url, line_number: line_number}}} = _message) do
+    "#{text} (#{url}:#{line_number})"
+  end
+
+  def add_location(text, %{params: %{location: %{url: url}}} = _message) do
+    "#{text} (#{url})"
+  end
+
+  def add_location(text, _message), do: text
+
   defp handle_started(state, %{method: :__create__, params: %{type: "Playwright"}}) do
     for from <- state.awaiting_started, do: GenServer.reply(from, :ok)
     %{state | status: :started, awaiting_started: :none}
diff --git a/test/phoenix_test/playwright/connection_test.exs b/test/phoenix_test/playwright/connection_test.exs
@@ -25,4 +25,92 @@ defmodule PhoenixTest.Playwright.ConnectionTest do
       end
     end
   end
+
+  test "add_location/1 accepts unknown data" do
+    message = %{a: 1}
+    assert "Hi" == Connection.add_location("Hi", message)
+  end
+
+  test "add_location/1 adds the file location to console messages" do
+    # a complete message
+    message = %{
+      params: %{
+        args: [%{guid: "handle@2ae9bdee66c01d900097b961352f69f4"}],
+        type: "log",
+        location: %{
+          url: "http://localhost:4002/assets/app.js",
+          line_number: 7085,
+          column_number: 10
+        },
+        text: "hello world",
+        page: %{guid: "page@47f9839e9773e11062e7794049ae830c"}
+      },
+      method: :console,
+      guid: "browser-context@6cb68e0f88cb4d3de5f56d4d91de65da"
+    }
+
+    assert "Hi (http://localhost:4002/assets/app.js:7085)" == Connection.add_location("Hi", message)
+
+    file_not_found = %{
+      params: %{
+        args: [],
+        type: "error",
+        location: %{
+          url: "http://localhost:4002/file.css",
+          line_number: 0,
+          column_number: 0
+        },
+        text: "Failed to load resource: the server responded with a status of 404 (Not Found)",
+        page: %{guid: "page@7afde413c6394658641b41c790d79647"}
+      },
+      guid: "browser-context@a02c2c526d9615e458f0ad540722911d",
+      method: :console
+    }
+
+    assert "Hi (http://localhost:4002/file.css)" == Connection.add_location("Hi", file_not_found)
+
+    # shortend, line number 0
+    message = %{
+      params: %{
+        type: "log",
+        location: %{
+          url: "http://localhost:4002/assets/app.js",
+          line_number: 0
+        },
+        text: "hello world"
+      },
+      method: :console
+    }
+
+    assert "Hi (http://localhost:4002/assets/app.js)" == Connection.add_location("Hi", message)
+
+    # shortend, line number 0
+    message = %{
+      params: %{
+        type: "log",
+        location: %{
+          url: "http://localhost:4002/assets/app.js"
+        },
+        text: "hello world"
+      },
+      method: :console
+    }
+
+    assert "Hi (http://localhost:4002/assets/app.js)" == Connection.add_location("Hi", message)
+
+    # shortend, line number 0, an error
+    message = %{
+      params: %{
+        type: "log",
+        location: %{
+          url: "http://localhost:4002/assets/app.js",
+          line_number: 0
+        },
+        text: "hello world"
+      },
+      method: :console
+    }
+
+    assert "Hi (http://localhost:4002/assets/app.js)" == Connection.add_location("Hi", message)
+  end
 end
