Reporting errors (#82)

* add module for Logger, add custom message to errors

* add link to issues on debugger page

* Move report-issue to bottom of sidebar, add report-issue in error screen

* Remove issue icon

* Remove module for Logger

* Remove bug-ant.svg

* Refactor: extract report_issue to Components

* Parametrize text of report_issue component

---------

Co-authored-by: Hubert Kasprzycki <hubert.kasprzycki@swmansion.com>

lib/live_debugger/components.ex

@@ -6,6 +6,8 @@ defmodule LiveDebugger.Components do
   use Phoenix.Component
   import LiveDebuggerWeb.Helpers
 
+  @report_issue_url "https://github.com/software-mansion-labs/live-debugger/issues/new/choose"
+
   @doc """
   Renders an alert with
   """
@@ -528,6 +530,27 @@ defmodule LiveDebugger.Components do
     """
   end
 
+  attr(:class, :any, default: nil)
+  attr(:text, :string, default: "See any issue? Report it")
+
+  def report_issue(assigns) do
+    assigns = assign(assigns, :report_issue_url, @report_issue_url)
+
+    ~H"""
+    <div class={[
+      "px-6 py-3 flex justify-center gap-1 text-xs "
+      | List.wrap(@class)
+    ]}>
+      <div>
+        <%= @text %>
+        <.link href={@report_issue_url} target="_blank" class="underline hover:text-gray-400">
+          here
+        </.link>
+      </div>
+    </div>
+    """
+  end
+
   attr(:variant, :string, required: true, values: ["danger", "success", "warning", "info"])
 
   defp alert_icon(assigns) do

lib/live_debugger/components/error.ex

@@ -38,6 +38,7 @@ defmodule LiveDebugger.Components.Error do
       <:heading>Unexpected error</:heading>
       <:description>
         Debugger encountered unexpected error. Check logs for more information
+        <.report_issue class="mb-4" text="Report the issue" />
       </:description>
     </.error_component>
     """

lib/live_debugger/live_components/sidebar.ex

@@ -73,7 +73,7 @@ defmodule LiveDebugger.LiveComponents.Sidebar do
   def render(assigns) do
     ~H"""
     <div class="w-max flex bg-white shadow-custom border border-secondary-200">
-      <div class="hidden sm:flex max-h-full flex-col w-64 gap-1">
+      <div class="hidden sm:flex max-h-full flex-col w-64 gap-1 justify-between">
         <.sidebar_content
           pid={@pid}
           socket_id={@socket_id}
@@ -82,6 +82,7 @@ defmodule LiveDebugger.LiveComponents.Sidebar do
           node_id={@node_id}
           myself={@myself}
         />
+        <.report_issue class="border-t border-secondary-200" />
       </div>
       <.sidebar_slide_over :if={not @hidden?} myself={@myself}>
         <.sidebar_content
@@ -92,6 +93,7 @@ defmodule LiveDebugger.LiveComponents.Sidebar do
           node_id={@node_id}
           myself={@myself}
         />
+        <.report_issue class="border-t border-secondary-200" />
       </.sidebar_slide_over>
     </div>
     """
@@ -140,7 +142,7 @@ defmodule LiveDebugger.LiveComponents.Sidebar do
     ~H"""
     <div class="absolute z-20 top-0 left-0 bg-black/25 w-full h-full flex sm:hidden justify-end">
       <div
-        class="w-64 h-full flex flex-col bg-white/100"
+        class="w-64 h-full flex flex-col bg-white/100 justify-between"
         phx-click-away="close_mobile_content"
         phx-target={@myself}
       >

lib/live_debugger/services/trace_service.ex

@@ -4,8 +4,6 @@ defmodule LiveDebugger.Services.TraceService do
   Created table is an ordered_set with non-positive integer keys.
   """
 
-  require Logger
-
   alias LiveDebugger.Structs.Trace
   alias LiveDebugger.CommonTypes
   alias Phoenix.LiveComponent.CID