Refactor current usage of Amplitude (browser)

.github/workflows/deploy-vercel-production.yml

@@ -84,8 +84,8 @@ jobs:
         with:
           node-version: '14.x' # Use the same node.js version as the one Vercel's uses (currently node14.x)
 
-  # Starts a Vercel deployment, using the production configuration file of the default institution
-  # The default institution is the one defined in the `vercel.json` file (which is a symlink to the actual file)
+  # Starts a Vercel deployment, using the production configuration file of the default customer
+  # The default customer is the one defined in the `vercel.json` file (which is a symlink to the actual file)
   # N.B: It's Vercel that will perform the actual deployment
   start-production-deployment:
     name: Starts Vercel deployment (production) (Ubuntu 18.04)

.github/workflows/deploy-vercel-staging.yml

@@ -84,8 +84,8 @@ jobs:
         with:
           node-version: '14.x' # Use the same node.js version as the one Vercel's uses (currently node14.x)
 
-  # Starts a Vercel deployment, using the staging configuration file of the default institution
-  # The default institution is the one defined in the `vercel.json` file (which is a symlink to the actual file)
+  # Starts a Vercel deployment, using the staging configuration file of the default customer
+  # The default customer is the one defined in the `vercel.json` file (which is a symlink to the actual file)
   # N.B: It's Vercel that will perform the actual deployment
   start-staging-deployment:
     name: Starts Vercel deployment (staging) (Ubuntu 18.04)

src/app/components/BrowserPageBootstrap.tsx

@@ -14,7 +14,10 @@ import {
   getClientNetworkConnectionType,
   getClientNetworkInformationSpeed,
 } from '@/modules/core/networkInformation/networkInformation';
