rails_observatory 0.1.0

data/app/controllers/rails_observatory/jobs_controller.rb

@@ -0,0 +1,25 @@
+module RailsObservatory
+  class JobsController < ApplicationController
+
+    before_action :set_duration
+
+    around_action :set_time_range
+
+    def index
+      JobTrace.ensure_index
+      @recent_jobs = JobTrace.all.take(10)
+    end
+
+    def show
+      @job = JobTrace.find(params[:id])
+      @events = @job.events
+
+    end
+
+    def set_time_range
+      TimeSeries.with_slice(duration.seconds.ago..) do
+        yield
+      end
+    end
+  end
+end

data/app/controllers/rails_observatory/mailers_controller.rb

@@ -0,0 +1,11 @@
+module RailsObservatory
+  class MailersController < ApplicationController
+
+    def index
+
+      MailDelivery.ensure_index
+      @deliveries = MailDelivery.all
+
+    end
+  end
+end

data/app/controllers/rails_observatory/requests_controller.rb

@@ -0,0 +1,33 @@
+module RailsObservatory
+  class RequestsController < ApplicationController
+
+    def index
+      @time_range = (duration.seconds.ago..)
+
+      if params[:controller_action].blank?
+        @count_by_controller = TimeSeries.where(name: 'request.count', action: '*')
+                                         .slice(@time_range)
+                                         .downsample(1, using: :sum)
+                                         .select { _1.value > 0 }
+                                         .sort_by(&:value)
+                                         .reverse
+
+        @latency_by_controller = TimeSeries.where(name: 'request.latency', action: '*')
+                                           .slice(@time_range)
+                                           .downsample(1, using: :avg)
+                                           .index_by { _1.labels[:action] }
+      end
+
+      RequestTrace.ensure_index
+      @events = RequestTrace.all
+    end
+
+    def show
+      @request = RequestTrace.find(params[:id])
+      @middleware_events = @request.events.only('process_middleware.action_dispatch')
+      @events = @request.events
+      @icicle_chart_series = @events.to_series
+    end
+
+  end
+end

data/app/helpers/rails_observatory/application_helper.rb

