Fixed error with analytics

web/components/post/CreatePostView/hooks.ts

@@ -1,11 +1,10 @@
 import { useForm, hasLength } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
 import { IconCheck } from '@tabler/icons';
-import { logEvent } from 'firebase/analytics';
 import { useCreatePostMutation } from 'generated/client';
 import { useRouter } from 'next/router';
 import { useAuthState } from 'react-firebase-hooks/auth';
-import { analytics, auth } from 'web/lib/firebase';
+import { auth, getAnalyticsAndlogEvent } from 'web/lib/firebase';
 
 export const useCreatePost = () => {
   const [user] = useAuthState(auth);
@@ -42,7 +41,7 @@ export const useCreatePost = () => {
     });
 
     if (data) {
-      logEvent(analytics, 'post_created', { userId: user?.uid });
+      await getAnalyticsAndlogEvent('post_created', { userId: user?.uid });
       await router.push('/');
 
       notifications.show({
@@ -54,7 +53,9 @@ export const useCreatePost = () => {
     }
 
     if (errors) {
-      logEvent(analytics, 'post_created_error', { userId: user?.uid });
+      await getAnalyticsAndlogEvent('post_created_error', {
+        userId: user?.uid,
+      });
       notifications.show({
         message: errors[0].message,
         color: 'red',

web/components/ui/AppHeader.tsx

@@ -17,12 +17,11 @@ import {
   IconSun,
   IconTextPlus,
 } from '@tabler/icons';
-import { logEvent } from 'firebase/analytics';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
 import { useAuthState, useSignInWithGoogle } from 'react-firebase-hooks/auth';
-import { analytics, auth } from 'web/lib/firebase';
+import { auth, getAnalyticsAndlogEvent } from 'web/lib/firebase';
 
 export const AppHeader = () => {
   const [user] = useAuthState(auth);
@@ -113,7 +112,7 @@ export const AppHeader = () => {
               variant="outline"
               onClick={() => {
                 signInWithGoogle()
-                  .then(() => logEvent(analytics, 'user_login'))
+                  .then(() => getAnalyticsAndlogEvent('user_login'))
                   .catch(console.error);
               }}
             >

web/lib/firebase.ts

@@ -1,6 +1,11 @@
-import { getAnalytics } from 'firebase/analytics';
+import {
+  getAnalytics as _getAnalytics,
+  isSupported,
+  logEvent,
+} from 'firebase/analytics';
 import { initializeApp, getApps, getApp, FirebaseApp } from 'firebase/app';
 import { browserLocalPersistence, getAuth } from 'firebase/auth';
+import { Tail } from 'web/lib/types';
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -22,7 +27,23 @@ if (getApps().length > 0) {
 
 export const app = fireApp;
 export const auth = getAuth(app);
-export const analytics = getAnalytics(app);
+
+export const getAnalytics = async () => {
+  if (await isSupported()) {
+    return _getAnalytics(app);
+  }
+  return null;
+};
+
+export const getAnalyticsAndlogEvent = async (
+  ...params: Tail<Parameters<typeof logEvent>>
+) => {
+  const analytics = await getAnalytics();
+
+  if (analytics) {
+    logEvent(analytics, ...params);
+  }
+};
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises -- This is intentional
 auth.setPersistence(browserLocalPersistence);

web/lib/types.ts

@@ -0,0 +1,6 @@
+export type Tail<T extends unknown[]> = ((...args: T) => void) extends (
+  _arg: any,
+  ...rest: infer R
+) => void
+  ? R
+  : never;