docs: add meticulous

docs/src/.vitepress/theme/index.ts

@@ -16,6 +16,7 @@ export default {
   Layout,
   enhanceApp({ app }) {
     app.use(VueAnimXyz)
+
     inject()
   },
-}
+} as typeof Theme

docs/src/.vitepress/theme/layouts/default.vue

@@ -7,24 +7,40 @@ const { Layout: ParentLayout } = DefaultTheme
 
 const route = useRoute()
 
+const METICULOUS_SAMPLING_RATE = 0.01
+
 onMounted(async () => {
-  if (!import.meta.env.DEV) {
+  const isDev = import.meta.env.DEV
+
+  if (!isDev) {
     const { webVitals } = await import('../../plugins/vercel-web-vitals-api')
     webVitals({ analyticsId: '__ANALYTICS_ID__', debug: false })
   }
-})
 
-watch(
-  route,
-  (nextRoute) => {
-    if (nextRoute.path.includes('/examples')) {
-      document.body.className = 'examples'
-    } else {
-      document.body.className = ''
-    }
-  },
-  { immediate: true, deep: true },
-)
+  if (!isDev || Math.random() < METICULOUS_SAMPLING_RATE) {
+    const { tryLoadAndStartRecorder } = await import('@alwaysmeticulous/recorder-loader')
+
+    // Start the Meticulous recorder before you initialise your app.
+    // Note: all errors are caught and logged, so no need to surround with try/catch
+    tryLoadAndStartRecorder({
+      projectId: '__METICULOUS_PROJECT_ID__',
+      isProduction: !isDev,
+      maxMsToBlockFor: !isDev ? 250 : undefined, // Optional, abandon waiting to load the Meticulous recorder, if it takes more than 250ms
+    })
+  }
+
+  watch(
+    route,
+    (nextRoute) => {
+      if (nextRoute.path.includes('/examples')) {
+        document.body.className = 'examples'
+      } else {
+        document.body.className = ''
+      }
+    },
+    { immediate: true },
+  )
+})
 </script>
 
 <template>