raygun setup cleanup

packages/frontend-2/package.json

@@ -53,15 +53,13 @@
     "ioredis": "^5.3.2",
     "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21",
-    "logrocket": "^8.0.1",
     "mitt": "^3.0.0",
     "mixpanel-browser": "^2.45.0",
     "nanoid": "^3.0.0",
     "pino": "^8.14.1",
     "pino-http": "^8.3.3",
     "portal-vue": "^3.0.0",
     "raygun": "^0.13.2",
-    "raygun4js": "^3.0.1",
     "seq-logging": "^2.1.1",
     "subscriptions-transport-ws": "^0.11.0",
     "vee-validate": "^4.7.0",

packages/frontend-2/plugins/002-rum.ts

@@ -1,26 +1,34 @@
-import type { Plugin } from 'nuxt/dist/app/nuxt'
+import { trimStart } from 'lodash-es'
 import { useOnAuthStateChange } from '~/lib/auth/composables/auth'
 import { useCreateErrorLoggingTransport } from '~/lib/core/composables/error'
+import type { Plugin } from 'nuxt/dist/app/nuxt'
 
 type PluginNuxtApp = Parameters<Plugin>[0]
 
-async function initRumClient(app: PluginNuxtApp) {
+async function initRumClient() {
   const { enabled, keys, speckleServerVersion, baseUrl } = resolveInitParams()
-  const logger = useLogger()
-  const onAuthStateChange = useOnAuthStateChange()
   const router = useRouter()
+  const onAuthStateChange = useOnAuthStateChange()
   const registerErrorTransport = useCreateErrorLoggingTransport()
   if (!enabled) return
 
   // RayGun
-  if (keys.raygun) {
-    const rg4js = (await import('raygun4js')).default
+  const rg4js = window.rg4js
+  if (keys.raygun && rg4js) {
     rg4js('apiKey', keys.raygun)
     rg4js('enableCrashReporting', true)
     rg4js('enablePulse', true)
-    // rg4js('boot')
-    // rg4js('enableRum', true)
     rg4js('withTags', [`baseUrl:${baseUrl}`, `version:${speckleServerVersion}`])
+    rg4js('options', {
+      debugMode: !!process.dev
+    })
+
+    router.afterEach((to) => {
+      rg4js('trackEvent', {
+        type: 'pageView',
+        path: '/' + trimStart(to.path, '/')
+      })
+    })
 
     await onAuthStateChange(
       (user, { resolveDistinctId }) => {
@@ -58,63 +66,6 @@ async function initRumClient(app: PluginNuxtApp) {
       // }
     })
   }
-
-  // LogRocket
-  if (keys.logrocket) {
-    const logrocket = (await import('logrocket')).default
-    logrocket.init(keys.logrocket, {
-      release: speckleServerVersion,
-      console: {
-        isEnabled: false // Log manually, prevent console shim
-      }
-    })
-
-    await onAuthStateChange(
-      (user, { resolveDistinctId }) => {
-        const distinctId = resolveDistinctId(user)
-        logrocket.identify(distinctId || '')
-      },
-      { immediate: true }
-    )
-
-    registerErrorTransport({
-      onError: ({ firstError, firstString, otherData, nonObjectOtherData }) => {
-        const error = firstError || firstString || 'Unknown error'
-        logrocket.error(error, {
-          ...otherData,
-          extraData: nonObjectOtherData,
-          mainErrorMessage: firstString
-        })
-      }
-      // Unhandleds auto-tracked by LogRocket
-      // onUnhandledError
-    })
-  }
-
-  // Speedcurve
-  if (keys.speedcurve) {
-    // On page transition init, call LUX.init()
-    let pendingRouting = false
-    router.beforeEach((to, from) => {
-      if (to.fullPath !== from.fullPath) {
-        pendingRouting = true
-        window.LUX.init()
-        if (process.dev) logger.debug('RUM: LUX.init()')
-      }
-    })
-
-    app.hook('page:finish', () => {
-      // Unfortunately there's no accurate hook for handling the moment when the new page has fully mounted, title updated etc.
-      // So setTimeout it is, here we go ;(
-      setTimeout(() => {
-        if (pendingRouting) {
-          pendingRouting = false
-          window.LUX.send()
-          if (process.dev) logger.debug('RUM: LUX.send()')
-        }
-      }, 50)
-    })
-  }
 }
 
 async function initRumServer(app: PluginNuxtApp) {
@@ -141,36 +92,17 @@ async function initRumServer(app: PluginNuxtApp) {
         })
       }
     })
