Merge pull request #1389 from dpc-sdp/feature/SD-387-new-relic-browser

[SD-387] Added newrelic browser agent
dpc-sdp · Dec 8, 2024 · 0b60550 · 0b60550
2 parents 461d51d + 22c1893
commit 0b60550
Show file tree

Hide file tree

Showing 17 changed files with 218 additions and 9 deletions.
diff --git a/packages/nuxt-ripple-analytics/app.config.ts b/packages/nuxt-ripple-analytics/app.config.ts
@@ -15,6 +15,13 @@ export default defineAppConfig({
   ripple: {
     analytics: {
       eventListeners
+    },
+    featureFlags: {
+      newRelicBrowserBeacon: 'bam.nr-data.net',
+      newRelicBrowserJSErrorsEnabled: true,
+      newRelicBrowserCookiesEnabled: false,
+      newRelicBrowserDistributedTracingEnabled: false,
+      newRelicBrowserAjaxDenyList: ['bam.nr-data.net']
     }
   }
 })
diff --git a/packages/nuxt-ripple-analytics/composables/useNewRelicBrowserAgent.ts b/packages/nuxt-ripple-analytics/composables/useNewRelicBrowserAgent.ts
@@ -0,0 +1,63 @@
+import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
+
+export default () => {
+  const config = useRuntimeConfig()
+  const browserAgentConfig = config?.public?.newRelic?.browser
+
+  if (!browserAgentConfig.enabled) {
+    return
+  }
+
+  const featureFlags: IRplFeatureFlags = inject('featureFlags', {
+    newRelicBrowserBeacon: 'bam.nr-data.net',
+    newRelicBrowserJSErrorsEnabled: true,
+    newRelicBrowserCookiesEnabled: false,
+    newRelicBrowserDistributedTracingEnabled: false,
+    newRelicBrowserAjaxDenyList: ['bam.nr-data.net']
+  })
+
+  // Scripts from new relic need to be dynamically imported, otherwise they will throw an error
+  const initBrowserAgent = async () => {
+    // Error module has to be manually added when using new relic via npm
+    const { JSErrors } = await import(
+      '@newrelic/browser-agent/features/jserrors'
+    )
+
+    const options = {
+      info: {
+        beacon: featureFlags.newRelicBrowserBeacon,
+        licenseKey: browserAgentConfig.licenseKey,
+        applicationID: browserAgentConfig.applicationID,
+        sa: 1 // 'sa' stands for 'standalone' https://github.com/newrelic/newrelic-browser-agent/blob/bbf414c0d6a483141f32e2dd31b1f8a23ad1dda5/src/features/logging/aggregate/index.js#L100
+      },
+      init: {
+        distributed_tracing: {
+          enabled: featureFlags.newRelicBrowserDistributedTracingEnabled
+        },
+        privacy: {
+          cookies_enabled: featureFlags.newRelicBrowserCookiesEnabled
+        },
+        jserrors: { enabled: featureFlags.newRelicBrowserJSErrorsEnabled },
+        ajax: { deny_list: featureFlags.newRelicBrowserAjaxDenyList }
+      },
+      loader_config: {
+        accountID: browserAgentConfig.accountID,
+        trustKey: browserAgentConfig.trustKey,
+        agentID: browserAgentConfig.agentID,
+        licenseKey: browserAgentConfig.licenseKey,
+        applicationID: browserAgentConfig.applicationID
+      },
+      features: [JSErrors]
+    }
+
+    const { BrowserAgent } = await import(
+      '@newrelic/browser-agent/loaders/browser-agent'
+    )
+
+    new BrowserAgent(options)
+  }
+
+  if (process.client) {
+    initBrowserAgent()
+  }
+}
diff --git a/packages/nuxt-ripple-analytics/nuxt.config.ts b/packages/nuxt-ripple-analytics/nuxt.config.ts
@@ -7,6 +7,16 @@ export default defineNuxtConfig({
         analytics: {
           GTM: 'GTM-KF8NCW2'
         }
+      },
+      newRelic: {
+        browser: {
+          enabled: false,
+          accountID: '',
+          trustKey: '',
+          agentID: '',
+          licenseKey: '',
+          applicationID: ''
+        }
       }
     }
   }