@@ -0,0 +1,110 @@
+require 'rouge'
+module RailsObservatory
+  module ApplicationHelper
+
+    def highlight_source_extract(source_extract)
+      source_extract.symbolize_keys => {code:, line_number:}
+      fmt = Rouge::Formatters::HTMLLineTable.new(Rouge::Formatters::HTML.new, start_line: code.keys.first.to_s.to_i)
+      html = Nokogiri::HTML4(Rouge.highlight(code.values.flatten.join(""), 'ruby', fmt))
+      html.css("#line-#{line_number}").add_class('hll')
+      line = code[line_number.to_s]
+      if line.length > 1
+        html.css("#line-#{line_number}").attr('data-highlight-start', line[0].length).attr('data-highlight-length', line[1].length)
+      end
+      html.to_html
+    end
+
+    def series_for(name:, aggregate_using:, time_range: nil, downsample: 120,  **opts)
+      series = RailsObservatory::TimeSeries.where(name:, **opts).downsample(downsample, using: aggregate_using)
+      series = series.slice(time_range) if time_range
+      series
+    end
+
+    def series_value(name:, aggregate_using:)
+      series = series_for(name:, aggregate_using: aggregate_using, downsample: 1)
+      series.first&.value
+    end
+
+    def time_slice_start
+      @time_range.begin.to_i * 1000
+    end
+
+    def time_slice_end
+      time = @time_range.end.nil? ? Time.now.to_i : @time_range.end.to_i
+      time * 1000
+    end
+
+    def format_event_value(value)
+      if value.is_a?(Numeric)
+        value.round(2)
+      else
+        value
+      end
+    end
+
+    def pretty_backtrace_location(backtrace_line)
+      path, lineno, method = backtrace_line.split(':')
+      path = path.sub(Gem.paths.home, '')
+      # remove 'in ' from method name
+      method = method.match(/in `([^']+) (:?in .*)'/)
+      method = method[1] if method
+      tag.div(class: 'backtrace-line') do
+        tag.span(path, class: '_path') +
+          ' in ' +
+          tag.span(method, class: '_method') +
+          ' at line ' +
+          tag.span(lineno, class: '_lineno')
+
+      end
+    end
+
+    def preview_mail_path(message_id)
+      "/rails/mailers/delivered_mail/preview?message_id=#{message_id}"
+    end
+
+    # {"used_memory"=>"46573752",
+    #  "used_memory_human"=>"44.42M",
+    #  "used_memory_rss"=>"70778880",
+    #  "used_memory_rss_human"=>"67.50M",
+    #  "used_memory_peak"=>"49028032",
+    #  "used_memory_peak_human"=>"46.76M",
+    #  "used_memory_peak_perc"=>"94.99%",
+    #  "used_memory_overhead"=>"2195208",
+    #  "used_memory_startup"=>"1118008",
+    #  "used_memory_dataset"=>"44378544",
+    #  "used_memory_dataset_perc"=>"97.63%",
+    #  "allocator_allocated"=>"46540912",
+    #  "allocator_active"=>"70693888",
+    #  "allocator_resident"=>"70693888",
+    #  "total_system_memory"=>"8225423360",
+    #  "total_system_memory_human"=>"7.66G",
+    #  "used_memory_lua"=>"84992",
+    #  "used_memory_lua_human"=>"83.00K",
+    #  "used_memory_scripts"=>"4768",
+    #  "used_memory_scripts_human"=>"4.66K",
+    #  "number_of_cached_scripts"=>"2",
+    #  "maxmemory"=>"0",
+    #  "maxmemory_human"=>"0B",
+    #  "maxmemory_policy"=>"noeviction",
+    #  "allocator_frag_ratio"=>"1.52",
+    #  "allocator_frag_bytes"=>"24152976",
+    #  "allocator_rss_ratio"=>"1.00",
+    #  "allocator_rss_bytes"=>"0",
+    #  "rss_overhead_ratio"=>"1.00",
+    #  "rss_overhead_bytes"=>"84992",
+    #  "mem_fragmentation_ratio"=>"1.52",
+    #  "mem_fragmentation_bytes"=>"24237968",
+    #  "mem_not_counted_for_evict"=>"0",
+    #  "mem_replication_backlog"=>"0",
+    #  "mem_clients_slaves"=>"0",
+    #  "mem_clients_normal"=>"51176",
+    #  "mem_aof_buffer"=>"0",
+    #  "mem_allocator"=>"libc",
+    #  "active_defrag_running"=>"0",
+    #  "lazyfree_pending_objects"=>"0",
+    #  "lazyfreed_objects"=>"0"}
+    def redis_mem_info
+      @info ||= Rails.configuration.rails_observatory.redis.call('info', 'memory').split("\r\n").slice(1..).map { _1.split(":") }.to_h
+    end
+  end
+end

data/app/jobs/rails_observatory/application_job.rb

@@ -0,0 +1,4 @@
+module RailsObservatory
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/rails_observatory/application_mailer.rb

@@ -0,0 +1,6 @@
+module RailsObservatory
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/views/layouts/rails_observatory/application.html.erb

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Rails Observatory</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <link rel="preload" href="<%= "#{root_path}assets/stylesheets/application.css" %>" as="style">
+  <link rel="stylesheet" href="<%= "#{root_path}assets/stylesheets/application.css" %>">
+  <script type="text/javascript" src="<%= "#{root_path}assets/js/application.js" %>"></script>
+
+  <style>
+    <%= Rouge::Theme.find('github.dark').render %>
+  </style>
+</head>
+<body class="layout-app">
+<nav class="side-nav layout-app-side-nav">
+  <img height="36" src="<%= "#{root_path}assets/logo_with_text.svg" %>" alt="RailsObservatory">
+  <ul>
+    <li><%= link_to root_path, class: "#{'_active' if request.path == root_path || request.path =~ /requests/}" do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" />
+        </svg>
+        Requests
+      <% end %></li>
+    <li><%= link_to jobs_path, class: "#{'_active' if request.path =~ /jobs/}" do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
+        </svg>
+        Jobs
+      <% end %></li>
+    <li><%= link_to mailers_path, class: "#{'_active' if request.path =~ /mailers/}" do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+        </svg>
+
+        Mailers
+      <% end %></li>
+    <li><%= link_to errors_path, class: "#{'_active' if request.path =~ /errors/}" do %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082" />
+        </svg>
+        Errors
+      <% end %></li>
+  </ul>
+  <div class="_redis-stats">
+    <strong>Redis</strong> <%= redis_mem_info['used_memory_human'] %> /
+    <%= redis_mem_info['used_memory_rss_human'] %>
+  </div>
+</nav>
+<nav class="top-nav">
+  <span>
+    <h1>
+      <span class="_subtitle">
+        <% if content_for? :subtitle %><%= yield :subtitle %>
+        <% end %>
+      </span>
+      <%= yield :title %>
+    </h1>
+  </span>
+  <%= yield :top_nav %>
+  <% unless content_for?(:hide_duration) %>
+    <div class="dropdown">
+      <button class="secondary">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" height="20">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <span>Past <%= duration.inspect %></span>
+        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" height="20">
+          <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
+        </svg>
+      </button>
+
+      <ul>
+        <% [5.minutes, 10.minutes, 15.minutes, 30.minutes, 1.hour, 4.hours, 1.day, 2.days, 7.days, 1.month].each do |time_frame| %>
+          <li>
+            <a href="?duration=<%= time_frame %>" class="<%= 'active' if time_frame == duration %>">
+              <span>Past <%= time_frame.inspect %></span>
+              <svg height="18" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+            </a>
+          </li>
+        <% end %>
+
+      </ul>
+    </div>
+  <% end %>
+</nav>
+<main class="<%= yield :main_css_class %>">
+  <%= yield %>
+</main>
+</body>
+</html>

data/app/views/new_user_mailer/greeting.html.erb

@@ -0,0 +1 @@
+Greetings!

data/app/views/posts/index.html.erb

@@ -0,0 +1 @@
+Posts

data/app/views/rails_observatory/application/_chart.html.erb

@@ -0,0 +1,23 @@
+<% series = local_assigns[:series] %>
+
+<div id="<%= rand(100) %>"
+     class="chart"
+     data-controller="chart"
+     data-chart-name="<%= local_assigns[:name] %>"
+     data-chart-type-value="<%= local_assigns[:type] %>"
+     <% unless local_assigns[:autobound] %>
+     data-chart-start-x-value="<%= series.first&.start_time_ms %>"
+     data-chart-end-x-value="<%= series.first&.end_time_ms %>"
+     <% end %>
+>
+  <% if local_assigns[:series] %>
+    <div data-chart-target="chart"></div>
+    <% local_assigns[:series].each do |series| %>
+      <% name = series.respond_to?(:name) ? series.name : series[:name] %>
+      <% data = series.respond_to?(:filled_data) ? series.filled_data : series[:data] %>
+      <script type="application/json" data-chart-target="data" data-series-name="<%= name.split('/').last %>">
+        <%== data.to_json %>
+      </script>
+    <% end %>
+  <% end %>
+</div>

data/app/views/rails_observatory/application/_events_table.html.erb

@@ -0,0 +1,24 @@
+<div class="query-table --scrollable" style="--column-count: <%= fields.size %>">
+  <header>
+    <% fields.each do |f| %>
+      <div class="query-table-column"><%= f.to_s.humanize(capitalize: true, keep_id_suffix: true) %></div>
+    <% end %>
+  </header>
+  <div class="query-table-body --scrollable">
+    <% events.each do |e| %>
+      <div class="query-table-row">
+        <% fields.each do |f| %>
+          <% if (formatter = local_assigns[:formatters]&.fetch(f, nil)) %>
+            <% if formatter.arity == 2 %>
+              <div class="query-table-column"><%= formatter.call(e.respond_to?(f) ? e.send(f) : 'unknownattribute', e) %></div>
+            <% else %>
+              <div class="query-table-column"><%= formatter.call(e.respond_to?(f) ? e.send(f) : 'unknownattribute') %></div>
+            <% end %>
+          <% else %>
+            <div class="query-table-column"><%= format_event_value(e.respond_to?(f) ? e.send(f) : 'unknownattribute') %></div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/rails_observatory/application/_sparkline.html.erb

@@ -0,0 +1,17 @@
+<% series = Array.wrap(local_assigns[:series]) %>
+<div id="<%= rand(100) %>"
+     class="_chart"
+     data-controller="sparkline"
+     data-sparkline-name="<%= local_assigns[:name] %>"
+     data-sparkline-type-value="<%= local_assigns[:type] %>"
+     data-sparkline-start-x-value="<%= series.first.start_time.to_i.in_milliseconds %>"
+     data-sparkline-end-x-value="<%= series.first.end_time.to_i.in_milliseconds %>">
+  <% if series.any? %>
+    <div data-sparkline-target="chart"></div>
+    <% series.each do |series| %>
+      <script type="application/json" data-sparkline-target="data" data-series-name="<%= series.name.split('/').last %>">
+        <%== series.filled_data.map { |(ts, v)| v.to_i == 0 ? [ts, 0] : [ts,v.to_i]}.to_json %>
+      </script>
+    <% end %>
+  <% end %>
+</div>

data/app/views/rails_observatory/application/_trace.html.erb

@@ -0,0 +1,122 @@
+<%= render 'chart', type: 'icicle', series: @events.to_series, autobound: true %>
+
+<div class="tabs layout-events-breakdown-details">
+  <nav class="tabs-nav --sticky">
+    <label class="tabs-button">
+      Event Details
+      <input type="radio" name="tabs" checked>
+    </label>
+    <label class="tabs-button">
+      Logs
+      <input type="radio" name="tabs">
+    </label>
+    <label class="tabs-button">
+      Mail
+      <% if  model.mail_events.size > 0 %>
+      <span style="color: var(--black-secondary)"><%= model.mail_events.size %></span>
+      <% end %>
+      <input type="radio" name="tabs">
+    </label>
+    <label class="tabs-button">
+      Jobs
+      <input type="radio" name="tabs">
+    </label>
+    <label class="tabs-button">
+      Errors
+      <input type="radio" name="tabs">
+    </label>
+  </nav>
+  <div class="tab-content event-details" data-controller="event-details" data-action="chart:selected@window->event-details#show">
+    <% @events.each_with_index do |e, index| %>
+      <div class="event-detail" id="<%= e['start_at'] %>" <%= 'hidden' unless index.zero? %> style="padding-inline: 2rem;">
+        <div>
+          <h3><%= e['name'] %> (<%= e['self_time'].to_f.round(2) %>ms)</h3>
+          <span style="color: var(--black-secondary)">Event spanned from <%= e['relative_start_at'].round(2) %>ms
+            to <%= e['relative_end_at'].round(2) %>ms
+            with a total duration of <%= e['duration'].round(2) %>ms
+          </span>
+        </div>
+        <% if e['middleware_stack'].present? %>
+          <div class="table-bar-chart">
+            <div class="table-bar-header">Middleware Stack</div>
+            <% total_time = e['self_time'] %>
+
+            <% e['middleware_stack'].each do |middleware_event| %>
+              <div class="table-bar-row">
+                <% percent = middleware_event['self_time'] / total_time * 100 %>
+                <div class="bar" style="width: <%= percent.round(1) %>%"></div>
+                <%= middleware_event['payload']['middleware'] %>
+                <div> <%= middleware_event['self_time'].to_f.round(2) %>ms</div>
+                <div style="color: var(--black-secondary);white-space: nowrap">(<%= percent.round(1) %>% of total)</div>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <dl style="">
+            <dt>Payload</dt>
+            <% if e['payload'].empty? %>
+              <dd>Nothing in payload</dd>
+            <% else %>
+              <dd class="highlight">
+                <pre class="--scrollable"><%== Rouge.highlight(e['payload'].to_yaml, 'yaml', Rouge::Formatters::HTMLLinewise.new(Rouge::Formatters::HTML.new, class: 'line')) %></pre>
+                <!--              <pre style="width:100%;overflow: auto;"><%#== Rouge.highlight(JSON.pretty_generate(e['payload']) , 'json', 'html') %></pre>-->
+              </dd>
+            <% end %>
+
+          </dl>
+        <% end %>
+
+      </div>
+    <% end %>
+  </div>
+  <div class="tab-content logs">
+    <log-lines style="display:grid;grid-template-columns: min-content min-content 1fr; gap:1rem;padding-block: 1rem;">
+      <% model.logs.each do |log| %>
+        <log-line style="display: grid; padding-inline: 2rem; grid-template-columns: subgrid;grid-column: 1/-1;">
+          <time style="white-space: nowrap"><%= Time.at(log['time']) %></time>
+          <log-level><%= log['severity'] %></log-level>
+          <log-message><%= log['message'] %></log-message>
+        </log-line>
+      <% end %>
+    </log-lines>
+  </div>
+  <div class="tab-content mail">
+    <simple-list class="simple-list">
+      <% if model.mail_events.empty? %>
+        <li>No mail enqueued or delivered</li>
+      <% end %>
+      <% model.mail_events.each do |e| %>
+        <li>
+          Mail Delivery <%= e.dig('payload', 'mailer') %>
+          <div>To: <%= e.dig('payload', 'to') %></div>
+          <div>From: <%= e.dig('payload', 'from') %></div>
+          <div>Subject: <%= e.dig('payload', 'subject') %></div>
+          <a href="<%= preview_mail_path(e.dig('payload', 'message_id')) %>" target="_blank">View Email</a>
+        </li>
+      <% end %>
+    </simple-list>
+  </div>
+  <div class="tab-content jobs">
+    <ul class="simple-list">
+      <% if model.events.only('enqueue.active_job').to_a.empty? %>
+        <li>No jobs were enqueued</li>
+      <% end %>
+      <% model.events.only('enqueue.active_job').each do |event| %>
+        <li>
+          <div class="simple-list-title"><%= event.dig('payload', 'job', 'class') %></div>
+          <div>
+            Enqueued job (
+            <span><%= link_to event.dig('payload', 'job', 'job_id').slice(0...8), job_path(event.dig('payload', 'job', 'job_id')) %></span>
+            ) to
+            <span><%= event.dig('payload', 'job', 'queue_name') %></span>
+            queue at
+            <span><%= event['start_at'] %></span>
+          </div>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+  <div class="tab-content errors">
+    errors
+  </div>
+</div>

data/app/views/rails_observatory/errors/index.html.erb

@@ -0,0 +1,87 @@
+<% content_for(:title, 'Errors') %>
+<% content_for(:hide_duration, 'true') %>
+
+
+<style>
+  @scope {
+    :scope {
+      display: flex;
+      flex-direction: column;
+      gap: 0rem;
+      padding: 0;
+    }
+  }
+
+  .error {
+    padding: 1.5rem 2rem;
+    border-bottom: 1px solid var(--divider);
+    display: grid;
+    grid-template-areas:
+      'name-and-location graph count'
+      'message graph count'
+      'time graph count';
+    grid-template-columns: minmax(14rem, 1fr) 200px minmax(min-content, 4rem);
+    column-gap: 1rem;
+    row-gap: .3rem;
+
+    ._name-and-location {
+      display: flex;
+      gap: 1rem;
+      align-items: baseline;
+      overflow: hidden;
+
+
+      & > :first-child {
+        font-size: 1.25rem;
+        font-weight: 400;
+      }
+
+      & > :last-child {
+        color: var(--black-secondary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+
+    ._message {
+      grid-area: message;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    ._count {
+      grid-area: count;
+      text-align: center;
+      font-size: 1.5rem;
+      font-weight: 400;
+      align-self: center;
+    }
+
+    ._graph {
+      grid-area: graph;
+      text-align: right;
+      align-items: center;
+    }
+
+  }
+</style>
+
+<% @errors.each do |e| %>
+  <div class="error">
+    <div class="_name-and-location">
+      <a href="<%= error_path(e.fingerprint) %>"><%= e.class_name %></a>
+      <span><%= e.location.classify %></span>
+    </div>
+    <div class="_message"><%= e.message %></div>
+    <div class="_time"><%= time_ago_in_words(Time.at(e.time)) %> ago</div>
+
+    <div class="_graph">
+      <% if @series_by_fingerprint[e.fingerprint] %>
+        <%= render "sparkline", type: "bar", series: @series_by_fingerprint[e.fingerprint] %>
+      <% end %>
+    </div>
+    <div class="_count"><%= @count_by_fingerprint[e.fingerprint] %><%# e.count %></div>
+  </div>
+<% end %>