Replace NewRelic browser instrumentation with custom error handler

app/controllers/frontend_log_controller.rb

@@ -11,6 +11,7 @@ class FrontendLogController < ApplicationController
   # Please try to keep this list alphabetical as well!
   # rubocop:disable Layout/LineLength
   EVENT_MAP = {
+    'Frontend Error' => FrontendErrorLogger.method(:track_error),
     'IdV: consent checkbox toggled' => :idv_consent_checkbox_toggled,
     'IdV: download personal key' => :idv_personal_key_downloaded,
     'IdV: location submitted' => :idv_in_person_location_submitted,
@@ -30,7 +31,7 @@ class FrontendLogController < ApplicationController
     'Sign In: IdV requirements accordion clicked' => :sign_in_idv_requirements_accordion_clicked,
     'User prompted before navigation' => :user_prompted_before_navigation,
     'User prompted before navigation and still on page' => :user_prompted_before_navigation_and_still_on_page,
-  }.transform_values { |method| AnalyticsEvents.instance_method(method) }.freeze
+  }.freeze
   # rubocop:enable Layout/LineLength
 
   def create

app/helpers/script_helper.rb

@@ -19,11 +19,11 @@ def javascript_packs_tag_once(*names, prepend: false)
   alias_method :enqueue_component_scripts, :javascript_packs_tag_once
 
   def render_javascript_pack_once_tags(*names)
