Add LiveView `attach_hook` to inject breadcrumbs

[Doerge]

For errors that occur in LiveViews/LiveComponents, such as those happening on a phx_click, I find I lack some additional context:

• Which liveview.
• Which phx-click event.
• What data was sent.

It would be nice if the specific LiveView, and the (optional) handle_event call, were captured automatically in breadcrumbs.

Is anyone working on this, or have a vague idea how to wrap all liveview calls in breadcrumbs? Then I could maybe take a stab at it.

[mitchellhenke]

Thanks for opening an issue @Doerge!

Does the stack trace in the error not include which live view the error occurred in?

Breadcrumbs could be a solution. Offering a way to capture breadcrumbs via telemetry events is possible, but I’m not sure if it would capture a given application’s context to be sufficiently helpful.

[Doerge]

Hi @mitchellhenke !

Sorry, dropped the ball on this one!

See this screenshot from Sentry:

It's a LiveView with LiveComponents, and maybe even nested LiveComponents. Could that be the reason why it's not showing the data?

[mitchellhenke]

All good 🙂

I haven't spent too much time with LiveComponents yet. Is there a possibility to add context to errors with add_breadcrumb in something like the mount or render callback? I'll start messing around with it myself, but I'd be curious on how helpful it is for someone using it in a more realistic environment.

[Doerge]

Since 0.16 there is a hook for this!
https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#attach_hook/4

I wanted to try adding a hook on socket connect like this:

defmodule MyAppWeb.UserSocket do
  use Phoenix.Socket

  import Phoenix.LiveView.Helpers

  def connect(_params, socket, _connect_info) do
+    socket =
+      attach_hook(socket, :sentry_breadcrumb_hook, :handle_event, fn
+        event, _params, socket ->
+          Sentry.Context.add_breadcrumb(%{
+            category: "web.liveview.phx_event",
+            message: event,
+            level: :info
+          })
+
+          {:cont, socket}
+      end)
+
    {:ok, socket}
  end
end

but I'm on LiveView 0.15, and upgrading to 0.16 involves touching quite a lot of stuff, so I can't test it in my project.
Will have to carve out time to upgrade, then I will try adding that hook!

[mitchellhenke]

I am also trying to find time to upgrade to 0.16 🙂

but that looks very promising!

[maennchen]

I just added some live view breadcrumbs in our project: https://github.com/jshmrtn/hygeia/blob/master/lib/hygeia_web/live/init/sentry.ex

This is using LiveView 0.16 and not the newest 0.17.

[whatyouhide]

I investigated this a bit today. We could add this to Sentry itself, but the amount of code to implement this is pretty nimble. The main issue I have with introducing this into the Sentry SDK is that it can become pretty cumbersome to to stuff like scrubbing params (for handle_params breadcrumbs) or events or anything like that.

@sl0thentr0py, how do you usually weigh the pros and cons of this kind of stuff for SDKs? Do you want to lean on the side of having as many integrations as possible, even if they're less configurable and stuff like that?

[sl0thentr0py]

yea in general, order of priority while deciding such things is

• don't break existing stuff
• if it adds broadly useful features, definitely implement it (maybe opt-in at first)
• add config switches later based on user feedback / requests

In general, any new feature doesn't have to be perfect in the beginning, iteration is always fine.
We have lots of integrations in other mainstream SDKs and yes, sometimes scrubbing is an issue when there's too much data but we have solutions like before_send and event_scrubber.