faultline-rails 0.4.0 → 0.7.0

data/app/controllers/faultline/logged_exceptions_controller.rb

@@ -4,20 +4,24 @@ module Faultline
   class LoggedExceptionsController < ApplicationController
     before_action :faultline_require_auth!
 
-    helper_method :params_filters
+    helper_method :params_filters, :prev_exception, :next_exception
 
     def index
-      @exception_names = LoggedException.class_names
-      @controller_actions = LoggedException.controller_actions
+      load_exception_names
+      load_controller_actions
       @q = ransack_search
       @exceptions = @q.result(distinct: true)
-                      .paginate(page: params[:page], per_page: Faultline.configuration.per_page || 30)
+                      .paginate(page: params[:page], per_page: page_size)
+      load_stats if Faultline.configuration.show_stats
     end
 
     def query
+      load_exception_names
+      load_controller_actions
       @q = ransack_search
       @exceptions = @q.result(distinct: true)
-                      .paginate(page: params[:page], per_page: Faultline.configuration.per_page || 30)
+                      .paginate(page: params[:page], per_page: page_size)
+      load_stats if Faultline.configuration.show_stats
 
       respond_to do |format|
         format.turbo_stream
@@ -35,6 +39,8 @@ module Faultline
 
     def show
       @exception = LoggedException.find(params[:id])
+      load_nav_exceptions if Faultline.configuration.enable_navigation
+      load_exception_tabs
 
       respond_to do |format|
         format.turbo_stream
@@ -60,9 +66,11 @@ module Faultline
       end
       exceptions.delete_all
 
+      load_exception_names
+      load_controller_actions
       @q = ransack_search
       @exceptions = @q.result(distinct: true)
-                      .paginate(page: params[:page], per_page: Faultline.configuration.per_page || 30)
+                      .paginate(page: params[:page], per_page: page_size)
 
       respond_to do |format|
         format.turbo_stream
@@ -73,9 +81,11 @@ module Faultline
     def clear
       LoggedException.delete_all
 
+      load_exception_names
+      load_controller_actions
       @q = ransack_search
       @exceptions = @q.result(distinct: true)
-                      .paginate(page: params[:page], per_page: Faultline.configuration.per_page || 30)
+                      .paginate(page: params[:page], per_page: page_size)
 
       respond_to do |format|
         format.turbo_stream
@@ -96,6 +106,12 @@ module Faultline
       main_app.respond_to?(:root_path) ? main_app.root_path : "/"
     end
 
+    def page_size
+      requested = params[:per_page].to_i
+      options = Faultline.configuration.page_size_options
+      options.include?(requested) ? requested : (Faultline.configuration.per_page || 30)
+    end
+
     def ransack_search
       if defined?(Ransack)
         LoggedException.ransack(params[:q])
@@ -111,7 +127,8 @@ module Faultline
         query: params[:query],
         date_ranges_filter: params[:date_ranges_filter],
         exception_names_filter: params[:exception_names_filter],
-        controller_actions_filter: params[:controller_actions_filter]
+        controller_actions_filter: params[:controller_actions_filter],
+        per_page: params[:per_page]
       }.compact
     end
 
@@ -130,5 +147,61 @@ module Faultline
 
       exceptions
     end
+
+    def load_exception_names
+      @exception_names = LoggedException.class_names
+    end
+
+    def load_controller_actions
+      @controller_actions = LoggedException.controller_actions
+    end
+
+    def load_stats
+      total = LoggedException.count
+      today = LoggedException.where("created_at >= ?", Time.zone.today.beginning_of_day).count
+      week = LoggedException.where("created_at >= ?", 7.days.ago.beginning_of_day).count
+      yesterday = LoggedException.where("created_at >= ?", 1.day.ago.beginning_of_day)
+                                 .where("created_at < ?", Time.zone.today.beginning_of_day).count
+
+      @stats = {
+        total: total,
+        today: today,
+        this_week: week,
+        yesterday: yesterday,
+        top_classes: LoggedException.group(:exception_class).limit(5).count,
+        top_controllers: LoggedException.group(:controller_name).limit(5).count
+      }
+    end
+
+    def load_nav_exceptions
+      scope = filtered_scope.sorted
+      ids = scope.pluck(:id)
+      current_idx = ids.index(@exception.id)
+
+      if current_idx
+        @prev_exception_id = ids[current_idx + 1]
+        @next_exception_id = ids[current_idx - 1]
+      end
+    end
+
+    def prev_exception
+      return nil unless @prev_exception_id
+      OpenStruct.new(id: @prev_exception_id)
+    end
+
+    def next_exception
+      return nil unless @next_exception_id
+      OpenStruct.new(id: @next_exception_id)
+    end
+
+    def load_exception_tabs
+      @exception_tabs = {
+        overview: true,
+        backtrace: @exception.backtrace.present?,
+        request: @exception.request.present?,
+        environment: @exception.environment.present?,
+        user_info: @exception.user_info.present?
+      }
+    end
   end
 end

