diff --git a/packages/frontend-2/.env.example b/packages/frontend-2/.env.example index aa932010b..7503c19aa 100644 --- a/packages/frontend-2/.env.example +++ b/packages/frontend-2/.env.example @@ -25,4 +25,7 @@ NUXT_PUBLIC_VIEWER_DEBUG=false NUXT_PUBLIC_RAYGUN_KEY= NUXT_PUBLIC_LOGROCKET_APP_ID= NUXT_PUBLIC_SPEEDCURVE_ID= -NUXT_PUBLIC_DEBUGBEAR_ID= \ No newline at end of file +NUXT_PUBLIC_DEBUGBEAR_ID= + +# Debug core web vitals in the console +NUXT_PUBLIC_DEBUG_CORE_WEB_VITALS=false \ No newline at end of file diff --git a/packages/frontend-2/nuxt.config.ts b/packages/frontend-2/nuxt.config.ts index f58aa5a6b..457afb069 100644 --- a/packages/frontend-2/nuxt.config.ts +++ b/packages/frontend-2/nuxt.config.ts @@ -57,7 +57,8 @@ export default defineNuxtConfig({ raygunKey: '', logrocketAppId: '', speedcurveId: 0, - debugbearId: '' + debugbearId: '', + debugCoreWebVitals: false } }, diff --git a/packages/frontend-2/pages/projects/[id]/models/[modelId]/index.vue b/packages/frontend-2/pages/projects/[id]/models/[modelId]/index.vue index ca317acd1..becd76eb9 100644 --- a/packages/frontend-2/pages/projects/[id]/models/[modelId]/index.vue +++ b/packages/frontend-2/pages/projects/[id]/models/[modelId]/index.vue @@ -26,7 +26,8 @@ definePageMeta({ middleware: ['require-valid-project'], pageTransition: false, // NOTE: transitions fuck viewer up layoutTransition: false, - key: '/projects/:id/models/resources' // To prevent controls flickering on resource url param changes + key: '/projects/:id/models/resources', // To prevent controls flickering on resource url param changes + raygunTags: ['viewer'] }) const ViewerScope = resolveComponent('ViewerScope') diff --git a/packages/frontend-2/plugins/002-rum.ts b/packages/frontend-2/plugins/002-rum.ts index 1163f8803..b3b8dbd79 100644 --- a/packages/frontend-2/plugins/002-rum.ts +++ b/packages/frontend-2/plugins/002-rum.ts @@ -5,17 +5,28 @@ import type { Plugin } from 'nuxt/dist/app/nuxt' type PluginNuxtApp = Parameters[0] -async function initRumClient() { - const { enabled, keys } = resolveInitParams() +async function initRumClient(app: PluginNuxtApp) { + const { keys, baseUrl, speckleServerVersion } = resolveInitParams(app) const router = useRouter() const onAuthStateChange = useOnAuthStateChange() const registerErrorTransport = useCreateErrorLoggingTransport() - if (!enabled) return // RayGun const rg4js = window.rg4js if (keys.raygun && rg4js) { + const setupTags = (extraTags: string[]) => { + rg4js('withTags', [ + `baseUrl:${baseUrl}`, + `version:${speckleServerVersion}`, + ...extraTags + ]) + } + router.beforeEach((to, from) => { + // Update with tags + const newTags = (to.meta.raygunTags || []) as string[] + setupTags(newTags) + if (!from.path || from.path === to.path) return rg4js('trackEvent', { @@ -64,8 +75,8 @@ async function initRumClient() { async function initRumServer(app: PluginNuxtApp) { const registerErrorTransport = useCreateErrorLoggingTransport() - const { enabled, keys, baseUrl, speckleServerVersion } = resolveInitParams() - if (!enabled) return + const { keys, baseUrl, speckleServerVersion, debug, debugCoreWebVitals } = + resolveInitParams(app) // RayGun if (keys.raygun) { @@ -89,8 +100,32 @@ async function initRumServer(app: PluginNuxtApp) { // Add client-side snippet app.hook('app:rendered', (context) => { + const initRaygunTags = app._route?.meta.raygunTags || [] + context.ssrContext!.head.push({ script: [ + ...(debugCoreWebVitals + ? [ + { + innerHTML: ` + import { + onCLS, + onFID, + onLCP, + onINP, + onTTFB + } from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module'; + + onCLS(console.log); + onFID(console.log); + onLCP(console.log); + onINP(console.log); + onTTFB(console.log); + `, + type: 'module' + } + ] + : []), { 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], @@ -103,9 +138,11 @@ async function initRumServer(app: PluginNuxtApp) { rg4js('apiKey', '${keys.raygun}') rg4js('enableCrashReporting', true) rg4js('enablePulse', true) - rg4js('withTags', ['baseUrl:${baseUrl}', 'version:${speckleServerVersion}']) + rg4js('withTags', ['baseUrl:${baseUrl}', 'version:${speckleServerVersion}', ...${JSON.stringify( + initRaygunTags + )}]) rg4js('options', { - debugMode: ${!!process.dev}, + debugMode: ${!!debug}, }) ` } @@ -115,25 +152,30 @@ async function initRumServer(app: PluginNuxtApp) { } } -function resolveInitParams() { +function resolveInitParams(app: PluginNuxtApp) { const { public: { raygunKey, speckleServerVersion, - - baseUrl + logCsrEmitProps, + baseUrl, + debugCoreWebVitals } } = useRuntimeConfig() + const logger = useLogger() const raygun = raygunKey?.length ? raygunKey : null - const enabled = !!raygun + + const shouldDebugCoreWebVitals = debugCoreWebVitals || app._route?.query.cwv === '1' return { - enabled, keys: { raygun }, speckleServerVersion, - baseUrl + baseUrl, + debug: logCsrEmitProps && process.dev, + debugCoreWebVitals: shouldDebugCoreWebVitals, + logger } } @@ -141,6 +183,6 @@ export default defineNuxtPlugin(async (app) => { if (process.server) { await initRumServer(app) } else { - await initRumClient() + await initRumClient(app) } }) diff --git a/packages/frontend-2/plugins/mp.ts b/packages/frontend-2/plugins/mp.ts index 1ea424058..227e5a0a4 100644 --- a/packages/frontend-2/plugins/mp.ts +++ b/packages/frontend-2/plugins/mp.ts @@ -5,7 +5,7 @@ export default defineNuxtPlugin(async () => { const { - public: { mixpanelApiHost, mixpanelTokenId } + public: { mixpanelApiHost, mixpanelTokenId, logCsrEmitProps } } = useRuntimeConfig() const mixpanel = process.client @@ -22,11 +22,10 @@ export default defineNuxtPlugin(async () => { } // Init - // TODO: Separate token for new frontend? mixpanel.init(mixpanelTokenId, { // eslint-disable-next-line camelcase api_host: mixpanelApiHost, - debug: !!process.dev + debug: logCsrEmitProps && !!process.dev }) return { diff --git a/packages/frontend-2/type-augmentations/vue.d.ts b/packages/frontend-2/type-augmentations/vue.d.ts new file mode 100644 index 000000000..5fd3114b0 --- /dev/null +++ b/packages/frontend-2/type-augmentations/vue.d.ts @@ -0,0 +1,10 @@ +declare module 'nuxt/dist/pages/runtime' { + interface PageMeta { + /** + * Optinal tags to be sent to Raygun + */ + raygunTags?: string[] + } +} + +export {}