How to extract LiveBook error message from toast notification?

jyc · February 13, 2024, 12:16am

Hello!

I’ve been trying out LiveBook for some data processing. Sometimes when LiveBook encounters an error, it shows an error message in the cell’s output section. But other times it shows an error in a toast notification in the top-right corner of the screen, like so:

Sorry for the blurred text, I am not allowed to share the actual code this time

It looks like this happens when a GenServer.call fails.

Questions:

Is there any way in the UI to copy the error text from the toast notification? If I click on the notification to start dragging & selecting the text, it disappears, which is supper annoying. I’ve been using the Browser’s Developer Tools but this feels like a hack!
Is there any way to make the error show up in the output cell? The GenServer that is erroring was started with Kino.start_child!/1, which I thought would link the process for the cell to the GenServer, but I guess not.

Thank you! If this isn’t enough code I apologize, let me know and I can come up with a smaller example.

codeanpeace · February 13, 2024, 1:09am

It’d likely require some small changes to LiveBook. Here’s the .flash component responsible for the toast notification disappearing on click – note the phx-click="lv:clear-flash".

github.com

livebook-dev/livebook/blob/efc17fb01f4e1d654d024415172989bcdf699ed8/lib/livebook_web/components/core_components.ex#L42-L65


      
          def flash(assigns) do
            ~H"""
            <div
              :if={message = Phoenix.Flash.get(@flash, @kind)}
              class={[
                "shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg px-4 py-2 border-l-4 rounded-l-none bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer",
                @kind == :info && "border-blue-500",
                @kind == :success && "border-blue-500",
                @kind == :warning && "border-yellow-300",
                @kind == :error && "border-red-500"
              ]}
              role="alert"
              phx-click="lv:clear-flash"
              phx-value-key={@kind}
              {@rest}
            >
              <.remix_icon :if={@kind == :info} icon="information-line" class="text-2xl text-blue-500" />
              <.remix_icon :if={@kind == :success} icon="checkbox-circle-fill" class="text-2xl text-blue-500" />
              <.remix_icon :if={@kind == :warning} icon="alert-line" class="text-2xl text-yellow-400" />
              <.remix_icon :if={@kind == :error} icon="close-circle-line" class="text-2xl text-red-500" />

This file has been truncated. show original

LiveBook has some built-in clipboard functionality that you could potentially tap into for adding a copy button to the flash component.

jonatanklosko · February 13, 2024, 10:18am

Hey @jyc, I changed the flash messages to have an explicit close button, so that the content can be freely clicked and selected. See Redesign flash messages by jonatanklosko · Pull Request #2484 · livebook-dev/livebook · GitHub : )

jyc · February 14, 2024, 10:09pm

Thank you both!! Really appreciate the help, amazing that you were able to make the change so speedily.