data/app/helpers/faultline/logged_exceptions_helper.rb

@@ -3,10 +3,28 @@
 module Faultline
   module LoggedExceptionsHelper
     def pretty_exception_date(exception)
-      if Date.today == exception.created_at.to_date
-        "Today, #{exception.created_at.strftime(Time::DATE_FORMATS[:exc_time])}"
+      if Faultline.configuration.date_format
+        return exception.created_at.strftime(Faultline.configuration.date_format)
+      end
+
+      time = exception.created_at
+      diff = Time.current - time
+
+      case
+      when diff < 60
+        "#{(diff).to_i}s ago"
+      when diff < 3600
+        "#{(diff / 60).to_i}m ago"
+      when diff < 86400
+        "#{(diff / 3600).to_i}h ago"
+      when diff < 604800
+        "#{(diff / 86400).to_i}d ago"
+      when Date.today == time.to_date
+        "Today, #{time.strftime('%I:%M %p')}"
+      when Date.yesterday == time.to_date
+        "Yesterday, #{time.strftime('%I:%M %p')}"
       else
-        exception.created_at.strftime(Time::DATE_FORMATS[:exc_date])
+        time.strftime('%b %d, %Y %I:%M %p')
       end
     end
 
@@ -35,16 +53,77 @@ module Faultline
     end
 
     # Sort link helper for Ransack-compatible table headers.
-    # Falls back to plain link if Ransack is not available.
     def sort_link(search, attribute, name = nil, **options, &block)
       name ||= attribute.to_s.humanize
 
       if defined?(Ransack) && search.respond_to?(:result)
-        # Delegate to Ransack's built-in sort_link helper
         Ransack::Helpers::FormHelper.instance_method(:sort_link).bind(self).call(search, attribute, name, **options, &block)
       else
         link_to name, "#", **options, &block
       end
     end
+
+    # Format backtrace for display with optional collapse
+    def format_backtrace(backtrace, limit: nil)
+      limit ||= Faultline.configuration.backtrace_limit
+      lines = backtrace.to_s.split("\n")
+
+      if lines.length > limit
+        collapsed = lines[0...limit]
+        remaining = lines[limit..]
+        {
+          visible: collapsed.join("\n"),
+          hidden: remaining.join("\n"),
+          hidden_count: remaining.length
+        }
+      else
+        { visible: lines.join("\n"), hidden: nil, hidden_count: 0 }
+      end
+    end
+
+    # Severity badge class based on exception type
+    def severity_for(exception)
+      case exception.exception_class
+      when /Timeout|Slow|Performance/i
+        "warning"
+      when /404|NotFound|Missing/i
+        "info"
+      else
+        "danger"
+      end
+    end
+
+    # Active filter pills for the filter bar
+    def active_filter_pills
+      pills = []
+
+      if params[:q].present?
+        params[:q].each do |key, value|
+          next if value.blank?
+          pills << { label: key.to_s.sub(/_(cont|eq|gteq|lteq)$/, "").humanize, value: value, param: "q[#{key}]" }
+        end
+      end
+
+      if params[:date_ranges_filter].present?
+        label = { "1" => "Today", "3" => "Last 3 days", "7" => "Last 7 days", "30" => "Last 30 days" }[params[:date_ranges_filter]] || "Custom"
+        pills << { label: label, value: params[:date_ranges_filter], param: "date_ranges_filter" }
+      end
+
+      pills
+    end
+
+    # Count occurrences of a specific exception class
+    def exception_count_for(exception_class)
+      LoggedException.where(exception_class: exception_class).count
+    end
+
+    # Simple sparkline data for stats
+    def exception_trend_data(days: 7)
+      data = (0...days).reverse_each.map do |i|
+        date = i.days.ago.to_date
+        LoggedException.where(created_at: date.beginning_of_day..date.end_of_day).count
+      end
+      data
+    end
   end
 end

