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

rails_error_dashboard 0.1.0 → 0.1.1

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 (73) hide show

data/app/views/layouts/rails_error_dashboard.html.erb CHANGED Viewed

@@ -6,6 +6,18 @@
     <%= 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 -->
@@ -15,6 +27,11 @@
     <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>
     <style>
       :root {
         --primary-color: #8B5CF6;
@@ -40,8 +57,9 @@
         transition: background-color 0.3s ease, color 0.3s ease;
       }
-      /* Dark mode */
-      body.dark-mode {
+      /* Dark mode - support both class and data attribute for immediate loading */
+      body.dark-mode,
+      html[data-theme="dark"] body {
         --bg-color: #1A1B26;
         --text-color: #E4E5E9;
         --card-bg: #24283B;
@@ -196,12 +214,13 @@
         filter: brightness(0) invert(1);
       }
-      body.dark-mode .btn-close {
+      body.dark-mode .btn-close,
+      html[data-theme="dark"] body .btn-close {
         filter: brightness(0) invert(1);
       }
       .text-muted {
-        color: #9CA3AF !important;
+        color: #D1D5DB !important; /* Lighter gray for better contrast in dark mode */
       }
       .theme-toggle {
@@ -231,10 +250,89 @@
         height: 300px;
         margin: 1rem 0;
       }
+      /* Real-time updates - new error animation */
+      @keyframes slideInFade {
+        0% {
+          transform: translateY(-20px);
+          opacity: 0;
+          background-color: #FEF3C7;
+        }
+        10% {
+          transform: translateY(0);
+          opacity: 1;
+          background-color: #FEF3C7;
+        }
+        100% {
+          background-color: transparent;
+        }
+      }
+      /* Highlight new errors */
+      #error_list tr:first-child.new-error {
+        animation: slideInFade 3s ease-out;
+      }
+      /* Live indicator pulse */
+      @keyframes pulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+      #live-indicator {
+        animation: pulse 2s ease-in-out infinite;
+      }
+      /* Updated stat card pulse */
+      @keyframes statPulse {
+        0%, 100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.05);
+        }
+      }
+      .stat-card.updated {
+        animation: statPulse 0.5s ease-out;
+      }
+      /* Loading indicator */
+      #loading-indicator {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: linear-gradient(90deg, #8B5CF6 0%, #6D28D9 100%);
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform 0.3s ease;
+        z-index: 9999;
+        display: none;
+      }
+      #loading-indicator.active {
+        display: block;
+        animation: loadingProgress 2s ease-in-out forwards;
+      }
+      @keyframes loadingProgress {
+        0% { transform: scaleX(0); }
+        50% { transform: scaleX(0.7); }
+        100% { transform: scaleX(1); opacity: 0; }
+      }
     </style>
   </head>
   <body>
+    <!-- Loading Indicator -->
+    <div id="loading-indicator"></div>
     <!-- Top Navbar -->
     <nav class="navbar navbar-dark">
       <div class="container-fluid">
@@ -274,6 +372,20 @@
                   <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">
@@ -297,11 +409,6 @@
                   <i class="bi bi-phone"></i> Android Errors
                 <% end %>
               </li>
-              <li class="nav-item">
-                <%= link_to errors_path(environment: 'production'), class: "nav-link" do %>
-                  <i class="bi bi-server"></i> Production
-                <% end %>
-              </li>
             </ul>
           </div>
         </nav>
@@ -323,7 +430,13 @@
         const savedTheme = localStorage.getItem('theme') || 'light';
         if (savedTheme === 'dark') {
           document.body.classList.add('dark-mode');
+          document.documentElement.setAttribute('data-theme', 'dark');
           updateThemeIcon(true);
+        } else {
+          // Ensure light mode is clean
+          document.body.classList.remove('dark-mode');
+          document.documentElement.removeAttribute('data-theme');
+          updateThemeIcon(false);
         }
       });
@@ -331,6 +444,13 @@
         const body = document.body;
         const isDark = body.classList.toggle('dark-mode');
+        // Sync with html data attribute
+        if (isDark) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
         // Save preference
         localStorage.setItem('theme', isDark ? 'dark' : 'light');
@@ -346,6 +466,27 @@
           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,76 @@
+<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>
+      <% 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>

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