diff --git a/packages/nuxt-ripple-analytics/package.json b/packages/nuxt-ripple-analytics/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@dpc-sdp/ripple-ui-core": "workspace:*",
-    "@gtm-support/core": "^2.0.0"
+    "@gtm-support/core": "^2.0.0",
+    "@newrelic/browser-agent": "^1.273.0"
   },
   "devDependencies": {
     "@dpc-sdp/nuxt-ripple": "workspace:*",

diff --git a/packages/nuxt-ripple-analytics/plugins/newRelicBrowser.ts b/packages/nuxt-ripple-analytics/plugins/newRelicBrowser.ts
@@ -0,0 +1,29 @@
+import { defineNuxtPlugin } from '#app'
+import trackError from '../utils/trackError'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  /* @ts-ignore process is extended by webpack */
+  if (process.client) {
+    nuxtApp.vueApp.use({
+      install(app: any) {
+        useNewRelicBrowserAgent()
+
+        const existingErrorHandler = app.config.errorHandler
+
+        // Catch all vue errors
+        app.config.errorHandler = (error: Error) => {
+          console.error(error)
+          trackError(error)
+
+          // Allow multiple error handlers to run
+          if (
+            existingErrorHandler &&
+            typeof existingErrorHandler === 'function'
+          ) {
+            existingErrorHandler(error)
+          }
+        }
+      }
+    })
+  }
+})
diff --git a/packages/nuxt-ripple-analytics/utils/trackError.ts b/packages/nuxt-ripple-analytics/utils/trackError.ts
@@ -0,0 +1,15 @@
+declare global {
+  interface Window {
+    newrelic?: {
+      noticeError: (error: any) => void
+    }
+  }
+}
+
+const trackError = (error: any) => {
+  if (window?.newrelic?.noticeError) {
+    window.newrelic.noticeError(error)
+  }
+}
+
+export default trackError
diff --git a/packages/nuxt-ripple/components/TideAlerts.vue b/packages/nuxt-ripple/components/TideAlerts.vue
@@ -71,6 +71,7 @@ const filteredAlerts = computed(() => {
       return !dismissedIds.includes(alert.alertId)
     })
   } catch (e) {
+    trackError(e)
     console.error(
       'Something went wrong when trying to get dismissed alerts cookie'
     )

diff --git a/packages/nuxt-ripple/composables/use-tide-error.ts b/packages/nuxt-ripple/composables/use-tide-error.ts
@@ -1,4 +1,7 @@
-export const useTideError = (statusCode: number): void => {
+export const useTideError = (
+  statusCode: number,
+  originalError?: Error
+): void => {
   if (statusCode) {
     switch (statusCode) {
       case 404:
@@ -28,6 +31,10 @@ export const useTideError = (statusCode: number): void => {
         break
 
       default:
+        if (originalError) {
+          trackError(originalError)
+        }
+
         throw createError({
           statusCode: 500,
           statusMessage: 'We have a glitch in our system.',

diff --git a/packages/nuxt-ripple/composables/use-tide-page.ts b/packages/nuxt-ripple/composables/use-tide-page.ts
@@ -151,7 +151,7 @@ export const useTidePage = async (
     }
 
     if (error && error.value?.statusCode) {
-      useTideError(error.value?.statusCode)
+      useTideError(error.value?.statusCode, error.value)
     }
 
     debugLogger('Page data fetched', {

diff --git a/packages/nuxt-ripple/composables/use-tide-site.ts b/packages/nuxt-ripple/composables/use-tide-site.ts
@@ -34,7 +34,7 @@ export const useTideSite = async (id?: number): Promise<TideSiteData> => {
     if (error && error.value?.statusCode) {
       console.log(error)
       console.log('API error fetching site data')
-      useTideError(500)
+      useTideError(500, error.value)
     }
 
     // Section.io cache tags must be set on the response header to invalidate the cache after a change in drupal

diff --git a/packages/ripple-tide-publication/composables/use-tide-publication-children.ts b/packages/ripple-tide-publication/composables/use-tide-publication-children.ts
@@ -23,7 +23,7 @@ export const useTidePublicationChildren = async (
       }
     })
     if (error && error.value?.statusCode) {
-      useTideError(error.value?.statusCode)
+      useTideError(error.value?.statusCode, error.value)
     }
     return data.value
   }

diff --git a/packages/ripple-tide-publication/composables/use-tide-publication-menu.ts b/packages/ripple-tide-publication/composables/use-tide-publication-menu.ts
@@ -15,7 +15,7 @@ export const useTidePublicationMenu = async (
       }
     })
     if (error && error.value?.statusCode) {
-      useTideError(error.value?.statusCode)
+      useTideError(error.value?.statusCode, error.value)
     }
     return data.value
   }

diff --git a/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue b/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue
@@ -155,6 +155,7 @@ const fetchSuggestions = async (query: string) => {
       props.mapResultsFnName
     )
   } catch (e) {
+    trackError(e)
     console.error(e)
   }
 }

diff --git a/packages/ripple-tide-search/composables/useTideSearch.ts b/packages/ripple-tide-search/composables/useTideSearch.ts
@@ -633,6 +633,7 @@ export default ({
         nextTick(onMapResultsHook.value)
       }
     } catch (error) {
+      trackError(error)
       console.error(error)
       searchError.value = error
     } finally {

diff --git a/packages/ripple-tide-webform/composables/use-webform-schema.ts b/packages/ripple-tide-webform/composables/use-webform-schema.ts
@@ -20,7 +20,7 @@ export const useWebformSchema = async (
       }
     })
     if (error && error.value?.statusCode) {
-      useTideError(error.value?.statusCode)
+      useTideError(error.value?.statusCode, error.value)
     }
     return data.value
   }

diff --git a/packages/ripple-tide-webform/composables/use-webform-submit.ts b/packages/ripple-tide-webform/composables/use-webform-submit.ts
@@ -110,6 +110,7 @@ export function useWebformSubmit(
         window
       )
     } catch (e) {
+      trackError(e)
       console.error(e)
 
       submissionState.value = {
@@ -144,6 +145,7 @@ export function useWebformSubmit(
         }
       }
     } catch (error) {
+      trackError(error)
       console.error(error)
 
       submissionState.value = {