Add Firebase Performance Monitoring

package.json

@@ -65,6 +65,7 @@
     "dot-object": "^2.1.4",
     "firebase": "^9.23.0",
     "lodash": "^4.17.21",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "web-vitals": "^3.4.0"
   }
 }

src/firestore/interfaces.ts

@@ -2,6 +2,7 @@ import { FirebaseApp } from 'firebase/app';
 import { Auth, User } from 'firebase/auth';
 import { DocumentData, Firestore, Timestamp } from 'firebase/firestore';
 import { Functions } from 'firebase/functions';
+import { FirebasePerformance } from 'firebase/performance';
 import { FirebaseConfigData } from './util';
 
 export interface IRoarConfigData {
@@ -14,6 +15,7 @@ export interface IFirekit {
   db: Firestore;
   auth: Auth;
   functions: Functions;
+  perf?: FirebasePerformance;
   user?: User;
   claimsLastUpdated?: Date;
 }

src/firestore/util.ts

@@ -10,6 +10,7 @@ import {
 } from 'firebase/auth';
 import { connectFirestoreEmulator, Firestore, getFirestore } from 'firebase/firestore';
 import { Functions, connectFunctionsEmulator, getFunctions } from 'firebase/functions';
+import { getPerformance } from 'firebase/performance';
 import _chunk from 'lodash/chunk';
 import _difference from 'lodash/difference';
 import _flatten from 'lodash/flatten';
@@ -162,6 +163,7 @@ export const initializeFirebaseProject = async (
       auth: optionallyMarkRaw('auth', getAuth(app)),
       db: optionallyMarkRaw('db', getFirestore(app)),
       functions: optionallyMarkRaw('functions', getFunctions(app)),
+      perf: getPerformance(app),
     };
 
     // Auth state persistence is set with ``setPersistence`` and specifies how a