-    javascript_packs_tag_once(*names) if names.present?
-    if @scripts && (sources = AssetSources.get_sources(*@scripts)).present?
+    names = names.presence || @scripts
+    if names && (sources = AssetSources.get_sources(*names)).present?
       safe_join(
         [
-          javascript_assets_tag(*@scripts),
+          javascript_assets_tag(*names),
           *sources.map do |source|
             javascript_include_tag(
               source,

app/javascript/packages/analytics/index.spec.ts

@@ -1,5 +1,5 @@
 import { trackEvent, trackError } from '@18f/identity-analytics';
-import { usePropertyValue, useSandbox } from '@18f/identity-test-helpers';
+import { useSandbox } from '@18f/identity-test-helpers';
 import type { SinonStub } from 'sinon';
 
 describe('trackEvent', () => {
@@ -84,20 +84,28 @@ describe('trackEvent', () => {
 });
 
 describe('trackError', () => {
-  it('is a noop', () => {
-    trackError(new Error('Oops!'));
+  const sandbox = useSandbox();
+  const endpoint = '/log';
+
+  beforeEach(() => {
+    sandbox.stub(global.navigator, 'sendBeacon').returns(true);
+    document.body.innerHTML = `<script type="application/json" data-config>{"analyticsEndpoint":"${endpoint}"}</script>`;
   });
 
-  context('with newrelic agent present', () => {
-    const sandbox = useSandbox();
-    const noticeError = sandbox.stub();
-    usePropertyValue(globalThis as any, 'newrelic', { noticeError });
+  it('tracks event', async () => {
+    trackError(new Error('Oops!'));
 
-    it('notices error in newrelic', () => {
-      const error = new Error('Oops!');
-      trackError(error);
+    expect(global.navigator.sendBeacon).to.have.been.calledOnce();
 
-      expect(noticeError).to.have.been.calledWith(error);
-    });
+    const [actualEndpoint, data] = (global.navigator.sendBeacon as SinonStub).firstCall.args;
+    expect(actualEndpoint).to.eql(endpoint);
+
+    const { event, payload } = JSON.parse(await data.text());
+    const { name, message, stack } = payload;
+
+    expect(event).to.equal('Frontend Error');
+    expect(name).to.equal('Error');
+    expect(message).to.equal('Oops!');
+    expect(stack).to.be.a('string');
   });
 });

app/javascript/packages/analytics/index.ts

@@ -1,11 +1,6 @@
-import type { noticeError } from 'newrelic';
 import { getConfigValue } from '@18f/identity-config';
 
-type NewRelicAgent = { noticeError: typeof noticeError };
-
-interface NewRelicGlobals {
-  newrelic?: NewRelicAgent;
-}
+export { default as isTrackableErrorEvent } from './is-trackable-error-event';
 
 /**
  * Logs an event.
@@ -30,6 +25,5 @@ export function trackEvent(event: string, payload?: object) {
  *
  * @param error Error object.
  */
-export function trackError(error: Error) {
-  (globalThis as typeof globalThis & NewRelicGlobals).newrelic?.noticeError(error);
-}
+export const trackError = ({ name, message, stack }: Error) =>
+  trackEvent('Frontend Error', { name, message, stack });

app/javascript/packages/analytics/is-trackable-error-event.spec.ts

@@ -0,0 +1,37 @@
+import isTrackableErrorEvent from './is-trackable-error-event';
+
+describe('isTrackableErrorEvent', () => {
+  context('with filename not present on event', () => {
+    const event = new ErrorEvent('error');
+
+    it('returns false', () => {
+      expect(isTrackableErrorEvent(event)).to.be.false();
+    });
+  });
+
+  context('with filename as an invalid url', () => {
+    const event = new ErrorEvent('error', { filename: '.' });
+
+    it('returns false', () => {
+      expect(isTrackableErrorEvent(event)).to.be.false();
+    });
+  });
+
+  context('with filename from a different host', () => {
+    const event = new ErrorEvent('error', { filename: 'http://different.example.com/foo.js' });
+
+    it('returns false', () => {
+      expect(isTrackableErrorEvent(event)).to.be.false();
+    });
+  });
+
+  context('with filename from the same host', () => {
+    const event = new ErrorEvent('error', {
+      filename: new URL('foo.js', window.location.origin).toString(),
+    });
+
+    it('returns true', () => {
+      expect(isTrackableErrorEvent(event)).to.be.true();
+    });
+  });
+});

app/javascript/packages/analytics/is-trackable-error-event.ts

@@ -0,0 +1,9 @@
+function isTrackableErrorEvent(event: ErrorEvent): boolean {
+  try {
+    return new URL(event.filename).host === window.location.host;
+  } catch {
+    return false;
+  }
+}
+
+export default isTrackableErrorEvent;

app/javascript/packs/track-errors.ts

@@ -0,0 +1,14 @@
+import { trackError, isTrackableErrorEvent } from '@18f/identity-analytics';
+
+export interface WindowWithInitialErrors extends Window {
+  _e: ErrorEvent[];
+}
+
+declare let window: WindowWithInitialErrors;
+
+const { _e: initialErrors } = window;
+
+const handleErrorEvent = (event: ErrorEvent) =>
+  isTrackableErrorEvent(event) && trackError(event.error);
+initialErrors.forEach(handleErrorEvent);
+window.addEventListener('error', handleErrorEvent);

app/services/analytics_events.rb

@@ -573,6 +573,14 @@ def fraud_review_rejected(
     )
   end
 
+  # An uncaught error occurred in frontend JavaScript
+  # @param [String] name
+  # @param [String] message
+  # @param [String] stack
+  def frontend_error(name:, message:, stack: nil, **extra)
+    track_event('Frontend Error', name:, message:, stack:, **extra)
+  end
+
   # @param [Boolean] success
   # @param [Boolean] address_edited
   # @param [Hash] pii_like_keypaths

app/services/frontend_error_logger.rb

@@ -0,0 +1,11 @@
+class FrontendErrorLogger
+  class FrontendError < StandardError; end
+
+  def self.track_error(name:, message:, stack:)
+    NewRelic::Agent.notice_error(
+      FrontendError.new,
+      expected: true,
+      custom_params: { frontend_error: { name:, message:, stack: } },
+    )
+  end
+end

app/services/frontend_logger.rb

@@ -1,27 +1,45 @@
 class FrontendLogger
   attr_reader :analytics, :event_map
 
+  # @param [Analytics] analytics
+  # @param [Hash{String=>Symbol,#call}] event_map map of string event names to method names
+  #   on Analytics, or a custom implementation that's callable (like a Proc or Method)
   def initialize(analytics:, event_map:)
     @analytics = analytics
     @event_map = event_map
   end
 
+  # Logs an event and converts the payload to the correct keyword args
+  # @param [String] name
+  # @param [Hash<String,Object>] attributes payload with string keys
   def track_event(name, attributes)
-    if (analytics_method = event_map[name])
-      analytics.send(analytics_method.name, **hash_from_method_kwargs(attributes, analytics_method))
+    analytics_method = event_map[name]
+
+    if analytics_method.is_a?(Symbol)
+      analytics.send(
+        analytics_method,
+        **hash_from_kwargs(attributes, AnalyticsEvents.instance_method(analytics_method)),
+      )
+    elsif analytics_method.respond_to?(:call)
+      analytics_method.call(**hash_from_kwargs(attributes, analytics_method))
     else
       analytics.track_event("Frontend: #{name}", attributes)
     end
   end
 
   private
 
-  def hash_from_method_kwargs(hash, method)
-    method_kwargs(method).index_with { |key| hash[key.to_s] }
+  # @param [Hash<String,Object>] hash
+  # @param [Proc,Method] callable
+  # @return [Hash<Symbol,Object>]
+  def hash_from_kwargs(hash, callable)
+    kwargs(callable).index_with { |key| hash[key.to_s] }
   end
 
-  def method_kwargs(method)
-    method.
+  # @param [Proc,Method] callable
+  # @return [Array<Symbol>] the names of the kwargs for the callable (both optional and required)
+  def kwargs(callable)
+    callable.
       parameters.
       map { |type, name| name if [:key, :keyreq].include?(type) }.
       compact

app/views/layouts/base.html.erb

@@ -55,8 +55,9 @@
       ) %>
   <meta content="#ffffff" name="theme-color" />
 
-  <% if BrowserSupport.supported?(request.user_agent) && IdentityConfig.store.newrelic_browser_key.present? && IdentityConfig.store.newrelic_browser_app_id.present? %>
-    <%= render 'shared/newrelic/browser_instrumentation' %>
+  <%# Prelude script for error tracking (see `track-errors`) %>
+  <%= javascript_tag(nonce: true) do %>
+    _e=[],addEventListener("error",(e)=>_e.push(e));
   <% end %>
 
   <%= yield(:head) if content_for?(:head) %>
@@ -109,6 +110,7 @@
         false,
       ) %>
   <%= javascript_packs_tag_once('application', prepend: true) %>
+  <%= javascript_packs_tag_once('track-errors') if BrowserSupport.supported?(request.user_agent) %>
   <%= render_javascript_pack_once_tags %>
 
   <%= render 'shared/dap_analytics' if IdentityConfig.store.participate_in_dap && !session_with_trust? %>