log page view events

lib/mixpanel/getPageType.ts

+import type { Route } from 'nextjs-routes';
+
+const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
+  '/': 'Homepage',
+  '/txs': 'Transactions',
+  '/tx/[hash]': 'Transaction details',
+  '/blocks': 'Blocks',
+  '/block/[height]': 'Block details',
+  '/accounts': 'Top accounts',
+  '/address/[hash]': 'Address details',
+  '/verified-contracts': 'Verified contracts',
+  '/address/[hash]/contract_verification': 'Contract verification',
+  '/tokens': 'Tokens',
+  '/token/[hash]': 'Token details',
+  '/token/[hash]/instance/[id]': 'Token Instance',
+  '/apps': 'Apps',
+  '/apps/[id]': 'App',
+  '/stats': 'Stats',
+  '/api-docs': 'REST API',
+  '/graphiql': 'GraphQL',
+  '/search-results': 'Search results',
+  '/auth/profile': 'Profile',
+  '/account/watchlist': 'Watchlist',
+  '/account/api_key': 'API keys',
+  '/account/custom_abi': 'Custom ABI',
+  '/account/public_tags_request': 'Public tags',
+  '/account/tag_address': 'Private tags',
+  '/withdrawals': 'Withdrawals',
+  '/visualize/sol2uml': 'Solidity UML diagram',
+  '/csv-export': 'Export data to CSV file',
+  '/l2-deposits': 'Deposits (L1 > L2)',
+  '/l2-output-roots': 'Output roots',
+  '/l2-txn-batches': 'Tx batches (L2 blocks)',
+  '/l2-withdrawals': 'Withdrawals (L2 > L1)',
+
+  // service routes, added only to make typescript happy
+  '/login': 'Login',
+  '/api/media-type': 'Node API: Media type',
+  '/api/proxy': 'Node API: Proxy',
+  '/api/csrf': 'Node API: CSRF token',
+  '/auth/auth0': 'Auth',
+  '/graph': 'Graph',
+};
+
+export default function getPageType(pathname: Route['pathname']) {
+  return PAGE_TYPE_DICT[pathname] || 'Unknown page';
+}

lib/mixpanel/getTabName.ts

+import _capitalize from 'lodash/capitalize';
+
+export default function getTabName(tab: string) {
+  return tab !== '' ? _capitalize(tab.replaceAll('_', ' ')) : 'Default';
+}

lib/mixpanel/index.ts

+import useInit from './useInit';
+import useLogPageView from './useLogPageView';
+
+export {
+  useInit,
+  useLogPageView,
+};

lib/hooks/useMixpanelInit.tsx → lib/mixpanel/useInit.tsx

+import type { Config } from 'mixpanel-browser';
 import mixpanel from 'mixpanel-browser';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
 
 export default function useMixpanelInit() {
+  const [ isInited, setIsInited ] = React.useState(false);
+
   React.useEffect(() => {
     if (appConfig.mixpanel.projectToken) {
-      const config = {
+      const config: Partial<Config> = {
         debug: appConfig.isDev,
+        test: appConfig.isDev,
       };
       mixpanel.init(appConfig.mixpanel.projectToken, config);
+      setIsInited(true);
     }
   }, []);
+
+  return isInited;
 }

lib/mixpanel/useLogPageView.tsx

+import mixpanel from 'mixpanel-browser';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import appConfig from 'configs/app/config';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import getPageType from './getPageType';
+import getTabName from './getTabName';
+
+export default function useLogPageView(isInited: boolean) {
+  const router = useRouter();
+
+  const pathname = router.pathname;
+  const tab = getQueryParamString(router.query.tab);
+
+  React.useEffect(() => {
+    if (!appConfig.mixpanel.projectToken || !isInited) {
+      return;
+    }
+
+    mixpanel.track('Page view', {
+      page_type: getPageType(pathname),
+      tab: getTabName(tab),
+    });
+  }, [ isInited, pathname, tab ]);
+}

pages/_app.tsx

@@ -11,7 +11,6 @@ import { Chakra } from 'lib/Chakra';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import getErrorStatusCode from 'lib/errors/getErrorStatusCode';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
-import useMixpanelInit from 'lib/hooks/useMixpanelInit';
 import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
 import AppError from 'ui/shared/AppError/AppError';
@@ -24,8 +23,6 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   useConfigSentry();
 
-  useMixpanelInit();
-
   const [ queryClient ] = useState(() => new QueryClient({
     defaultOptions: {
       queries: {

ui/shared/Page/Page.tsx

@@ -5,6 +5,7 @@ import getErrorStatusCode from 'lib/errors/getErrorStatusCode';
 import getResourceErrorPayload from 'lib/errors/getResourceErrorPayload';
 import useAdblockDetect from 'lib/hooks/useAdblockDetect';
 import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
+import * as mixpanel from 'lib/mixpanel';
 import AppError from 'ui/shared/AppError/AppError';
 import AppErrorBlockConsensus from 'ui/shared/AppError/AppErrorBlockConsensus';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
@@ -31,6 +32,9 @@ const Page = ({
 
   useAdblockDetect();
 
+  const isMixpanelInited = mixpanel.useInit();
+  mixpanel.useLogPageView(isMixpanelInited);
+
   const renderErrorScreen = React.useCallback((error?: Error) => {
     const statusCode = getErrorStatusCode(error) || 500;
     const resourceErrorPayload = getResourceErrorPayload(error);