-  }
-
-  // Speedcurve - attach JS
-  if (keys.speedcurve) {
-    app.hook('app:rendered', (context) => {
-      context.ssrContext!.head.push({
-        script: [
-          {
-            innerHTML: `LUX=function(){function n(){return Date.now?Date.now():+new Date}var r,e=n(),t=window.performance||{},a=t.timing||{navigationStart:(null===(r=window.LUX)||void 0===r?void 0:r.ns)||e};function o(){return t.now?(r=t.now(),Math.floor(r)):n()-a.navigationStart;var r}(LUX=window.LUX||{}).ac=[],LUX.addData=function(n,r){return LUX.cmd(["addData",n,r])},LUX.cmd=function(n){return LUX.ac.push(n)},LUX.getDebug=function(){return[[e,0,[]]]},LUX.init=function(){return LUX.cmd(["init"])},LUX.mark=function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];if(t.mark)return t.mark.apply(t,n);var e=n[0],a=n[1]||{};void 0===a.startTime&&(a.startTime=o());LUX.cmd(["mark",e,a])},LUX.markLoadTime=function(){return LUX.cmd(["markLoadTime",o()])},LUX.measure=function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];if(t.measure)return t.measure.apply(t,n);var e,a=n[0],i=n[1],u=n[2];e="object"==typeof i?n[1]:{start:i,end:u};e.duration||e.end||(e.end=o());LUX.cmd(["measure",a,e])},LUX.send=function(){return LUX.cmd(["send"])},LUX.ns=e;var i=LUX;if(window.LUX_ae=[],window.addEventListener("error",(function(n){window.LUX_ae.push(n)})),window.LUX_al=[],"function"==typeof PerformanceObserver&&"function"==typeof PerformanceLongTaskTiming){var u=new PerformanceObserver((function(n){for(var r=n.getEntries(),e=0;e<r.length;e++)window.LUX_al.push(r[e])}));try{u.observe({type:"longtask"})}catch(n){}}return i}();`
-          },
-          {
-            src: `https://cdn.speedcurve.com/js/lux.js?id=${keys.speedcurve?.toString()}`,
-            async: true,
-            defer: true,
-            crossorigin: 'anonymous',
-            ...(process.dev ? { onload: 'LUX.forceSample()' } : {})
-          }
-        ]
-      })
-    })
-  }
 
