feat(editor): Add vue-scan for frontend performance tracking (no-changelog) (#16995)

packages/frontend/editor-ui/package.json

@@ -99,7 +99,8 @@
     "vue3-touch-events": "^4.1.3",
     "vuedraggable": "4.1.0",
     "web-tree-sitter": "0.24.3",
-    "xss": "catalog:"
+    "xss": "catalog:",
+    "z-vue-scan": "^0.0.35"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",

packages/frontend/editor-ui/src/main.ts

@@ -25,6 +25,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia';
 import { ChartJSPlugin } from '@/plugins/chartjs';
 import { SentryPlugin } from '@/plugins/sentry';
 
+import type { VueScanOptions } from 'z-vue-scan';
+
 const pinia = createPinia();
 
 const app = createApp(App);
@@ -40,6 +42,13 @@ app.use(router);
 app.use(i18nInstance);
 app.use(ChartJSPlugin);
 
+if (import.meta.env.VUE_SCAN) {
+	const { default: VueScan } = await import('z-vue-scan');
+	app.use<VueScanOptions>(VueScan, {
+		enable: true,
+	});
+}
+
 app.mount('#app');
 
 if (!import.meta.env.PROD) {

packages/frontend/editor-ui/src/shims.d.ts

@@ -14,6 +14,7 @@ declare global {
 			PROD: boolean;
 			NODE_ENV: 'development' | 'production';
 			VUE_APP_URL_BASE_API: string;
+			VUE_SCAN: boolean;
 		};
 	}
 

packages/frontend/editor-ui/vite.config.mts

@@ -131,7 +131,7 @@ export default mergeConfig(
 		plugins,
 		resolve: { alias },
 		base: publicPath,
-		envPrefix: 'VUE_APP',
+		envPrefix: 'VUE',
 		css: {
 			preprocessorOptions: {
 				scss: {