📈 Add anonymous important events tracking

cermakjiri · Dec 5, 2024 · e116773 · e116773
1 parent e4d7171
commit e116773
Show file tree

Hide file tree

Showing 20 changed files with 182 additions and 6 deletions.
diff --git a/...s/WebAuthnDefaultExamplePage/DefaultExample/LoginWithPasskeyPage/LoginWithPasskeyPage.tsx b/...s/WebAuthnDefaultExamplePage/DefaultExample/LoginWithPasskeyPage/LoginWithPasskeyPage.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 
 import { queryClient } from '@workspace/common/client/api/components';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { EmailField, Form, FormError, SubmitButton } from '@workspace/common/client/form/components';
 import { FieldsStack } from '@workspace/common/client/form/components/';
 import { Alert, Box, Button, Divider, Words } from '@workspace/common/client/ui-kit';
@@ -58,7 +59,13 @@ export const LoginWithPasskeyPage = () => {
                     />
                 </FieldsStack>
 
-                <SubmitButton sx={{ mt: 3 }} endIcon={<Fingerprint />}>
+                <SubmitButton
+                    sx={{ mt: 3 }}
+                    endIcon={<Fingerprint />}
+                    onClick={() => {
+                        track('example_default_login');
+                    }}
+                >
                     Login with Passkey
                 </SubmitButton>
             </Form>

diff --git a/...bAuthnDefaultExamplePage/DefaultExample/LoginWithPasskeyPage/hooks/useLoginWithPasskey.ts b/...bAuthnDefaultExamplePage/DefaultExample/LoginWithPasskeyPage/hooks/useLoginWithPasskey.ts
@@ -3,6 +3,7 @@ import { signInWithCustomToken } from 'firebase/auth';
 
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { auth } from '@workspace/common/client/firebase/config';
 import type { FormProps } from '@workspace/common/client/form/components';
 import { logger } from '@workspace/common/logger';
@@ -17,6 +18,7 @@ export function useLoginWithPasskey(): FormProps<LoginFormSchema, LoginFormValue
     const { redirect } = useExampleRouter();
 
     return async function loginWithPasskey({ email: username }, { setError }) {
+        track('example_default_login_request');
         try {
             const {
                 data: { publicKeyOptions },
@@ -49,6 +51,8 @@ export function useLoginWithPasskey(): FormProps<LoginFormSchema, LoginFormValue
             // NOTE: The Authorization header with ID token is set in request inceptor in AuthProvider.tsx component.
 
             redirect('/passkeys');
+
+            track('example_default_login_success');
         } catch (error) {
             const parsedError = await parseUnknownError(error);
 
@@ -57,6 +61,8 @@ export function useLoginWithPasskey(): FormProps<LoginFormSchema, LoginFormValue
             });
 
             logger.error(error);
+
+            track('example_default_login_failure');
         }
     };
 }
diff --git a/.../components/WebAuthnDefaultExamplePage/DefaultExample/PasskeysPage/hooks/useAddPasskey.ts b/.../components/WebAuthnDefaultExamplePage/DefaultExample/PasskeysPage/hooks/useAddPasskey.ts
@@ -4,6 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { queryClient } from '@workspace/common/client/api/components';
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { useSnack } from '@workspace/common/client/snackbar/hooks';
 import { logger } from '@workspace/common/logger';
 
