RubyGems - rails_error_dashboard - Versions diffs - 0.1.0 → 0.1.3 - Mend

rails_error_dashboard 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

data/app/views/layouts/rails_error_dashboard_old_backup.html.erb ADDED Viewed

@@ -0,0 +1,383 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Error Dashboard - Audio Intelli API</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <!-- Apply theme immediately to prevent flash of wrong theme -->
+    <script>
+      // This runs BEFORE body renders to prevent flash
+      (function() {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'dark') {
+          // Add to html element so we can style body
+          document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      })();
+    </script>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <!-- Chart.js with date adapter -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>
+    <!-- Turbo for real-time updates -->
+    <script type="module">
+      import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.12/+esm'
+    </script>
+    <!-- Rails Error Dashboard Styles - Catppuccin Mocha Theme -->
+    <style>
+      <%= File.read(RailsErrorDashboard::Engine.root.join("app/assets/stylesheets/rails_error_dashboard/application.css")) %>
+    </style>
+  </head>
+  <body>
+    <!-- Loading Indicator -->
+    <div id="loading-indicator"></div>
+    <!-- Top Navbar -->
+    <nav class="navbar navbar-dark">
+      <div class="container-fluid">
+        <div class="d-flex align-items-center">
+          <!-- Mobile menu toggle -->
+          <button class="btn btn-link text-white d-md-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu">
+            <i class="bi bi-list fs-4"></i>
+          </button>
+          <a class="navbar-brand fw-bold" href="<%= root_path %>">
+            <i class="bi bi-bug-fill"></i>
+            Error Dashboard
+          </a>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+          <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()">
+            <i class="bi bi-moon-fill" id="themeIcon"></i>
+          </button>
+          <div class="text-white d-none d-md-block">
+            <small><%= Rails.env.titleize %> Environment</small>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <div class="container-fluid">
+      <div class="row">
+        <!-- Sidebar - Desktop -->
+        <nav class="col-md-2 d-none d-md-block sidebar" id="sidebarDesktop">
+          <div class="position-sticky pt-3">
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                <%= link_to root_path, class: "nav-link #{request.path == root_path ? 'active' : ''}" do %>
+                  <i class="bi bi-speedometer2"></i> Overview
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path, class: "nav-link #{request.path == errors_path ? 'active' : ''}" do %>
+                  <i class="bi bi-list-ul"></i> All Errors
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to analytics_errors_path, class: "nav-link #{request.path == analytics_errors_path ? 'active' : ''}" do %>
+                  <i class="bi bi-graph-up"></i> Analytics
+                <% end %>
+              </li>
+              <% if RailsErrorDashboard.configuration.enable_platform_comparison %>
+                <li class="nav-item">
+                  <%= link_to platform_comparison_errors_path, class: "nav-link #{request.path == platform_comparison_errors_path ? 'active' : ''}" do %>
+                    <i class="bi bi-phone"></i> Platform Health
+                  <% end %>
+                </li>
+              <% end %>
+              <% if RailsErrorDashboard.configuration.enable_error_correlation %>
+                <li class="nav-item">
+                  <%= link_to correlation_errors_path, class: "nav-link #{request.path == correlation_errors_path ? 'active' : ''}" do %>
+                    <i class="bi bi-diagram-3"></i> Correlation
+                  <% end %>
+                </li>
+              <% end %>
+            </ul>
+            <hr class="my-3">
+            <h6 class="sidebar-heading px-3 mt-4 mb-2 text-muted text-uppercase">
+              <small>Quick Filters</small>
+            </h6>
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                <%= link_to errors_path(unresolved: true), class: "nav-link" do %>
+                  <i class="bi bi-exclamation-circle text-danger"></i> Unresolved
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path(platform: 'iOS'), class: "nav-link" do %>
+                  <i class="bi bi-phone"></i> iOS Errors
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path(platform: 'Android'), class: "nav-link" do %>
+                  <i class="bi bi-phone"></i> Android Errors
+                <% end %>
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <!-- Sidebar - Mobile (Offcanvas) -->
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
+          <div class="offcanvas-header">
+            <h5 class="offcanvas-title" id="sidebarMenuLabel">
+              <i class="bi bi-bug-fill"></i> Error Dashboard
+            </h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          </div>
+          <div class="offcanvas-body">
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                <%= link_to root_path, class: "nav-link #{request.path == root_path ? 'active' : ''}", data: { bs_dismiss: "offcanvas" } do %>
+                  <i class="bi bi-speedometer2"></i> Overview
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path, class: "nav-link #{request.path == errors_path ? 'active' : ''}", data: { bs_dismiss: "offcanvas" } do %>
+                  <i class="bi bi-list-ul"></i> All Errors
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to analytics_errors_path, class: "nav-link #{request.path == analytics_errors_path ? 'active' : ''}", data: { bs_dismiss: "offcanvas" } do %>
+                  <i class="bi bi-graph-up"></i> Analytics
+                <% end %>
+              </li>
+              <% if RailsErrorDashboard.configuration.enable_platform_comparison %>
+                <li class="nav-item">
+                  <%= link_to platform_comparison_errors_path, class: "nav-link #{request.path == platform_comparison_errors_path ? 'active' : ''}", data: { bs_dismiss: "offcanvas" } do %>
+                    <i class="bi bi-phone"></i> Platform Health
+                  <% end %>
+                </li>
+              <% end %>
+              <% if RailsErrorDashboard.configuration.enable_error_correlation %>
+                <li class="nav-item">
+                  <%= link_to correlation_errors_path, class: "nav-link #{request.path == correlation_errors_path ? 'active' : ''}", data: { bs_dismiss: "offcanvas" } do %>
+                    <i class="bi bi-diagram-3"></i> Correlation
+                  <% end %>
+                </li>
+              <% end %>
+            </ul>
+            <hr class="my-3">
+            <h6 class="sidebar-heading px-3 mt-4 mb-2 text-muted text-uppercase">
+              <small>Quick Filters</small>
+            </h6>
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                <%= link_to errors_path(unresolved: true), class: "nav-link", data: { bs_dismiss: "offcanvas" } do %>
+                  <i class="bi bi-exclamation-circle text-danger"></i> Unresolved
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path(platform: 'iOS'), class: "nav-link", data: { bs_dismiss: "offcanvas" } do %>
+                  <i class="bi bi-phone"></i> iOS Errors
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path(platform: 'Android'), class: "nav-link", data: { bs_dismiss: "offcanvas" } do %>
+                  <i class="bi bi-phone"></i> Android Errors
+                <% end %>
+              </li>
+            </ul>
+            <hr class="my-3">
+            <div class="px-3">
+              <small class="text-muted">Environment</small>
+              <div class="fw-bold"><%= Rails.env.titleize %></div>
+            </div>
+          </div>
+        </div>
+        <!-- Main content -->
+        <main class="col-md-10 ms-sm-auto px-md-4">
+          <%= yield %>
+        </main>
+      </div>
+    </div>
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Theme Toggle Script -->
+    <script>
+      // Catppuccin Mocha Chart Colors
+      function getCatppuccinChartConfig(isDark) {
+        if (!isDark) {
+          // Light theme - keep existing for now
+          return {
+            textColor: '#1F2937',
+            gridColor: 'rgba(0, 0, 0, 0.1)',
+            tooltipBg: 'rgba(0, 0, 0, 0.8)',
+            colors: {
+              red: '#EF4444',
+              green: '#10B981',
+              yellow: '#F59E0B',
+              blue: '#3B82F6',
+              purple: '#8B5CF6',
+              pink: '#EC4899',
+              teal: '#14B8A6',
+              orange: '#F97316',
+              sapphire: '#3B82F6'
+            }
+          };
+        }
+        // Dark theme - Catppuccin Mocha
+        return {
+          textColor: '#cdd6f4',      // ctp-text
+          gridColor: 'rgba(88, 91, 112, 0.3)',  // ctp-surface2 with opacity
+          tooltipBg: '#313244',      // ctp-surface0
+          colors: {
+            red: '#f38ba8',          // ctp-red
+            green: '#a6e3a1',        // ctp-green
+            yellow: '#f9e2af',       // ctp-yellow
+            blue: '#89b4fa',         // ctp-blue
+            purple: '#cba6f7',       // ctp-mauve
+            pink: '#f5c2e7',         // ctp-pink
+            teal: '#94e2d5',         // ctp-teal
+            orange: '#fab387',       // ctp-peach
+            sapphire: '#74c7ec'      // ctp-sapphire
+          }
+        };
+      }
+      // Get platform-specific color
+      function getPlatformColor(platform, isDark) {
+        const config = getCatppuccinChartConfig(isDark);
+        const platformMap = {
+          'ios': isDark ? config.textColor : '#000000',
+          'android': config.colors.green,
+          'web': config.colors.blue,
+          'api': config.colors.sapphire
+        };
+        return platformMap[platform.toLowerCase()] || config.colors.purple;
+      }
+      // Update Chart.js defaults for dark/light theme
+      function updateChartTheme(isDark) {
+        if (typeof Chart !== 'undefined') {
+          const config = getCatppuccinChartConfig(isDark);
+          Chart.defaults.color = config.textColor;
+          Chart.defaults.borderColor = config.gridColor;
+          Chart.defaults.scale.grid.color = config.gridColor;
+          Chart.defaults.scale.ticks.color = config.textColor;
+          Chart.defaults.plugins.legend.labels.color = config.textColor;
+          Chart.defaults.plugins.tooltip.backgroundColor = config.tooltipBg;
+          Chart.defaults.plugins.tooltip.titleColor = config.textColor;
+          Chart.defaults.plugins.tooltip.bodyColor = config.textColor;
+          Chart.defaults.plugins.tooltip.borderColor = config.gridColor;
+        }
+      }
+      // Load theme from localStorage on page load
+      document.addEventListener('DOMContentLoaded', function() {
+        console.log('📄 DOMContentLoaded - Loading theme from localStorage');
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        const isDark = savedTheme === 'dark';
+        console.log('Saved theme:', savedTheme, '| isDark:', isDark);
+        if (isDark) {
+          document.body.classList.add('dark-mode');
+          document.documentElement.setAttribute('data-theme', 'dark');
+          console.log('✅ Applied dark theme (body.dark-mode + html[data-theme=dark])');
+          updateThemeIcon(true);
+        } else {
+          // Ensure light mode is clean
+          document.body.classList.remove('dark-mode');
+          document.documentElement.removeAttribute('data-theme');
+          console.log('✅ Applied light theme (removed classes)');
+          updateThemeIcon(false);
+        }
+        // Update Chart.js theme
+        updateChartTheme(isDark);
+        console.log('📊 Chart.js theme updated');
+      });
+      function toggleTheme() {
+        try {
+          console.log('🎨 Toggle theme clicked');
+          const body = document.body;
+          const isDark = body.classList.toggle('dark-mode');
+          console.log('Dark mode:', isDark);
+          // Sync with html data attribute
+          if (isDark) {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            console.log('✅ Set data-theme=dark');
+          } else {
+            document.documentElement.removeAttribute('data-theme');
+            console.log('✅ Removed data-theme');
+          }
+          // Save preference
+          localStorage.setItem('theme', isDark ? 'dark' : 'light');
+          console.log('💾 Saved to localStorage:', isDark ? 'dark' : 'light');
+          // Update icon
+          updateThemeIcon(isDark);
+          console.log('🌙 Updated icon');
+          // Update Chart.js theme
+          updateChartTheme(isDark);
+          console.log('📊 Updated Chart.js');
+          // Reload page to apply chart theme (Chart.js requires re-render)
+          console.log('🔄 Reloading page...');
+          setTimeout(() => location.reload(), 100);
+        } catch (error) {
+          console.error('❌ Error in toggleTheme:', error);
+          alert('Error toggling theme: ' + error.message);
+        }
+      }
+      function updateThemeIcon(isDark) {
+        const icon = document.getElementById('themeIcon');
+        if (isDark) {
+          icon.className = 'bi bi-sun-fill';
+        } else {
+          icon.className = 'bi bi-moon-fill';
+        }
+      }
+      // Loading indicator for form submissions and link clicks
+      const loadingIndicator = document.getElementById('loading-indicator');
+      // Show loading on form submit
+      document.addEventListener('submit', function() {
+        loadingIndicator.classList.add('active');
+      });
+      // Show loading on link clicks (except anchors)
+      document.addEventListener('click', function(e) {
+        const link = e.target.closest('a');
+        if (link && link.href && !link.href.startsWith('#') && !link.target) {
+          loadingIndicator.classList.add('active');
+        }
+      });
+      // Hide loading when page loads
+      window.addEventListener('load', function() {
+        loadingIndicator.classList.remove('active');
+      });
+    </script>
+  </body>
+</html>