@@ -0,0 +1,209 @@
+<% if RailsErrorDashboard.configuration.enable_occurrence_patterns %>
+  <%
+    # Display occurrence patterns and bursts for an error
+    pattern_data = @error.occurrence_pattern(days: 30)
+    bursts = @error.error_bursts(days: 7)
+  %>
+  <% if pattern_data.present? && pattern_data[:total_errors] > 0 %>
+  <div class="card mb-4">
+    <div class="card-header bg-white">
+      <h5 class="mb-0">
+        <i class="bi bi-graph-up"></i> Occurrence Patterns
+        <small class="text-muted">(Last 30 days)</small>
+      </h5>
+    </div>
+    <div class="card-body">
+      <!-- Pattern Type Summary -->
+      <div class="row mb-4">
+        <div class="col-md-6">
+          <h6 class="text-muted mb-2">Pattern Type</h6>
+          <% case pattern_data[:pattern_type] %>
+          <% when :business_hours %>
+            <span class="badge bg-info fs-6">
+              <i class="bi bi-clock"></i> Business Hours Pattern
+            </span>
+            <p class="small text-muted mt-2">
+              Errors peak during business hours (9am-5pm), suggesting user activity correlation
+            </p>
+          <% when :night %>
+            <span class="badge bg-dark fs-6">
+              <i class="bi bi-moon-fill"></i> Night Pattern
+            </span>
+            <p class="small text-muted mt-2">
+              Errors peak during night hours (midnight-6am), possibly from background jobs or automated tasks
+            </p>
+          <% when :weekend %>
+            <span class="badge bg-primary fs-6">
+              <i class="bi bi-calendar-week"></i> Weekend Pattern
+            </span>
+            <p class="small text-muted mt-2">
+              Most errors occur on weekends, suggesting weekend-specific usage patterns
+            </p>
+          <% when :uniform %>
+            <span class="badge bg-secondary fs-6">
+              <i class="bi bi-distribute-horizontal"></i> Uniform Pattern
+            </span>
+            <p class="small text-muted mt-2">
+              Errors distributed evenly throughout the day with no clear pattern
+            </p>
+          <% else %>
+            <span class="badge bg-light text-dark fs-6">
+              <i class="bi bi-question-circle"></i> No Pattern Detected
+            </span>
+            <p class="small text-muted mt-2">
+              Not enough data to identify a clear occurrence pattern
+            </p>
+          <% end %>
+        </div>
+        <div class="col-md-6">
+          <h6 class="text-muted mb-2">Pattern Strength</h6>
+          <div class="d-flex align-items-center">
+            <div class="progress flex-grow-1" style="height: 25px;">
+              <div class="progress-bar <%= pattern_data[:pattern_strength] >= 0.7 ? 'bg-success' : pattern_data[:pattern_strength] >= 0.4 ? 'bg-warning' : 'bg-secondary' %>"
+                   role="progressbar"
+                   style="width: <%= (pattern_data[:pattern_strength] * 100).round %>%">
+                <%= (pattern_data[:pattern_strength] * 100).round %>%
+              </div>
+            </div>
+            <span class="ms-2 fw-bold"><%= (pattern_data[:pattern_strength] * 100).round %>%</span>
+          </div>
+          <p class="small text-muted mt-2">
+            <% if pattern_data[:pattern_strength] >= 0.7 %>
+              <strong>Strong pattern</strong> - Errors highly concentrated in specific hours
+            <% elsif pattern_data[:pattern_strength] >= 0.4 %>
+              <strong>Moderate pattern</strong> - Some concentration in specific hours
+            <% else %>
+              <strong>Weak pattern</strong> - Errors distributed fairly evenly
+            <% end %>
+          </p>
+        </div>
+      </div>
+      <!-- Hourly Distribution Heatmap -->
+      <% if pattern_data[:hourly_distribution].present? %>
+        <h6 class="text-muted mb-3">Hourly Distribution Heatmap</h6>
+        <div class="mb-4">
+          <div class="d-flex flex-wrap">
+            <% (0..23).each do |hour| %>
+              <% count = pattern_data[:hourly_distribution][hour] || 0 %>
+              <% max_count = pattern_data[:hourly_distribution].values.max || 1 %>
+              <% intensity = max_count > 0 ? (count.to_f / max_count * 100).round : 0 %>
+              <% is_peak = pattern_data[:peak_hours].include?(hour) %>
+              <div class="text-center m-1" style="width: 45px;">
+                <div class="rounded p-2 <%= is_peak ? 'border border-danger border-2' : '' %>"
+                     style="background-color: rgba(220, 53, 69, <%= intensity / 100.0 %>); min-height: 50px; display: flex; align-items: center; justify-content: center;"
+                     title="<%= hour %>:00 - <%= count %> errors">
+                  <small class="fw-bold <%= intensity > 50 ? 'text-white' : 'text-dark' %>">
+                    <%= count %>
+                  </small>
+                </div>
+                <small class="text-muted"><%= hour %></small>
+              </div>
+            <% end %>
+          </div>
+          <div class="mt-2 small text-muted">
+            <i class="bi bi-info-circle"></i>
+            Darker cells = more errors. Red borders indicate peak hours (>2x average).
+          </div>
+        </div>
+      <% end %>
+      <!-- Peak Hours -->
+      <% if pattern_data[:peak_hours].present? %>
+        <div class="alert alert-info">
+          <strong><i class="bi bi-clock-fill"></i> Peak Hours:</strong>
+          <%= pattern_data[:peak_hours].map { |h| "#{h}:00" }.join(", ") %>
+          <br>
+          <small>
+            These hours have more than 2x the average error rate. Consider monitoring deployments or load during these times.
+          </small>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <% end %>
+  <!-- Error Bursts -->
+  <% if bursts.present? && bursts.any? %>
+  <div class="card mb-4">
+    <div class="card-header bg-white">
+      <h5 class="mb-0">
+        <i class="bi bi-lightning-charge-fill text-warning"></i> Error Bursts
+        <span class="badge bg-warning text-dark"><%= bursts.count %></span>
+        <small class="text-muted">(Last 7 days)</small>
+      </h5>
+    </div>
+    <div class="card-body">
+      <p class="text-muted">
+        Error bursts are rapid sequences where multiple errors occur within minutes. This may indicate cascading failures or load spikes.
+      </p>
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>Start Time</th>
+              <th>Duration</th>
+              <th>Error Count</th>
+              <th>Intensity</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% bursts.first(10).each do |burst| %>
+              <tr>
+                <td>
+                  <%= burst[:start_time].strftime("%b %d, %Y %I:%M %p") %>
+                </td>
+                <td>
+                  <% duration_minutes = (burst[:duration_seconds] / 60.0).round(1) %>
+                  <%= duration_minutes %> min
+                  <small class="text-muted">(<%= burst[:duration_seconds].round %>s)</small>
+                </td>
+                <td>
+                  <strong><%= burst[:error_count] %></strong> errors
+                </td>
+                <td>
+                  <% case burst[:burst_intensity] %>
+                  <% when :high %>
+                    <span class="badge bg-danger">High (20+ errors)</span>
+                  <% when :medium %>
+                    <span class="badge bg-warning text-dark">Medium (10-19 errors)</span>
+                  <% when :low %>
+                    <span class="badge bg-info">Low (5-9 errors)</span>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      <% if bursts.count > 10 %>
+        <p class="text-muted small mb-0">
+          Showing 10 of <%= bursts.count %> detected bursts
+        </p>
+      <% end %>
+      <div class="alert alert-warning mt-3">
+        <strong><i class="bi bi-exclamation-triangle"></i> Recommendation:</strong>
+        Multiple error bursts detected. Investigate:
+        <ul class="mb-0 mt-2">
+          <li>Recent deployments or configuration changes around burst times</li>
+          <li>Load spikes or traffic patterns</li>
+          <li>Cascading failures from related errors</li>
+          <li>Background job failures or retry storms</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <% end %>
+  <% if (pattern_data.blank? || pattern_data[:total_errors] == 0) && bursts.blank? %>
+    <div class="alert alert-info">
+      <i class="bi bi-info-circle"></i>
+      No occurrence patterns or bursts detected. More data may be needed for pattern analysis.
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,34 @@
+<div class="row g-4">
+  <div class="col-md-3">
+    <div class="card stat-card">
+      <div class="card-body">
+        <div class="stat-label mb-2">Today</div>
+        <div class="stat-value text-info"><%= stats[:total_today] %></div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="card stat-card">
+      <div class="card-body">
+        <div class="stat-label mb-2">This Week</div>
+        <div class="stat-value text-primary"><%= stats[:total_week] %></div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="card stat-card">
+      <div class="card-body">
+        <div class="stat-label mb-2">Unresolved</div>
+        <div class="stat-value text-danger"><%= stats[:unresolved] %></div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <div class="card stat-card">
+      <div class="card-body">
+        <div class="stat-label mb-2">Resolved</div>
+        <div class="stat-value text-success"><%= stats[:resolved] %></div>
+      </div>
+    </div>
+  </div>
+</div>