Unable to show toolbar
Closed this issue · 11 comments
Thank you for releasing this! I've been excited to try this since I watched your talk where you showed and mentioned you were working on this.
I've seen the toolbar once (It's always there on the dashboard, I just accidentally increased the text size of that browser window and it was pushing the toolbar off the screen >_<), but only on the live dashboard. I'm sure I've done something wrong, but I believe I have followed the instructions from the readme.
I'm seeing this error:
13:02:20.573 module=gen_server function=error_info/7 [error] GenServer #PID<0.1614.0> terminating ** (BadMapError) expected a map, got: nil (phoenix_profiler 0.1.0) lib/phoenix_profiler/toolbar/toolbar_live.ex:148: anonymous fn/2 in PhoenixProfiler.ToolbarLive.handle_info/2
(phoenix_live_view 0.17.5) lib/phoenix_live_view.ex:750: Phoenix.LiveView.update/3
(phoenix_profiler 0.1.0) lib/phoenix_profiler/toolbar/toolbar_live.ex:148: PhoenixProfiler.ToolbarLive.handle_info/2
(phoenix_live_view 0.17.5) lib/phoenix_live_view/channel.ex:250: Phoenix.LiveView.Channel.handle_info/2
(stdlib 3.17) gen_server.erl:695: :gen_server.try_dispatch/4
(stdlib 3.17) gen_server.erl:771: :gen_server.handle_msg/6
(stdlib 3.17) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Last message: {:event_duration, 56292}
State: %{components: {%{}, %{}, 1}, join_ref: "60", serializer: Phoenix.Socket.V2.JSONSerializer, socket: #Phoenix.LiveView.Socket<ass
igns: %{__changed__: %{}, durations: nil, exits: [], exits_count: 0, flash: %{}, live_action: nil, memory: nil, profile: %PhoenixProfi
ler.Profile{info: :enable, node: :nonode@nohost, server: PMWeb.Profiler, start_time: -576430045227789722, system: %{elixir:
"1.13.1", otp: "24", phoenix: '1.6.2', phoenix_live_view: '0.17.5', phoenix_profiler: '0.1.0'}, system_time: 1642718092932217851, tok
en: "FswbZutVDnLPTlYAABSk", url: "http://localhost:4000/live_dashboard/_profiler?nav=PMWeb.Profiler&pan
el=request&token=FswbZutVDnLPTlYAABSk"}, request: %{action: "nil", class: "disconnected", endpoint: "n/a", plug: "nil", router: "n/a",
router_helper: :router_not_set, status_code: ":|", status_phrase: "No Profiler Session (refresh)"}}, endpoint: PMWeb.Endpo
int, id: "phx-FswbZxQEtyJOVhLB", parent_pid: nil, root_pid: #PID<0.1614.0>, router: nil, transport_pid: #PID<0.1511.0>, view: PhoenixP
rofiler.ToolbarLive, ...>, topic: "lv:phx-FswbZxQEtyJOVhLB", upload_names: %{}, upload_pids: %{}}Elixir: 1.13.1
OTP: 24.2
Alpine Linux: 3.13.6
Phoenix: 1.6.2
LiveView: 0.17.5
LiveDashboard: 0.6.1
Edit:
I can see pages are being profiled:
Hi @iautom8things, thanks for the report! I believe this is fixed on main, could you try it and let me know? :)
Thank you, for the quick response!
I now see:
16:39:30.173 module=gen_server function=error_info/7 [error] GenServer #PID<0.1428.0> terminating ** (KeyError) key :latest_event not found
(phoenix_profiler 0.1.0) lib/phoenix_profiler/toolbar/toolbar_live.ex:149: anonymous fn/2 in PhoenixProfiler.ToolbarLive.handle_in
fo/2
(phoenix_live_view 0.17.5) lib/phoenix_live_view.ex:750: Phoenix.LiveView.update/3
(phoenix_profiler 0.1.0) lib/phoenix_profiler/toolbar/toolbar_live.ex:149: PhoenixProfiler.ToolbarLive.handle_info/2 (phoenix_live_view 0.17.5) lib/phoenix_live_view/channel.ex:250: Phoenix.LiveView.Channel.handle_info/2
(stdlib 3.17) gen_server.erl:695: :gen_server.try_dispatch/4
(stdlib 3.17) gen_server.erl:771: :gen_server.handle_msg/6
(stdlib 3.17) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Last message: {:event_duration, 159125}
State: %{components: {%{}, %{}, 1}, join_ref: "439", serializer: Phoenix.Socket.V2.JSONSerializer, socket: #Phoenix.LiveView.Socket<as
signs: %{__changed__: %{}, durations: %{}, exits: [], exits_count: 0, flash: %{}, live_action: nil, memory: nil, profile: %PhoenixProf
iler.Profile{info: :enable, node: :nonode@nohost, server: PMWeb.Profiler, start_time: -576459808492150569, system: %{elixir
: "1.13.1", otp: "24", phoenix: '1.6.2', phoenix_live_view: '0.17.5', phoenix_profiler: '0.1.0'}, system_time: 1642771078758988648, to
ken: "FsxLl6S3DVBoyOQAAB-D", url: "http://localhost:4000/live_dashboard/_profiler?nav=PMWeb.Profiler&pa
nel=request&token=FsxLl6S3DVBoyOQAAB-D"}, request: %{action: "nil", class: "disconnected", endpoint: "n/a", plug: "nil", router: "n/a"
, router_helper: :router_not_set, status_code: ":|", status_phrase: "No Profiler Session (refresh)"}}, endpoint: PMWeb.Endp
oint, id: "phx-FsxLmFSaJN3I5DQh", parent_pid: nil, root_pid: #PID<0.1428.0>, router: nil, transport_pid: #PID<0.1298.0>, view: Phoenix
Profiler.ToolbarLive, ...>, topic: "lv:phx-FsxLmFSaJN3I5DQh", upload_names: %{}, upload_pids: %{}}```@iautom8things I am pretty confident it is fixed now, but please re-open if not! :)
Thank you, Michael! I don't see any errors, anymore! But I'm still not seeing the profiler toolbar on any of my pages (except the LiveDashboard for some reason)
That includes both liveview and deadview pages
If the toolbar is being rendered on the LiveDashboard pages, then it would seem you have configured the profiler correctly. 🤔
The toolbar is injected into HTML responses by the Plug in your Endpoint. If you view-source on one of your pages, do you see the toolbar HTML being injected? In other words, is the code being delivered to the browser, but maybe something else is causing it not to appear?
Ok ... so two things:
- Maybe I'm a dingbat.
This is a phoenix app that started out on a much earlier version of phoenix that I've updated several times to keep up with the jones. I created a new test phoenix app and tried to figure out what was different between my project and what is auto generated.
Apparently I missed a step and only had an app layout myapp_web/layouts/app.html.eex and myapp-web/layouts/live.html.leex but no root layout myapp_web/layouts/root.html.eex. I split up my app layout into a root layout and added the put_root_layout plug.
I now see the toolbar on my pages!
- I didn't know (1) was successful until I got desperate and tried a different browser. Apparently the last thing I had done, when I viewed the toolbar on the LiveDashboard, was close it. That set the localStorage for
portal-manager.dev.c-spot.run-phxprof-toolbar-showtofalse.
The close button works, as I imagine you'd expect it to, on the LiveDashboard. It shrinks to just a small phoenix logo. But on my Live+Dead View pages, it disappears completely. I can create another issue for this, if you'd like?
Thank you for your help with this!
I suspect the close button is there, but perhaps it is being hidden somehow?
In your browser's dev tools, you can inspect the source for the mini toolbar element:
<div class="phxprof-minitoolbar">Is it being injected into the page? If so, is it being hidden by some other styles?
Thank you for your patience and help. I was able to track this down to the fact that clicking the close button applies the class hidden on the toolbar div. We use TailwindCSS and that class is provided as (docs):
hidden {
display: none;
}Would it be possible for phoenix_profiler to use a different class name, a prefix or let this be configurable?
@iautom8things Thanks for the report! I have renamed the toggle class. I have it on my roadmap to refactor the toolbar into web components so it will have scoped styles and we can avoid problems like these altogether in the future :)
Perfect, thank you for all of your help today!
Thanks for trying out the profiler! :)