Chore: Fix and improve error reporting

Because: - Browser errors were not being reported - Sentry has new performance profiling features we are This commit: - Load sentry browser from a CDN so it is loaded and available to report any errors before the rest of our JS - Adds a revision initializer so we can attach the specific release to Sentry errors. - Enable profile for the Sentry Ruby SDK.
TheOdinProject · Aug 10, 2024 · d72a890 · d72a890
1 parent de0b832
commit d72a890
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 134 deletions.
diff --git a/Gemfile b/Gemfile
@@ -46,6 +46,7 @@ gem 'sentry-ruby', '~> 5.17'
 gem 'sentry-sidekiq', '~> 5.18'
 gem 'sidekiq', '~> 7.2'
 gem 'sidekiq-cron', '~> 1.12'
+gem 'stackprof', '~> 0.2'
 gem 'stimulus-rails', '~> 1.3'
 gem 'turbo-rails', '~> 2.0'
 gem 'view_component', '~> 3.12'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -522,6 +522,7 @@ GEM
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
+    stackprof (0.2.26)
     statsd-ruby (1.5.0)
     stimulus-rails (1.3.3)
       railties (>= 6.0.0)
@@ -635,6 +636,7 @@ DEPENDENCIES
   sidekiq (~> 7.2)
   sidekiq-cron (~> 1.12)
   simplecov (~> 0.22)
+  stackprof (~> 0.2)
   stimulus-rails (~> 1.3)
   turbo-rails (~> 2.0)
   vcr (~> 6.2)

diff --git a/app/javascript/error_tracking.js b/app/javascript/error_tracking.js
diff --git a/app/javascript/main.js b/app/javascript/main.js
@@ -1,3 +1,4 @@
+import './src/sentry';
 import './controllers';
 import '@hotwired/turbo-rails';
 import './src/custom_turbo_stream_actions';
diff --git a/app/javascript/src/sentry.js b/app/javascript/src/sentry.js
@@ -0,0 +1,21 @@
+/* eslint-disable no-undef, no-unused-expressions */
+
+const {
+  SENTRY_DSN, currentUserSignedIn, currentUserId, currentUsername,
+} = window;
+
+window.Sentry = window.Sentry || {};
+window.Sentry && Sentry.onLoad && Sentry.onLoad(() => {
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    environment: 'production',
+    debug: true,
+  });
+
+  if (currentUserSignedIn) {
+    Sentry.setUser({
+      id: currentUserId,
+      name: currentUsername,
+    });
+  }
+});
diff --git a/app/views/layouts/_error_tracking.html.erb b/app/views/layouts/_error_tracking.html.erb
diff --git a/app/views/layouts/admin/base.html.erb b/app/views/layouts/admin/base.html.erb
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" id="root-element" class="<%= current_theme.name %> h-full">
   <head>
-    <% content_for :error_tracking do %>
-      <%= render 'layouts/error_tracking' %>
-    <% end %>
     <title>
       <%= content_for(:title) || 'Admin | The Odin Project' %>
     </title>
@@ -26,8 +23,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
-    <%= stylesheet_link_tag 'application', 'main', media: 'all', 'data-turbo-track': 'reload' %>
-    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', defer: true %>
+    <%= stylesheet_link_tag 'application', 'main', media: 'all', data: { turbo_track: 'reload' } %>
+    <%= render 'shared/sentry' %>
+    <%= javascript_include_tag 'main', defer: true, data: { turbo_track: 'reload' } %>
   </head>
 
   <body class="h-full bg-white text-gray-600 dark:bg-gray-900 dark:text-gray-300">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" id="root-element" class="<%= current_theme.name %>">
   <head>
-    <% content_for :error_tracking do %>
-      <%= render 'layouts/error_tracking' %>
-    <% end %>
     <title>
       <%= content_for(:title) || 'Your Career in Web Development Starts Here | The Odin Project' %>
     </title>
@@ -24,9 +21,10 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
-    <%= stylesheet_link_tag 'application', 'main', media: 'all', 'data-turbo-track': 'reload' %>
+    <%= stylesheet_link_tag 'application', 'main', media: 'all', data: { turbo_track: 'reload' } %>
+    <%= render 'shared/sentry' %>
     <%= render 'shared/analytics' %>
-    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', type: 'module' %>
+    <%= javascript_include_tag 'main', defer: true, data: { turbo_track: 'reload' } %>
   </head>
 
   <body class="h-full bg-gray-50 text-gray-600 dark:bg-gray-900 dark:text-gray-300">

diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb
@@ -5,8 +5,8 @@
       Component Previews
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <%= stylesheet_link_tag 'application', 'main' media: 'all', 'data-turbo-track': 'reload' %>
-    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', defer: true %>
+    <%= stylesheet_link_tag 'application', 'main', media: 'all', data: { turbo_track: 'reload' } %>
+    <%= javascript_include_tag 'main', defer: true, data: { turbo_track: 'reload' } %>
   </head>
   <body style="padding: 20px">
     <div style="

diff --git a/app/views/layouts/errors.html.erb b/app/views/layouts/errors.html.erb
@@ -5,8 +5,11 @@
       <%= content_for(:title) || 'Your Career in Web Development Starts Here | The Odin Project' %>
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <%= stylesheet_link_tag 'application', 'main', media: 'all', 'data-turbo-track': 'reload' %>
-    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', defer: true %>
+
+    <%= stylesheet_link_tag 'application', 'main', media: 'all', data: { turbo_track: 'reload' } %>
+    <%= render 'shared/sentry' %>
+    <%= render 'shared/analytics' %>
+    <%= javascript_include_tag 'main', defer: true, data: { turbo_track: 'reload' } %>
   </head>
   <body class="text-center h-screen m-0">
     <main class="grid place-items-center min-h-screen">

diff --git a/app/views/shared/_sentry.html.erb b/app/views/shared/_sentry.html.erb
@@ -0,0 +1,13 @@
+<% if Rails.env.production? %>
+  <script src="https://js.sentry-cdn.com/88c85c7e3b5b4548a663b61da9beea2a.min.js" crossorigin="anonymous"></script>
+
+  <script type='text/javascript'>
+    window.SENTRY_DSN = "<%= ENV['SENTRY_DSN'] %>"
+    window.currentUserSignedIn = "<%= user_signed_in? %>"
+
+    <% if defined?(current_user) && current_user.present? %>
+      window.currentUserId = "<%= current_user.id %>"
+      window.currentUserName = "<%= current_user.username %>"
+    <% end %>
+  </script>
+<% end %>
diff --git a/config/initializers/sentry.rb b/config/initializers/sentry.rb
@@ -1,13 +1,18 @@
 Sentry.init do |config|
   config.dsn = ENV['SENTRY_DSN']
-  config.breadcrumbs_logger = [:active_support_logger]
-
   config.enabled_environments = %w[production]
+  config.breadcrumbs_logger = %i[active_support_logger http_logger]
+  config.send_default_pii = true
+
+  # enable tracing
+  config.traces_sample_rate = 0.1
+
+  # enable profiling
+  # this is relative to traces_sample_rate
+  config.profiles_sample_rate = 1.0
 
   filter = ActiveSupport::ParameterFilter.new(Rails.application.config.filter_parameters)
   config.before_send = lambda { |event, _|
     filter.filter(event.to_hash)
   }
-
-  config.send_default_pii = true
 end
diff --git a/package.json b/package.json
@@ -11,7 +11,6 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.2",
     "@rails/request.js": "^0.0.9",
-    "@sentry/browser": "^7.108.0",
     "@stimulus/polyfills": "^2.0.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",

diff --git a/yarn.lock b/yarn.lock