From 2ab84377a75c602b8992511dc80cc49a38ebb64e Mon Sep 17 00:00:00 2001 From: Kristaps Fabians Geikins Date: Mon, 11 Mar 2024 18:43:19 +0200 Subject: [PATCH] raygun setup cleanup --- packages/frontend-2/package.json | 2 - packages/frontend-2/plugins/002-rum.ts | 132 ++++-------------- .../frontend-2/type-augmentations/window.d.ts | 39 +----- yarn.lock | 25 ---- 4 files changed, 29 insertions(+), 169 deletions(-) diff --git a/packages/frontend-2/package.json b/packages/frontend-2/package.json index 7b3756074b..5e1cc99976 100644 --- a/packages/frontend-2/package.json +++ b/packages/frontend-2/package.json @@ -53,7 +53,6 @@ "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", @@ -61,7 +60,6 @@ "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", diff --git a/packages/frontend-2/plugins/002-rum.ts b/packages/frontend-2/plugins/002-rum.ts index af6a3448e7..48981096da 100644 --- a/packages/frontend-2/plugins/002-rum.ts +++ b/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[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 { 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() } }) diff --git a/packages/frontend-2/type-augmentations/window.d.ts b/packages/frontend-2/type-augmentations/window.d.ts index b434f29f42..92112ff765 100644 --- a/packages/frontend-2/type-augmentations/window.d.ts +++ b/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 } } diff --git a/yarn.lock b/yarn.lock index 734be864d4..a7eb7706ce 100644 --- a/yarn.lock +++ b/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"