-import { configureSentryUser } from '@/modules/core/sentry/sentry';
+import {
+  configureSentryBrowserMetadata,
+  configureSentryUserMetadata,
+} from '@/modules/core/sentry/sentry';
 import { cypressContext } from '@/modules/core/testing/contexts/cypressContext';
 import {
   CYPRESS_WINDOW_NS,
@@ -91,7 +94,9 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element =>
   const networkConnectionType: ClientNetworkConnectionType = getClientNetworkConnectionType();
 
   // Configure Sentry user and track navigation through breadcrumb
-  configureSentryUser(userSession);
+  configureSentryUserMetadata(userSession);
+  configureSentryBrowserMetadata(networkSpeed, networkConnectionType, isInIframe, iframeReferrer);
+
   Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs
     category: fileLabel,
     message: `Rendering ${fileLabel}`,

src/app/components/ServerPageBootstrap.tsx

@@ -1,7 +1,7 @@
 import { MultiversalPageProps } from '@/layouts/core/types/MultiversalPageProps';
 import { OnlyServerPageProps } from '@/layouts/core/types/OnlyServerPageProps';
 import { createLogger } from '@/modules/core/logging/logger';
-import { configureSentryUser } from '@/modules/core/sentry/sentry';
+import { configureSentryUserMetadata } from '@/modules/core/sentry/sentry';
 import { userSessionContext } from '@/modules/core/userSession/userSessionContext';
 import * as Sentry from '@sentry/node';
 import React from 'react';
@@ -35,7 +35,7 @@ const ServerPageBootstrap = (props: ServerPageBootstrapProps): JSX.Element => {
   } = pageProps;
 
   // Configure Sentry user and track navigation through breadcrumb
-  configureSentryUser(userSession);
+  configureSentryUserMetadata(userSession);
   Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs
     category: fileLabel,
     message: `Rendering ${fileLabel}`,

src/layouts/demo/components/DemoNav.tsx

@@ -1,5 +1,6 @@
 import Tooltip from '@/components/dataDisplay/Tooltip';
 import AirtableAsset from '@/modules/core/airtable/components/AirtableAsset';
+import { AMPLITUDE_ACTIONS } from '@/modules/core/amplitude/events';
 import { LogEvent } from '@/modules/core/amplitude/types/Amplitude';
 import { AirtableAttachment } from '@/modules/core/data/types/AirtableAttachment';
 import { Asset } from '@/modules/core/data/types/Asset';
@@ -284,7 +285,9 @@ const DemoNav: React.FunctionComponent<Props> = () => {
                       target={'_blank'}
                       rel={'noopener'}
                       onClick={(): void => {
-                        logEvent('open-github-doc');
+                        logEvent('open-github-doc', {
+                          action: AMPLITUDE_ACTIONS.CLICK,
+                        });
                       }}
                     >
                       <FontAwesomeIcon icon={['fas', 'book']} />
@@ -307,7 +310,9 @@ const DemoNav: React.FunctionComponent<Props> = () => {
                       target={'_blank'}
                       rel={'noopener'}
                       onClick={(): void => {
-                        logEvent('open-github');
+                        logEvent('open-github', {
+                          action: AMPLITUDE_ACTIONS.CLICK,
+                        });
                       }}
                       title={''}
                     >
@@ -338,7 +343,9 @@ const DemoNav: React.FunctionComponent<Props> = () => {
                       target={'_blank'}
                       rel={'noopener'}
                       onClick={(): void => {
-                        logEvent('open-admin-site');
+                        logEvent('open-admin-site', {
+                          action: AMPLITUDE_ACTIONS.CLICK,
+                        });
                       }}
                     >
                       <FontAwesomeIcon icon={['fas', 'user-cog']} />

src/layouts/demo/components/IntroductionSection.tsx

@@ -1,4 +1,5 @@
 import ExternalLink from '@/components/dataDisplay/ExternalLink';
+import { AMPLITUDE_ACTIONS } from '@/modules/core/amplitude/events';
 import { LogEvent } from '@/modules/core/amplitude/types/Amplitude';
 import I18nLink from '@/modules/core/i18n/components/I18nLink';
 import { css } from '@emotion/react';
@@ -41,14 +42,18 @@ const IntroductionSection: React.FunctionComponent<Props> = (props): JSX.Element
 
       <ExternalLink
         href={'https://unlyed.github.io/next-right-now/concepts/presets'}
-        onClick={(): number => logEvent('open-what-is-preset-doc')}
+        onClick={(): number => logEvent('open-what-is-preset-doc', {
+          action: AMPLITUDE_ACTIONS.CLICK,
+        })}
       >
         What is a preset?
       </ExternalLink>
       &nbsp;-&nbsp;
       <ExternalLink
         href={'https://unlyed.github.io/next-right-now/getting-started/select-preset'}
-        onClick={(): number => logEvent('open-see-all-presets-doc')}
+        onClick={(): number => logEvent('open-see-all-presets-doc', {
+          action: AMPLITUDE_ACTIONS.CLICK,
+        })}
       >
         See all presets
       </ExternalLink>

src/layouts/public/pagePublicTemplateSSG.tsx

@@ -6,7 +6,7 @@ import {
   getPublicLayoutStaticPaths,
   getPublicLayoutStaticProps,
 } from '@/layouts/public/publicLayoutSSG';
-import { AMPLITUDE_PAGES } from '@/modules/core/amplitude/amplitude';
+import { AMPLITUDE_PAGES } from '@/modules/core/amplitude/events';
 import useCustomer from '@/modules/core/data/hooks/useCustomer';
 import { Customer } from '@/modules/core/data/types/Customer';
 import { createLogger } from '@/modules/core/logging/logger';

src/layouts/public/pagePublicTemplateSSR.tsx

@@ -7,7 +7,7 @@ import {
   getPublicLayoutServerSideProps,
   GetPublicLayoutServerSidePropsResults,
 } from '@/layouts/public/publicLayoutSSR';
-import { AMPLITUDE_PAGES } from '@/modules/core/amplitude/amplitude';
+import { AMPLITUDE_PAGES } from '@/modules/core/amplitude/events';
 import useCustomer from '@/modules/core/data/hooks/useCustomer';
 import { Customer } from '@/modules/core/data/types/Customer';
 import { createLogger } from '@/modules/core/logging/logger';