@@ -14,6 +15,8 @@ export function useAddPasskey() {
 
     return useMutation({
         mutationFn: async () => {
+            track('example_default_add_passkey_request');
+
             const {
                 data: { publicKeyOptions },
             } = await fetcher<StartLinkingResponseData>({
@@ -47,9 +50,11 @@ export function useAddPasskey() {
             logger.error(parsedError);
 
             snack('error', parsedError.message);
+            track('example_default_add_passkey_failure');
         },
         onSuccess() {
             snack('success', 'Passkey has been successfully added.');
+            track('example_default_add_passkey_success');
         },
     });
 }
diff --git a/...mponents/WebAuthnDefaultExamplePage/DefaultExample/PasskeysPage/hooks/useRemovePasskey.ts b/...mponents/WebAuthnDefaultExamplePage/DefaultExample/PasskeysPage/hooks/useRemovePasskey.ts
@@ -5,6 +5,7 @@ import { queryClient } from '@workspace/common/client/api/components';
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
 import { useAuthUser } from '@workspace/common/client/example/components';
+import { track } from '@workspace/common/client/firebase/analytics';
 import type { PostRemovalDialogProps } from '@workspace/common/client/passkeys/components';
 import { useSnack } from '@workspace/common/client/snackbar/hooks';
 import { logger } from '@workspace/common/logger';
@@ -21,6 +22,8 @@ export function useRemovePasskey(openDialog: (data: PostRemovalDialogProps['data
 
     return useMutation({
         mutationFn: async (passkeyId: string) => {
+            track('example_default_remove_passkey_request');
+
             try {
                 const {
                     data: { publicKeyOptions },
@@ -59,12 +62,16 @@ export function useRemovePasskey(openDialog: (data: PostRemovalDialogProps['data
                 await queryClient.invalidateQueries({
                     queryKey: ['passkeys'],
                 });
+
+                track('example_default_remove_passkey_success');
             } catch (error) {
                 const parsedError = await parseUnknownError(error);
 
                 snack('error', parsedError.message);
 
                 logger.error(error);
+
+                track('example_default_remove_passkey_failure');
             }
         },
     });

diff --git a/...uthnDefaultExamplePage/DefaultExample/RegisterWithPasskeyPage/RegisterWithPasskeyPage.tsx b/...uthnDefaultExamplePage/DefaultExample/RegisterWithPasskeyPage/RegisterWithPasskeyPage.tsx
@@ -36,7 +36,12 @@ export const RegisterWithPasskeyPage = () => {
             <Box sx={{ textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                 <Words variant='body2'>Already have an account?</Words>
 
-                <Button variant='text' onClick={() => redirect('/login')}>
+                <Button
+                    variant='text'
+                    onClick={() => {
+                        redirect('/login');
+                    }}
+                >
                     Login
                 </Button>
             </Box>

diff --git a/...DefaultExamplePage/DefaultExample/RegisterWithPasskeyPage/hooks/useRegisterWithPasskey.ts b/...DefaultExamplePage/DefaultExample/RegisterWithPasskeyPage/hooks/useRegisterWithPasskey.ts
@@ -3,6 +3,7 @@ import { signInWithCustomToken } from 'firebase/auth';
 
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { auth } from '@workspace/common/client/firebase/config';
 import type { FormProps } from '@workspace/common/client/form/components';
 import { logger } from '@workspace/common/logger';
@@ -20,6 +21,8 @@ export function useRegisterWithPasskey(): FormProps<RegisterFormSchema, Register
     const { redirect } = useExampleRouter();
 
     return async function registerPasskey({ email: username }, { setError }) {
+        track('example_default_register_request');
+
         try {
             const {
                 data: { publicKeyOptions },
@@ -52,6 +55,8 @@ export function useRegisterWithPasskey(): FormProps<RegisterFormSchema, Register
             // NOTE: The Authorization header with ID token is set in request inceptor in AuthProvider.tsx component.
 
             redirect('/passkeys');
+
+            track('example_default_register_success');
         } catch (error) {
             const parsedError = await parseUnknownError(error);
 
@@ -60,6 +65,8 @@ export function useRegisterWithPasskey(): FormProps<RegisterFormSchema, Register
             });
 
             logger.error(error);
+
+            track('example_default_register_failure');
         }
     };
 }
diff --git a/...WebAuthnUpgradeExamplePage/UpgradeExample/EmailVerificationCode/EmailVerificationCode.tsx b/...WebAuthnUpgradeExamplePage/UpgradeExample/EmailVerificationCode/EmailVerificationCode.tsx
@@ -6,6 +6,7 @@ import { parseAsString, parseAsStringLiteral, useQueryStates } from 'nuqs';
 
 import { QueryLoader } from '@workspace/common/client/api/components';
 import { env } from '@workspace/common/client/env';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { auth } from '@workspace/common/client/firebase/config';
 
 import { useExampleRouter } from '../router';
@@ -41,6 +42,8 @@ export function EmailVerificationCode({ children }: EmailVerificationCodeProps)
 
             redirect('/login-with-password');
 
+            track('example_upgrade_register_email_verified');
+
             await push(continueUrl);
 
             return null;

diff --git a/...lePage/UpgradeExample/LoginWithEmailAndPasswordPage/hooks/useLoginWithEmailAndPassword.ts b/...lePage/UpgradeExample/LoginWithEmailAndPasswordPage/hooks/useLoginWithEmailAndPassword.ts
@@ -3,6 +3,7 @@ import { signInWithCustomToken } from 'firebase/auth';
 
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { auth } from '@workspace/common/client/firebase/config';
 import type { FormProps } from '@workspace/common/client/form/components';
 import { logger } from '@workspace/common/logger';
@@ -23,6 +24,7 @@ export function useLoginWithEmailAndPassword({
     const { redirect } = useExampleRouter();
 
     return async function loginWithEmailAndPassword({ email, password }, { setError }) {
+        track('example_upgrade_login_request');
         try {
             const { data: loginResult } = await fetcher<LoginResponseData>({
                 method: 'POST',
@@ -61,6 +63,8 @@ export function useLoginWithEmailAndPassword({
             onSuccess();
 
             redirect('/passkeys');
+
+            track('example_upgrade_login_success');
         } catch (error) {
             const parsedError = await parseUnknownError(error);
 
@@ -69,6 +73,8 @@ export function useLoginWithEmailAndPassword({
             });
 
             logger.error(error);
+
+            track('example_upgrade_login_failure');
         }
     };
 }
diff --git a/...bAuthnUpgradeExamplePage/UpgradeExample/LoginWithPasskeyPage/hooks/useLoginWithPasskey.ts b/...bAuthnUpgradeExamplePage/UpgradeExample/LoginWithPasskeyPage/hooks/useLoginWithPasskey.ts
@@ -4,6 +4,7 @@ import { signInWithCustomToken } from 'firebase/auth';
 
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { auth } from '@workspace/common/client/firebase/config';
 import { logger } from '@workspace/common/logger';
 
@@ -17,6 +18,7 @@ export function useLoginWithPasskey() {
 
     return useMutation<void, Awaited<ReturnType<typeof parseUnknownError>>>({
         mutationFn: async () => {
+            track('example_upgrade_login_passkey_request');
             try {
                 const {
                     data: { publicKeyOptions },
@@ -47,7 +49,10 @@ export function useLoginWithPasskey() {
 
                 // NOTE: The Authorization header with ID token is set in request inceptor in AuthProvider.tsx component.
                 redirect('/passkeys');
+
+                track('example_upgrade_login_passkey_success');
             } catch (error) {
+                track('example_upgrade_login_passkey_failure');
                 throw await parseUnknownError(error);
             }
         },

diff --git a/.../components/WebAuthnUpgradeExamplePage/UpgradeExample/PasskeysPage/hooks/useAddPasskey.ts b/.../components/WebAuthnUpgradeExamplePage/UpgradeExample/PasskeysPage/hooks/useAddPasskey.ts
@@ -4,6 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { queryClient } from '@workspace/common/client/api/components';
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { useSnack } from '@workspace/common/client/snackbar/hooks';
 import { logger } from '@workspace/common/logger';
 
@@ -17,6 +18,7 @@ export function useAddPasskey() {
 
     return useMutation({
         mutationFn: async () => {
+            track('example_upgrade_add_passkey_request');
             const {
                 data: { publicKeyOptions },
             } = await fetcher<StartLinkingResponseData>({
@@ -54,9 +56,11 @@ export function useAddPasskey() {
             logger.error(parsedError);
 
             snack('error', parsedError.message);
+            track('example_upgrade_add_passkey_failure');
         },
         onSuccess() {
             snack('success', 'Passkey has been successfully added.');
+            track('example_upgrade_add_passkey_success');
         },
     });
 }
diff --git a/...mponents/WebAuthnUpgradeExamplePage/UpgradeExample/PasskeysPage/hooks/useRemovePasskey.ts b/...mponents/WebAuthnUpgradeExamplePage/UpgradeExample/PasskeysPage/hooks/useRemovePasskey.ts
@@ -5,6 +5,7 @@ import { queryClient } from '@workspace/common/client/api/components';
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
 import { useAuthUser } from '@workspace/common/client/example/components';
+import { track } from '@workspace/common/client/firebase/analytics';
 import type { PostRemovalDialogProps } from '@workspace/common/client/passkeys/components';
 import { useSnack } from '@workspace/common/client/snackbar/hooks';
 import { logger } from '@workspace/common/logger';
@@ -23,6 +24,7 @@ export function useRemovePasskey(openDialog: (data: PostRemovalDialogProps['data
 
     return useMutation({
         mutationFn: async (passkeyId: string) => {
+            track('example_upgrade_remove_passkey_request');
             try {
                 const {
                     data: { publicKeyOptions },
@@ -65,12 +67,14 @@ export function useRemovePasskey(openDialog: (data: PostRemovalDialogProps['data
                 await queryClient.invalidateQueries({
                     queryKey: ['passkeys'],
                 });
+                track('example_upgrade_remove_passkey_success');
             } catch (error) {
                 const parsedError = await parseUnknownError(error);
 
                 snack('error', parsedError.message);
 
                 logger.error(error);
+                track('example_upgrade_remove_passkey_failure');
             }
         },
     });

diff --git a/...Page/UpgradeExample/RegisterWithEmailAndPasswordPage/RegisterWithEmailAndPasswordPage.tsx b/...Page/UpgradeExample/RegisterWithEmailAndPasswordPage/RegisterWithEmailAndPasswordPage.tsx
@@ -41,7 +41,12 @@ export const RegisterWithEmailAndPasswordPage = () => {
             <Box sx={{ textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                 <Words variant='body2'>Already have an account?</Words>
 
-                <Button variant='text' onClick={() => redirect('/login')}>
+                <Button
+                    variant='text'
+                    onClick={() => {
+                        redirect('/login');
+                    }}
+                >
                     Login
                 </Button>
             </Box>

diff --git a/...UpgradeExample/RegisterWithEmailAndPasswordPage/hooks/useRegisterWithEmailAndPassword.tsx b/...UpgradeExample/RegisterWithEmailAndPasswordPage/hooks/useRegisterWithEmailAndPassword.tsx
@@ -2,6 +2,7 @@ import { sendEmailVerification, signInWithCustomToken, signOut, type User } from
 
 import { fetcher } from '@workspace/common/client/api/fetcher';
 import { parseUnknownError } from '@workspace/common/client/errors';
+import { track } from '@workspace/common/client/firebase/analytics';
 import { auth } from '@workspace/common/client/firebase/config';
 import type { FormProps } from '@workspace/common/client/form/components';
 import { useSnack } from '@workspace/common/client/snackbar/hooks';
@@ -29,6 +30,8 @@ export function useRegisterWithEmailAndPassword(): FormProps<RegisterFormSchema,
     const snack = useSnack();
 
     return async function registerPasskey({ email, password }, { setError, reset }) {
+        track('example_upgrade_register_request');
+
         try {
             const {
                 data: { customToken },
@@ -61,6 +64,8 @@ export function useRegisterWithEmailAndPassword(): FormProps<RegisterFormSchema,
                     )}
                 </>,
             );
+
+            track('example_upgrade_register_success');
         } catch (error) {
             const parsedError = await parseUnknownError(error);
 
@@ -69,6 +74,8 @@ export function useRegisterWithEmailAndPassword(): FormProps<RegisterFormSchema,
             });
 
             logger.error(error);
+
+            track('example_upgrade_register_failure');
         }
     };
 }
diff --git a/packages/common/src/client/example/components/ExampleHeader/ExampleHeader.tsx b/packages/common/src/client/example/components/ExampleHeader/ExampleHeader.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { GitHub } from '@mui/icons-material';
 import { Box } from '@mui/material';
 
+import { track } from '~client/firebase/analytics';
 import { Button } from '~client/ui-kit';
 
 import { Words } from '../../../ui-kit/components/Words';
@@ -35,6 +36,9 @@ export const ExampleHeader = ({ title, description, githubUrl }: ExampleHeaderPr
                     href={githubUrl}
                     startIcon={<GitHub />}
                     variant='text'
+                    onClick={() => {
+                        track('view_github_repo');
+                    }}
                     sx={theme => ({ color: theme.palette.text.primary })}
                 >
                     View on Github