data/app/javascript/controllers/faultline_controller.js

@@ -1,27 +1,375 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["activity"]
+  static targets = ["activity", "shortcutsDialog", "tabs", "tabContent", "exceptionList", "backtraceHidden", "backtraceContent"]
+  static values = { shortcuts: Boolean }
 
   connect() {
+    this.selectedIndex = -1
+    this.rows = []
+
     this.showActivity = this.showActivity.bind(this)
     this.hideActivity = this.hideActivity.bind(this)
 
     document.addEventListener("turbo:before-fetch-request", this.showActivity)
     document.addEventListener("turbo:before-fetch-response", this.hideActivity)
     document.addEventListener("turbo:submit-end", this.hideActivity)
+
+    if (this.shortcutsValue) {
+      this.boundKeydown = this.handleKeydown.bind(this)
+      document.addEventListener("keydown", this.boundKeydown)
+    }
   }
 
   disconnect() {
     document.removeEventListener("turbo:before-fetch-request", this.showActivity)
     document.removeEventListener("turbo:before-fetch-response", this.hideActivity)
     document.removeEventListener("turbo:submit-end", this.hideActivity)
+
+    if (this.boundKeydown) {
+      document.removeEventListener("keydown", this.boundKeydown)
+    }
+  }
+
+  // ─── Keyboard Navigation ──────────────────────────────────
+
+  handleKeydown(event) {
+    // Ignore when typing in an input/textarea/select
+    const tag = event.target.tagName.toLowerCase()
+    if (tag === "input" || tag === "textarea" || tag === "select") {
+      if (event.key === "Escape") {
+        event.target.blur()
+        event.preventDefault()
+      }
+      return
+    }
+
+    switch (event.key) {
+      case "/":
+        event.preventDefault()
+        this.focusSearch()
+        break
+      case "j":
+      case "ArrowDown":
+        event.preventDefault()
+        this.navigateDown()
+        break
+      case "k":
+      case "ArrowUp":
+        event.preventDefault()
+        this.navigateUp()
+        break
+      case "Enter":
+        event.preventDefault()
+        this.openSelected()
+        break
+      case "p":
+      case "ArrowLeft":
+        event.preventDefault()
+        this.navigateToPrev()
+        break
+      case "n":
+      case "ArrowRight":
+        event.preventDefault()
+        this.navigateToNext()
+        break
+      case "t":
+        event.preventDefault()
+        this.toggleTheme()
+        break
+      case "Escape":
+        event.preventDefault()
+        this.closeDetails(event)
+        this.closeShortcuts()
+        break
+      case "?":
+        event.preventDefault()
+        this.toggleShortcuts()
+        break
+      case "1": case "2": case "3": case "4": case "5":
+        event.preventDefault()
+        this.switchTabByIndex(parseInt(event.key) - 1)
+        break
+    }
+  }
+
+  focusSearch() {
+    const search = this.element.querySelector(".fl-search .fl-input, input[type='search']")
+    if (search) {
+      search.focus()
+      search.select()
+    }
+  }
+
+  refreshRows() {
+    if (this.hasExceptionListTarget) {
+      this.rows = Array.from(this.exceptionListTarget.querySelectorAll("tr[data-url]"))
+    } else {
+      this.rows = Array.from(this.element.querySelectorAll("tr[data-url]"))
+    }
+  }
+
+  navigateDown() {
+    this.refreshRows()
+    if (this.rows.length === 0) return
+
+    this.selectedIndex = Math.min(this.selectedIndex + 1, this.rows.length - 1)
+    this.highlightRow()
+  }
+
+  navigateUp() {
+    this.refreshRows()
+    if (this.rows.length === 0) return
+
+    this.selectedIndex = Math.max(this.selectedIndex - 1, 0)
+    this.highlightRow()
+  }
+
+  highlightRow() {
+    this.rows.forEach((row, i) => {
+      row.classList.toggle("selected", i === this.selectedIndex)
+    })
+
+    const row = this.rows[this.selectedIndex]
+    if (row) {
+      row.scrollIntoView({ block: "nearest", behavior: "smooth" })
+    }
+  }
+
+  openSelected() {
+    this.refreshRows()
+    if (this.selectedIndex < 0 || this.selectedIndex >= this.rows.length) return
+
+    const row = this.rows[this.selectedIndex]
+    const url = row.dataset.url
+    if (url) {
+      // Fetch and load into the detail panel
+      this.selectRow({ currentTarget: row, preventDefault: () => {} })
+    }
+  }
+
+  // ─── Row Selection ────────────────────────────────────────
+
+  selectRow(event) {
+    event.preventDefault()
+    const row = event.currentTarget
+    const url = row.dataset.url
+    if (!url) return
+
+    // Highlight selected row
+    this.refreshRows()
+    this.rows.forEach(r => r.classList.remove("selected"))
+    row.classList.add("selected")
+
+    // Show detail panel
+    const detailPanel = document.getElementById("exception-detail-desktop")
+    if (detailPanel) {
+      detailPanel.hidden = false
+      detailPanel.classList.remove("hidden")
+    }
+
+    // Load content via Turbo
+    const frame = document.getElementById("exception-details")
+    if (frame) {
+      frame.innerHTML = ""
+      frame.src = url
+    }
+  }
+
+  stopPropagation(event) {
+    event.stopPropagation()
+  }
+
+  // ─── Close Details ────────────────────────────────────────
+
+  closeDetails(event) {
+    event.preventDefault()
+
+    // Deselect all rows
+    this.refreshRows()
+    this.rows.forEach(r => r.classList.remove("selected"))
+    this.selectedIndex = -1
+
+    // Hide detail panel
+    const detailPanel = document.getElementById("exception-detail-desktop")
+    if (detailPanel) {
+      detailPanel.hidden = true
+      detailPanel.classList.add("hidden")
+    }
+
+    // Clear the turbo frame
+    const frame = document.getElementById("exception-details")
+    if (frame) {
+      frame.innerHTML = `
+        <div class="text-center py-12">
+          <div class="w-10 h-10 rounded-full flex items-center justify-center mx-auto" style="background: var(--fl-bg-secondary)">
+            <svg class="w-5 h-5" style="color: var(--fl-text-muted)" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+            </svg>
+          </div>
+          <p class="mt-2 text-xs" style="color: var(--fl-text-muted)">Select an exception to view details</p>
+          <p class="mt-1 text-xs" style="color: var(--fl-text-muted)">Click a row or press <span class="fl-kbd">↓</span> <span class="fl-kbd">↑</span> to navigate</p>
+        </div>
+      `
+    }
+  }
+
+  // ─── Tab Switching ────────────────────────────────────────
+
+  switchTab(event) {
+    const tabName = event.currentTarget.dataset.flTabParam || event.currentTarget.dataset.flTab
+    this.activateTab(tabName)
+  }
+
+  switchTabByIndex(index) {
+    if (!this.hasTabsTarget) return
+    const tabs = this.tabsTarget.querySelectorAll(".fl-tab")
+    if (index >= 0 && index < tabs.length) {
+      const tabName = tabs[index].dataset.flTabParam || tabs[index].dataset.flTab
+      this.activateTab(tabName)
+    }
   }
 