data/app/views/rails_error_dashboard/error_notification_mailer/error_alert.html.erb CHANGED Viewed

@@ -136,13 +136,6 @@
         <div class="label">Error Type:</div>
         <div class="value"><code><%= @error_log.error_type %></code></div>
-        <div class="label">Environment:</div>
-        <div class="value">
-          <span class="badge badge-<%= @error_log.environment %>">
-            <%= @error_log.environment.upcase %>
-          </span>
-        </div>
         <% if @error_log.platform.present? %>
           <div class="label">Platform:</div>
           <div class="value">
@@ -155,9 +148,9 @@
         <div class="label">Occurred At:</div>
         <div class="value"><%= @error_log.occurred_at.strftime('%B %d, %Y at %I:%M %p %Z') %></div>
-        <% if @error_log.user.present? %>
-          <div class="label">User:</div>
-          <div class="value"><%= @error_log.user.email %></div>
+        <% if @error_log.user_id.present? %>
+          <div class="label">User ID:</div>
+          <div class="value"><%= @error_log.user_id %></div>
         <% end %>
         <% if @error_log.ip_address.present? %>

data/app/views/rails_error_dashboard/error_notification_mailer/error_alert.text.erb CHANGED Viewed

@@ -3,10 +3,9 @@
 ==========================================
 Error Type: <%= @error_log.error_type %>