-  // DebugBear - attach JS
-  if (keys.debugbear) {
+    // Add client-side snippet
     app.hook('app:rendered', (context) => {
       context.ssrContext!.head.push({
         script: [
           {
-            src: `https://cdn.debugbear.com/${keys.debugbear || ''}.js`,
-            async: true
+            innerHTML: `!function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
+  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
+  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
+  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
+  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");`
           }
         ]
       })
@@ -182,36 +114,28 @@ function resolveInitParams() {
   const {
     public: {
       raygunKey,
-      logrocketAppId,
       speckleServerVersion,
-      speedcurveId,
-      debugbearId,
+
       baseUrl
     }
   } = useRuntimeConfig()
   const raygun = raygunKey?.length ? raygunKey : null
-  const logrocket = logrocketAppId?.length ? logrocketAppId : null
-  const speedcurve = speedcurveId ? speedcurveId : null
-  const debugbear = debugbearId?.length ? debugbearId : null
-  const enabled = !!(raygun || logrocket || speedcurve || debugbear)
+  const enabled = !!raygun
 
   return {
     enabled,
     keys: {
-      raygun,
-      logrocket,
-      speedcurve,
-      debugbear
+      raygun
     },
     speckleServerVersion,
     baseUrl
   }
 }
 
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin(async (app) => {
   if (process.server) {
-    await initRumServer(nuxtApp)
+    await initRumServer(app)
   } else {
-    await initRumClient(nuxtApp)
+    await initRumClient()
   }
 })

packages/frontend-2/type-augmentations/window.d.ts

@@ -1,43 +1,6 @@
 declare global {
   interface Window {
-    LUX: {
-      /**
-       * This variable tells RUM whether to gather the initial performance metrics as part of window.onload. The default is true and that value works in most cases for SPAs. But in some cases even the initial page view is handled by the SPA code and can occur after the onload event. If this is the case for your site, you would set LUX.auto = false and make sure to call LUX.markLoadTime() and/or LUX.send() when that initial page view is complete.
-       */
-      auto: boolean
-
-      /**
-       * Call this function at the beginning of the SPA page transition (but not on the initial page load). For example, if the user clicked a button that causes a SPA transition, you would call LUX.init() immediately after the button is clicked.
-       *
-       */
-      init: () => void
-
-      /**
-       * Call this function at the end of the SPA page transition. For example, you would call LUX.markLoadTime() after all JSON responses have been received and the DOM has been updated. If you don't call this function, the load time will be recorded as the time when LUX.send() is called. This function is therefore optional, but recommended.
-       */
-      markLoadTime: () => void
-
-      /**
-       * Call this function when you are ready to send the data that has been collected for the current page view.
-       * Call as late in the page lifecycle as possible to maximize data collection. This can even be called directly before init()
-       */
-      send: () => void
-
-      /**
-       * Set to true to reduce data loss due to page abandonment.
-       */
-      sendBeaconOnPageHidden: boolean
-
-      /**
-       * Change to 30000 if 60 seconds results in noisy data
-       */
-      maxMeasureTime: number
-
-      /**
-       * Force a sample, even if you have set a sample rate. Useful for troubleshooting & local development
-       */
-      forceSample: () => void
-    }
+    rg4js?: import('raygun4js').RaygunV2
   }
 }
 

yarn.lock

@@ -13871,7 +13871,6 @@ __metadata:
     jest: 27
     js-cookie: ^3.0.1
     lodash-es: ^4.17.21
-    logrocket: ^8.0.1
     mitt: ^3.0.0
     mixpanel-browser: ^2.45.0
     nanoid: ^3.0.0
@@ -13886,7 +13885,6 @@ __metadata:
     postcss-nesting: ^10.2.0
     prettier: ^2.7.1
     raygun: ^0.13.2
-    raygun4js: ^3.0.1
     react: ^18.2.0
     react-dom: ^18.2.0
     rollup-plugin-node-builtins: ^2.1.2
@@ -33379,13 +33377,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"logrocket@npm:^8.0.1":
-  version: 8.0.1
-  resolution: "logrocket@npm:8.0.1"
-  checksum: cebb4d057e2fc2bc50992efe00b762ee29f1b46fbd4633f4b2342c83ed23e8f7dbcde829035227bb7c4da38e12d8ccd6d371d8b4c0b026f8efca25a13480ffea
-  languageName: node
-  linkType: hard
-
 "long@npm:^4.0.0":
   version: 4.0.0
   resolution: "long@npm:4.0.0"
@@ -40013,15 +40004,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raygun4js@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "raygun4js@npm:3.0.1"
-  dependencies:
-    web-vitals: ^3.5.0
-  checksum: 112ec9a7d6dc2e8cc780cee3a7130a5dfafe39c66bd21b229dac4da14e1cd3308fe3637d1aeb7a42dd25d1b8121eb7dea23b5089535db2e3704018d2006cc0c9
-  languageName: node
-  linkType: hard
-
 "raygun@npm:^0.13.2":
   version: 0.13.2
   resolution: "raygun@npm:0.13.2"
@@ -46954,13 +46936,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"web-vitals@npm:^3.5.0":
-  version: 3.5.2
-  resolution: "web-vitals@npm:3.5.2"
-  checksum: 4c208bb9384073c772055e9265a4cad4560dbbaeb111ec615ee23e71bbb952aacdf4e6bb8ffbfbe02b23540ac4f08d569d49fc0cd1e5d29c6c0ced566965320a
-  languageName: node
-  linkType: hard
-
 "webcrypto-core@npm:^1.7.4":
   version: 1.7.5
   resolution: "webcrypto-core@npm:1.7.5"