+  activateTab(tabName) {
+    // Update tab buttons
+    if (this.hasTabsTarget) {
+      this.tabsTarget.querySelectorAll(".fl-tab").forEach(tab => {
+        const isActive = (tab.dataset.flTabParam || tab.dataset.flTab) === tabName
+        tab.classList.toggle("active", isActive)
+      })
+    }
+
+    // Show/hide tab content
+    this.tabContentTargets.forEach(content => {
+      const isTarget = content.dataset.flTabContent === tabName
+      content.style.display = isTarget ? "" : "none"
+    })
+  }
+
+  // ─── Theme Toggle ─────────────────────────────────────────
+
+  toggleTheme() {
+    const themeController = this.application.getControllerForElementAndIdentifier(
+      document.documentElement,
+      "faultline--theme"
+    )
+    if (themeController) {
+      themeController.toggle()
+    } else {
+      // Fallback: direct DOM manipulation
+      const root = document.documentElement
+      const isDark = root.classList.contains("dark")
+      root.classList.remove("dark", "light")
+      root.classList.add(isDark ? "light" : "dark")
+      localStorage.setItem("faultline-theme", isDark ? "light" : "dark")
+    }
+  }
+
+  // ─── Keyboard Shortcuts Dialog ────────────────────────────
+
+  toggleShortcuts() {
+    if (!this.hasShortcutsDialogTarget) return
+    const isOpen = this.shortcutsDialogTarget.classList.contains("open")
+    if (isOpen) {
+      this.closeShortcuts()
+    } else {
+      this.shortcutsDialogTarget.classList.add("open")
+    }
+  }
+
+  closeShortcuts() {
+    if (this.hasShortcutsDialogTarget) {
+      this.shortcutsDialogTarget.classList.remove("open")
+    }
+  }
+
+  // ─── Navigation (prev/next) ───────────────────────────────
+
+  navigateToPrev() {
+    const prevLink = document.querySelector(".fl-nav-link[href*='logged_exceptions']")
+    if (prevLink && prevLink.querySelector(".fl-nav-link-label")?.textContent === "Previous") {
+      prevLink.click()
+    }
+  }
+
+  navigateToNext() {
+    const links = document.querySelectorAll(".fl-nav-link[href*='logged_exceptions']")
+    const nextLink = Array.from(links).find(link =>
+      link.querySelector(".fl-nav-link-label")?.textContent === "Next"
+    )
+    if (nextLink) nextLink.click()
+  }
+
+  // ─── Copy to Clipboard ───────────────────────────────────
+
+  copyId(event) {
+    const id = event.currentTarget.dataset.faultlineIdValue
+    if (id) this.copyToClipboard(id, event.currentTarget)
+  }
+
+  copyMessage(event) {
+    const message = event.currentTarget.dataset.faultlineMessageValue
+    if (message) this.copyToClipboard(message, event.currentTarget)
+  }
+
+  copyBacktrace(event) {
+    const backtrace = event.currentTarget.dataset.faultlineBacktraceValue
+    if (backtrace) this.copyToClipboard(backtrace, event.currentTarget)
+  }
+
+  async copyToClipboard(text, button) {
+    try {
+      await navigator.clipboard.writeText(text)
+      const originalHTML = button.innerHTML
+      button.classList.add("copied")
+      button.innerHTML = `<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Copied!`
+      setTimeout(() => {
+        button.classList.remove("copied")
+        button.innerHTML = originalHTML
+      }, 2000)
+    } catch (err) {
+      // Fallback for older browsers
+      const textarea = document.createElement("textarea")
+      textarea.value = text
+      textarea.style.position = "fixed"
+      textarea.style.opacity = "0"
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand("copy")
+      document.body.removeChild(textarea)
+    }
+  }
+
+  // ─── Backtrace Expand ─────────────────────────────────────
+
+  expandBacktrace(event) {
+    event.preventDefault()
+    const hidden = this.backtraceHiddenTarget
+    if (hidden) {
+      hidden.style.display = hidden.style.display === "none" ? "" : "none"
+      event.currentTarget.textContent = hidden.style.display === "none"
+        ? `Show ${hidden.textContent.split("\n").length} more frames`
+        : "Hide additional frames"
+    }
+  }
+
+  // ─── Submit Helpers ───────────────────────────────────────
+
   submit() {
     this.showActivity()
+    const form = this.element.querySelector("form[data-turbo-frame]")
+    if (form) form.requestSubmit()
+  }
+
+  debouncedSubmit(event) {
+    clearTimeout(this._debounceTimer)
+    this._debounceTimer = setTimeout(() => {
+      this.submit()
+    }, 400)
   }
 
+  // ─── Loading State ────────────────────────────────────────
+
   showActivity() {
     this.activityTarget?.classList.remove("hidden")
   }
@@ -29,10 +377,4 @@ export default class extends Controller {
   hideActivity() {
     this.activityTarget?.classList.add("hidden")
   }
-
-  closeDetails(event) {
-    event.preventDefault()
-    const details = document.getElementById("exception-details")
-    if (details) details.innerHTML = ""
-  }
 }

data/app/javascript/faultline/controllers/sidebar_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["drawer", "overlay"]
+
+  toggle() {
+    this.open()
+  }
+
+  open() {
+    this.drawerTarget.classList.remove("-translate-x-full")
+    this.overlayTarget.classList.remove("hidden")
+    document.body.style.overflow = "hidden"
+  }
+
+  close() {
+    this.drawerTarget.classList.add("-translate-x-full")
+    this.overlayTarget.classList.add("hidden")
+    document.body.style.overflow = ""
+  }
+}