-Environment: <%= @error_log.environment.upcase %>
 <% if @error_log.platform.present? %>Platform: <%= @error_log.platform %><% end %>
 Occurred At: <%= @error_log.occurred_at.strftime('%B %d, %Y at %I:%M %p %Z') %>
-<% if @error_log.user.present? %>User: <%= @error_log.user.email %><% end %>
+<% if @error_log.user_id.present? %>User ID: <%= @error_log.user_id %><% end %>
 <% if @error_log.ip_address.present? %>IP Address: <%= @error_log.ip_address %><% end %>
 <% if @error_log.request_url.present? %>Request URL: <%= @error_log.request_url %><% end %>

data/app/views/rails_error_dashboard/errors/_error_row.html.erb ADDED Viewed

@@ -0,0 +1,78 @@
+<tr id="error_<%= error.id %>">
+  <td onclick="event.stopPropagation();">
+    <input type="checkbox" class="error-checkbox form-check-input" value="<%= error.id %>" data-error-id="<%= error.id %>">
+  </td>
+  <td onclick="window.location='<%= error_path(error) %>';">
+    <% severity = error.severity %>
+    <% if severity == :critical %>
+      <span class="badge bg-danger" data-bs-toggle="tooltip" title="Critical severity - requires immediate attention">CRITICAL</span>
+    <% elsif severity == :high %>
+      <span class="badge bg-warning text-dark" data-bs-toggle="tooltip" title="High severity - should be fixed soon">HIGH</span>
+    <% elsif severity == :medium %>
+      <span class="badge bg-info text-dark" data-bs-toggle="tooltip" title="Medium severity - fix when possible">MEDIUM</span>
+    <% else %>
+      <span class="badge bg-secondary" data-bs-toggle="tooltip" title="Low severity - minor issue">LOW</span>
+    <% end %>
+    <% if error.respond_to?(:priority_score) && error.priority_score %>
+      <br><small class="text-muted" data-bs-toggle="tooltip" title="Priority score (0-100) based on severity, frequency, recency, and user impact">P<%= error.priority_score %></small>
+    <% end %>
+  </td>
+  <td onclick="window.location='<%= error_path(error) %>';">
+    <code class="text-danger" data-bs-toggle="tooltip" title="<%= error.error_type %>"><%= error.error_type.split('::').last %></code>
+    <% if error.respond_to?(:app_version) && error.app_version.present? %>
+      <br><small class="badge bg-light text-dark" data-bs-toggle="tooltip" title="App version when error occurred">v<%= error.app_version %></small>
+    <% end %>
+  </td>
+  <td onclick="window.location='<%= error_path(error) %>';">
+    <div class="text-truncate" style="max-width: 300px;" title="<%= error.message %>">
+      <%= error.message %>
+    </div>
+  </td>
+  <td onclick="window.location='<%= error_path(error) %>';">
+    <span class="badge bg-primary"><%= error.occurrence_count %>x</span>
+  </td>
+  <td onclick="window.location='<%= error_path(error) %>';">
+    <small>
+      <strong>First:</strong> <%= error.first_seen_at&.strftime("%m/%d %I:%M%p") || 'N/A' %><br>
+      <strong>Last:</strong> <%= error.last_seen_at&.strftime("%m/%d %I:%M%p") || 'N/A' %>
+    </small>
+  </td>
+  <% if local_assigns[:show_platform] %>
+    <td onclick="window.location='<%= error_path(error) %>';">
+      <% if error.platform == 'iOS' %>
+        <span class="badge badge-ios">iOS</span>
+      <% elsif error.platform == 'Android' %>
+        <span class="badge badge-android">Android</span>
+      <% elsif error.platform == 'Web' %>
+        <span class="badge badge-web">Web</span>
+      <% else %>
+        <span class="badge badge-api"><%= error.platform || 'API' %></span>
+      <% end %>
+    </td>
+  <% end %>
+  <td onclick="window.location='<%= error_path(error) %>';">
+    <% if error.user_id %>
+      <small data-bs-toggle="tooltip" title="User affected by this error">User #<%= error.user_id %></small>
+      <% if error.respond_to?(:user_impact_percentage) %>
+        <% impact = error.user_impact_percentage %>
+        <% if impact > 0 %>
+          <br><small class="badge bg-warning text-dark" data-bs-toggle="tooltip" title="Percentage of users affected by this error type"><%= impact %>% impact</small>
+        <% end %>
+      <% end %>
+    <% else %>
+      <small class="text-muted" data-bs-toggle="tooltip" title="No specific user affected">-</small>
+    <% end %>
+  </td>
+  <td onclick="window.location='<%= error_path(error) %>';">
+    <% if error.resolved? %>
+      <i class="bi bi-check-circle-fill text-success" title="Resolved"></i>
+    <% else %>
+      <i class="bi bi-exclamation-circle-fill text-danger" title="Unresolved"></i>
+    <% end %>
+  </td>
+  <td onclick="event.stopPropagation();">
+    <%= link_to error_path(error), class: "btn btn-sm btn-outline-primary" do %>
+      <i class="bi bi-eye"></i>
+    <% end %>
+  </td>
+</tr>