(BSR) perf(firebase): gestion des performances par firebase

jest/jest.setup.ts

@@ -27,3 +27,7 @@ jest.mock('libs/environment/env')
 jest.mock('react-native-device-info', () => mockRNDeviceInfo)
 
 jest.unmock('react-native-modal')
+
+jest.mock('shared/performance/useFirebasePerformanceProfiler', () => ({
+  useFirebasePerformanceProfiler: jest.fn(),
+}))

src/App.tsx

@@ -43,6 +43,7 @@ import { SafeAreaProvider } from 'libs/react-native-save-area-provider'
 import { ReactQueryClientProvider } from 'libs/react-query/ReactQueryClientProvider'
 import { SplashScreenProvider } from 'libs/splashscreen'
 import { ThemeProvider } from 'libs/styled'
+import { useAppStartTimeStore } from 'shared/performance/appStartTimeStore'
 import { theme } from 'theme'
 import { SnackBarProvider } from 'ui/components/snackBar/SnackBarContext'
 
@@ -56,6 +57,8 @@ LogBox.ignoreLogs([
 ])
 
 const App: FunctionComponent = function () {
+  useAppStartTimeStore()
+
   useEffect(() => {
     StatusBar.setBarStyle('dark-content')
     if (Platform.OS === 'android') {

src/features/favorites/pages/Favorites.tsx

@@ -1,17 +1,24 @@
+import { useRoute } from '@react-navigation/native'
 import React from 'react'
 import styled from 'styled-components/native'
 
 import { useAuthContext } from 'features/auth/context/AuthContext'
 import { FavoritesResults } from 'features/favorites/components/FavoritesResults'
 import { NotConnectedFavorites } from 'features/favorites/pages/NotConnectedFavorites'
+import { UseRouteType } from 'features/navigation/RootNavigator/types'
 import { useNetInfoContext } from 'libs/network/NetInfoWrapper'
 import { OfflinePage } from 'libs/network/OfflinePage'
+import { UsePerformanceProfilerOptions } from 'shared/performance/types'
+import { useFirebasePerformanceProfiler } from 'shared/performance/useFirebasePerformanceProfiler'
 import { PageHeader } from 'ui/components/headers/PageHeader'
 
 export const Favorites: React.FC = () => {
+  const route = useRoute<UseRouteType<'Favorites'>>()
   const { isConnected } = useNetInfoContext()
   const { isLoggedIn } = useAuthContext()
 
+  useFirebasePerformanceProfiler('Favorites', { route } as UsePerformanceProfilerOptions)
+
   if (!isConnected) {
     return <OfflinePage />
   }

src/features/home/constants.ts

@@ -1,4 +1,2 @@
-export const PERFORMANCE_HOME_CREATION = 'HOME:CREATION'
-export const PERFORMANCE_HOME_LOADING = 'HOME:LOADING'
 export const TWENTY_FOUR_HOURS = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
 export const THIRTY_ONE_DAYS = 31 * TWENTY_FOUR_HOURS // 31 days in milliseconds

src/features/home/pages/GenericHome.native.test.tsx

@@ -30,22 +30,6 @@ const defaultModules = [formattedVenuesModule]
 const homeId = 'fake-id'
 const Header = <Typo.Title1>Header</Typo.Title1>
 
-const mockStartTransaction = jest.fn()
-const mockFinishTransaction = jest.fn()
-jest.mock('shared/performance/transactions', () => {
-  const originalModule = jest.requireActual('shared/performance/transactions')
-
-  return {
-    ...originalModule,
-    startTransaction: (s: string) => {
-      mockStartTransaction(s)
-    },
-    finishTransaction: (s: string) => {
-      mockFinishTransaction(s)
-    },
-  }
-})
-
 jest.mock('libs/firebase/analytics/analytics')
 
 jest.mock('react-native/Libraries/Animated/createAnimatedComponent', () => {
@@ -87,47 +71,6 @@ describe('GenericHome', () => {
     })
   })
 
-  describe('With displayed skeleton by default', () => {
-    beforeAll(() => {
-      useShowSkeletonSpy.mockReturnValue(true)
-    })
-
-    afterAll(() => {
-      useShowSkeletonSpy.mockReturnValue(false)
-    })
-
-    it('should finish home component creation performance transaction when component created', async () => {
-      renderGenericHome({})
-
-      await act(async () => {})
-
-      await waitFor(() => {
-        expect(mockFinishTransaction).toHaveBeenCalledTimes(1)
-      })
-    })
-
-    it('should finish home loading performance transaction when home page loaded', async () => {
-      renderGenericHome({})
-
-      await act(async () => {})
-
-      // home component creation performance transaction
-      expect(mockFinishTransaction).toHaveBeenCalledTimes(1)
-
-      useShowSkeletonSpy.mockReturnValueOnce(false)
-      // home component creation performance transaction + home loading performance transaction
-      screen.rerender(
-        reactQueryProviderHOC(
-          <GenericHome modules={defaultModules} Header={Header} homeId={homeId} />
-        )
-      )
-
-      await act(async () => {})
-
-      expect(mockFinishTransaction).toHaveBeenCalledTimes(2)
-    })
-  })
-
   describe('VideoCarouselModule', () => {
     beforeEach(() => {
       useFeatureFlagSpy.mockReturnValueOnce(true)

src/features/home/pages/GenericHome.tsx

@@ -22,7 +22,6 @@ import { useShowSkeleton } from 'features/home/api/useShowSkeleton'
 import { HomeBodyPlaceholder } from 'features/home/components/HomeBodyPlaceholder'
 import { HomeModule } from 'features/home/components/modules/HomeModule'
 import { VideoCarouselModule } from 'features/home/components/modules/video/VideoCarouselModule'
-import { PERFORMANCE_HOME_CREATION, PERFORMANCE_HOME_LOADING } from 'features/home/constants'
 import { useOnScroll } from 'features/home/pages/helpers/useOnScroll'
 import {
   HomepageModule,
@@ -41,7 +40,7 @@ import { useNetInfoContext } from 'libs/network/NetInfoWrapper'
 import { OfflinePage } from 'libs/network/OfflinePage'
 import { BatchEvent, BatchEventData, BatchUser } from 'libs/react-native-batch'
 import { AccessibilityFooter } from 'shared/AccessibilityFooter/AccessibilityFooter'
-import { finishTransaction } from 'shared/performance/transactions'
+import { useFirebasePerformanceProfiler } from 'shared/performance/useFirebasePerformanceProfiler'
 import { ScrollToTopButton } from 'ui/components/ScrollToTopButton'
 import { Spinner } from 'ui/components/Spinner'
 import { getSpacing, Spacer } from 'ui/theme'
@@ -150,12 +149,6 @@ const OnlineHome: FunctionComponent<GenericHomeProps> = ({
   const theme = useTheme()
 
   const flatListHeaderStyle = { zIndex: theme.zIndex.header }
-  const finishPerfHomeLoadingOnce = useFunctionOnce(() =>
-    finishTransaction(PERFORMANCE_HOME_LOADING)
-  )
-  const finishPerfHomeCreationOnce = useFunctionOnce(() =>
-    finishTransaction(PERFORMANCE_HOME_CREATION)
-  )
 
   const modulesToDisplay = modules.slice(0, maxIndex)
 
@@ -226,17 +219,6 @@ const OnlineHome: FunctionComponent<GenericHomeProps> = ({
 
   const onContentSizeChange = () => setIsLoading(false)
 
-  useEffect(() => {
-    finishPerfHomeCreationOnce()
-    return () => clearInterval(modulesIntervalId.current)
-  }, [finishPerfHomeCreationOnce])
-
-  useEffect(() => {
-    if (!showSkeleton) {
-      finishPerfHomeLoadingOnce()
-    }
-  }, [showSkeleton, finishPerfHomeLoadingOnce])
-
   useEffect(() => {
     // We use this to load more modules, in case the content size doesn't change after the load triggered by onEndReached (i.e. no new modules were shown).
     modulesIntervalId.current = setInterval(() => {
@@ -288,6 +270,8 @@ const OnlineHome: FunctionComponent<GenericHomeProps> = ({
     [Header, shouldDisplayVideoInHeader, videoCarouselModules, homeId, HomeBanner]
   )
 
+  useFirebasePerformanceProfiler('OnlineHome')
+
   return (
     <Container>
       {showSkeleton ? (

src/features/home/pages/Home.native.test.tsx

@@ -36,22 +36,6 @@ const mockUseHomepageData = useHomepageData as jest.Mock
 
 jest.mock('libs/location')
 
-const mockStartTransaction = jest.fn()
-const mockFinishTransaction = jest.fn()
-jest.mock('shared/performance/transactions', () => {
-  const originalModule = jest.requireActual('shared/performance/transactions')
-
-  return {
-    ...originalModule,
-    startTransaction: (s: string) => {
-      mockStartTransaction(s)
-    },
-    finishTransaction: (s: string) => {
-      mockFinishTransaction(s)
-    },
-  }
-})
-
 jest.mock('libs/firebase/analytics/analytics')
 
 jest.mock('react-native/Libraries/Animated/createAnimatedComponent', () => {
@@ -100,21 +84,6 @@ describe('Home page', () => {
     expect(analytics.logConsultHome).toHaveBeenNthCalledWith(1, { homeEntryId: 'fakeEntryId' })
   })
 
-  it('should end Sentry performance transaction to measure component creation and home loading', async () => {
-    useRoute.mockReturnValueOnce({ params: undefined })
-    mockUseHomepageData.mockReturnValueOnce({
-      modules: [formattedVenuesModule],
-      homeEntryId: 'fakeEntryId',
-    })
-
-    renderHome()
-    await act(async () => {})
-    await act(async () => {})
-
-    expect(mockFinishTransaction).toHaveBeenNthCalledWith(1, 'HOME:CREATION')
-    expect(mockFinishTransaction).toHaveBeenNthCalledWith(2, 'HOME:LOADING')
-  })
-
   it('should display onboarding subscription modal on third logged in session', async () => {
     mockUseAuthContext.mockReturnValueOnce({ isLoggedIn: true })
     await storage.saveObject('logged_in_session_count', 1)

src/features/home/pages/Home.tsx

@@ -9,20 +9,17 @@ import { useHomepageData } from 'features/home/api/useHomepageData'
 import { HomeHeader } from 'features/home/components/headers/HomeHeader'
 import { IncomingReactionModalContainer } from 'features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer'
 import { HomeBanner } from 'features/home/components/modules/banners/HomeBanner'
-import { PERFORMANCE_HOME_CREATION, PERFORMANCE_HOME_LOADING } from 'features/home/constants'
 import { GenericHome } from 'features/home/pages/GenericHome'
 import { UseRouteType } from 'features/navigation/RootNavigator/types'
 import { OnboardingSubscriptionModal } from 'features/subscription/components/modals/OnboardingSubscriptionModal'
 import { useOnboardingSubscriptionModal } from 'features/subscription/helpers/useOnboardingSubscriptionModal'
 import { analytics } from 'libs/analytics'
 import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
 import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
-import { useFunctionOnce } from 'libs/hooks'
 import { useLocation } from 'libs/location'
 import { LocationMode } from 'libs/location/types'
 import { getAppVersion } from 'libs/packageJson'
 import { BatchUser } from 'libs/react-native-batch'
-import { startTransaction } from 'shared/performance/transactions'
 import { useModal } from 'ui/components/modals/useModal'
 import { StatusBarBlurredBackground } from 'ui/components/statusBar/statusBarBlurredBackground'
 
@@ -33,13 +30,6 @@ const Header = () => (
 )
 
 export const Home: FunctionComponent = () => {
-  const startPerfHomeLoadingOnce = useFunctionOnce(() => startTransaction(PERFORMANCE_HOME_LOADING))
-  const startPerfHomeCreationOnce = useFunctionOnce(() =>
-    startTransaction(PERFORMANCE_HOME_CREATION)
-  )
-  startPerfHomeCreationOnce()
-  startPerfHomeLoadingOnce()
-
   const { params } = useRoute<UseRouteType<'Home'>>()
   const { modules, id } = useHomepageData() || {}
   const { setPlace, hasGeolocPosition, selectedLocationMode, setSelectedLocationMode } =

src/features/home/pages/ThematicHome.tsx

@@ -18,15 +18,14 @@ import { DefaultThematicHomeHeader } from 'features/home/components/headers/Defa
 import { Introduction } from 'features/home/components/headers/highlightThematic/Introduction'
 import { HighlightThematicHomeHeader } from 'features/home/components/headers/HighlightThematicHomeHeader'
 import { ThematicHomeHeader } from 'features/home/components/headers/ThematicHomeHeader'
-import { PERFORMANCE_HOME_CREATION, PERFORMANCE_HOME_LOADING } from 'features/home/constants'
 import { GenericHome } from 'features/home/pages/GenericHome'
 import { ThematicHeader, ThematicHeaderType } from 'features/home/types'
 import { UseRouteType } from 'features/navigation/RootNavigator/types'
 import { analytics } from 'libs/analytics'
-import useFunctionOnce from 'libs/hooks/useFunctionOnce'
 import { useLocation } from 'libs/location/LocationWrapper'
 import { LocationMode } from 'libs/location/types'
-import { startTransaction } from 'shared/performance/transactions'
+import { UsePerformanceProfilerOptions } from 'shared/performance/types'
+import { useFirebasePerformanceProfiler } from 'shared/performance/useFirebasePerformanceProfiler'
 import { useOpacityTransition } from 'ui/animations/helpers/useOpacityTransition'
 import { getSpacing, Spacer } from 'ui/theme'
 
@@ -100,13 +99,8 @@ const ThematicHeaderWithGeolocBanner: FunctionComponent<{
 )
 
 export const ThematicHome: FunctionComponent = () => {
-  const startPerfHomeLoadingOnce = useFunctionOnce(() => startTransaction(PERFORMANCE_HOME_LOADING))
-  const startPerfHomeCreationOnce = useFunctionOnce(() =>
-    startTransaction(PERFORMANCE_HOME_CREATION)
-  )
-  startPerfHomeCreationOnce()
-  startPerfHomeLoadingOnce()
-  const { params } = useRoute<UseRouteType<'ThematicHome'>>()
+  const route = useRoute<UseRouteType<'ThematicHome'>>()
+  const { params } = route
   const isFromDeeplink = params.from === 'deeplink'
   const { modules, id, thematicHeader } = useHomepageData(params.homeId) || {}
   const {
@@ -158,6 +152,8 @@ export const ThematicHome: FunctionComponent = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasGeolocPosition, isFromDeeplink])
 
+  useFirebasePerformanceProfiler('ThematicHome', { route } as UsePerformanceProfilerOptions)
+
   return (
     <Container>
       <GenericHome

src/libs/monitoring/__mocks__/services.ts

@@ -7,7 +7,6 @@ export const eventMonitoring: typeof actualErrorMonitoring = {
   configureScope: jest.fn(),
   setExtras: jest.fn(),
   setUser: jest.fn(),
-  startTransaction: jest.fn().mockReturnValue({ name: 'transaction1' }),
   withProfiler: jest.fn(),
   wrap: jest.fn(),
 }

src/libs/monitoring/sentry.ts

@@ -5,7 +5,6 @@ export {
   init,
   setUser,
   setExtras,
-  startTransaction,
   withProfiler,
   wrap,
   getCurrentHub,

src/libs/monitoring/sentry.web.ts

@@ -5,7 +5,6 @@ export {
   init,
   setUser,
   setExtras,
-  startTransaction,
   withProfiler,
   wrap,
   getCurrentHub,

src/libs/monitoring/services.ts

@@ -11,7 +11,6 @@ import {
   init,
   setExtras,
   setUser,
-  startTransaction,
   withProfiler,
   wrap,
 } from './sentry'
@@ -23,7 +22,6 @@ type EventMonitoring = {
   init: ({ enabled }: { enabled: boolean }) => Promise<void>
   setUser: (user: User | Record<string, unknown> | null) => void
   setExtras: typeof setExtras
-  startTransaction: typeof startTransaction
   withProfiler: typeof withProfiler
   wrap: typeof wrap
 }
@@ -34,7 +32,6 @@ export const eventMonitoring: EventMonitoring = {
   configureScope: configureScope,
   setUser: setUser,
   setExtras: setExtras,
-  startTransaction: startTransaction,
   withProfiler: withProfiler,
   wrap: wrap,
   async init({ enabled } = { enabled: true }) {

src/shared/performance/appStartTimeStore.test.ts

@@ -0,0 +1,26 @@
+import { createAppStartTimeStore, useAppStartTimeStore } from 'shared/performance/appStartTimeStore'
+
+class MyDate extends Date {
+  constructor(date: string) {
+    super(date)
+  }
+  now = () => 1732384186972
+}
+
+describe('AppStartTimeStore', () => {
+  test('When start time the start time is correct', () => {
+    const t = MyDate.now()
+    const useTestAppStartTimeStore = createAppStartTimeStore(MyDate.now)
+    const { appStartTime } = useTestAppStartTimeStore.getState()
+
+    expect(appStartTime).toBe(t)
+  })
+
+  test('When start time is set it is in the store', () => {
+    const { setAppStartTime, appStartTime } = useAppStartTimeStore.getState()
+    const newTime = appStartTime + 1000
+    setAppStartTime(newTime)
+
+    expect(useAppStartTimeStore.getState().appStartTime).toBe(newTime)
+  })
+})