added tracking for me call and signup / login (#758)

Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com>

app/client/src/pages/Applications/index.tsx

@@ -46,6 +46,9 @@ import Menu from "components/ads/Menu";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import HelpModal from "components/designSystems/appsmith/help/HelpModal";
 import { UpdateApplicationPayload } from "api/ApplicationApi";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 
 const OrgDropDown = styled.div`
   display: flex;
@@ -487,6 +490,8 @@ class Applications extends Component<
   }
 
   componentDidMount() {
+    PerformanceTracker.stopTracking(PerformanceTransactionName.LOGIN_CLICK);
+    PerformanceTracker.stopTracking(PerformanceTransactionName.SIGN_UP);
     this.props.getAllApplication();
   }
   public render() {

app/client/src/pages/Applications/loader.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import PageLoadingBar from "pages/common/PageLoadingBar";
 import { retryPromise } from "utils/AppsmithUtils";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 
 class ApplicationListLoader extends React.PureComponent<any, { Page: any }> {
   constructor(props: any) {
@@ -12,6 +15,8 @@ class ApplicationListLoader extends React.PureComponent<any, { Page: any }> {
   }
 
   componentDidMount() {
+    PerformanceTracker.stopTracking(PerformanceTransactionName.SIGN_UP);
+    PerformanceTracker.stopTracking(PerformanceTransactionName.LOGIN_CLICK);
     retryPromise(() =>
       import(/* webpackChunkName: "applications" */ "./index"),
     ).then(module => {

app/client/src/pages/UserAuth/Login.tsx

@@ -48,6 +48,9 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
 import { getAppsmithConfigs } from "configs";
 import { TncPPLinks } from "./SignUp";
 import { LOGIN_SUBMIT_PATH } from "constants/ApiConstants";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 const { enableGithubOAuth, enableGoogleOAuth } = getAppsmithConfigs();
 
 const validate = (values: LoginFormValues) => {
@@ -151,6 +154,9 @@ export const Login = (props: LoginFormProps) => {
               filled
               size="large"
               onClick={() => {
+                PerformanceTracker.startTracking(
+                  PerformanceTransactionName.LOGIN_CLICK,
+                );
                 AnalyticsUtil.logEvent("LOGIN_CLICK", {
                   loginMethod: "EMAIL",
                 });

app/client/src/pages/UserAuth/SignUp.tsx

@@ -50,6 +50,9 @@ import { getAppsmithConfigs } from "configs";
 import { SIGNUP_SUBMIT_PATH } from "constants/ApiConstants";
 import { connect } from "react-redux";
 import { AppState } from "reducers";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 const {
   enableGithubOAuth,
   enableGoogleOAuth,
@@ -153,6 +156,9 @@ export const SignUp = (props: SignUpFormProps) => {
                 AnalyticsUtil.logEvent("SIGNUP_CLICK", {
                   signupMethod: "EMAIL",
                 });
+                PerformanceTracker.startTracking(
+                  PerformanceTransactionName.SIGN_UP,
+                );
               }}
             />
           </FormActions>

app/client/src/pages/UserAuth/ThirdPartyAuth.tsx

@@ -7,6 +7,9 @@ import {
 import { IntentColors, getBorderCSSShorthand } from "constants/DefaultTheme";
 import AnalyticsUtil, { EventName } from "utils/AnalyticsUtil";
 import { useLocation } from "react-router-dom";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 
 const ThirdPartyAuthWrapper = styled.div`
   display: flex;
@@ -84,6 +87,12 @@ const SocialLoginButton = (props: {
         if (props.type === "SIGNUP") {
           eventName = "SIGNUP_CLICK";
         }
+        PerformanceTracker.startTracking(
+          eventName === "SIGNUP_CLICK"
+            ? PerformanceTransactionName.SIGN_UP
+            : PerformanceTransactionName.LOGIN_CLICK,
+          { name: props.name.toUpperCase() },
+        );
         AnalyticsUtil.logEvent(eventName, {
           loginMethod: props.name.toUpperCase(),
         });

app/client/src/sagas/userSagas.tsx

@@ -33,6 +33,9 @@ import {
 } from "actions/userActions";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { INVITE_USERS_TO_ORG_FORM } from "constants/forms";
+import PerformanceTracker, {
+  PerformanceTransactionName,
+} from "utils/PerformanceTracker";
 
 export function* createUserSaga(
   action: ReduxActionWithPromise<CreateUserRequest>,
@@ -74,6 +77,9 @@ export function* createUserSaga(
 
 export function* getCurrentUserSaga() {
   try {
+    PerformanceTracker.startAsyncTracking(
+      PerformanceTransactionName.USER_ME_API,
+    );
     const response: ApiResponse = yield call(UserApi.getCurrentUser);
 
     const isValidResponse = yield validateResponse(response);
@@ -90,8 +96,15 @@ export function* getCurrentUserSaga() {
         type: ReduxActionTypes.FETCH_USER_DETAILS_SUCCESS,
         payload: response.data,
       });
+      PerformanceTracker.stopAsyncTracking(
+        PerformanceTransactionName.USER_ME_API,
+      );
     }
   } catch (error) {
+    PerformanceTracker.stopAsyncTracking(
+      PerformanceTransactionName.USER_ME_API,
+      { failed: true },
+    );
     yield put({
       type: ReduxActionErrorTypes.FETCH_USER_DETAILS_ERROR,
       payload: {

app/client/src/utils/PerformanceTracker.ts

@@ -34,6 +34,9 @@ export enum PerformanceTransactionName {
   UPDATE_ACTION_API = "UPDATE_ACTION_API",
   OPEN_PROPERTY_PANE = "OPEN_PROPERTY_PANE",
   REFACTOR_ACTION_NAME = "REFACTOR_ACTION_NAME",
+  USER_ME_API = "USER_ME_API",
+  SIGN_UP = "SIGN_UP",
+  LOGIN_CLICK = "LOGIN_CLICK",
 }
 
 export enum PerformanceTagNames {