feat(manager-react-components): error component send tracking

ref: MANAGER-14535 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Jan 15, 2025 · d467824 · d467824
1 parent 33deca8
commit d467824
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/manager-react-components/src/components/templates/error/error.component.tsx b/packages/manager-react-components/src/components/templates/error/error.component.tsx
@@ -5,20 +5,48 @@ import {
   ODS_MESSAGE_COLOR,
   ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
+import { PageType } from '@ovh-ux/manager-react-shell-client';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { ErrorMessage, TRACKING_LABELS } from './error.types';
 import './translations/translations';
 
 import { ErrorBannerProps } from './error.types';
 import { useTranslation } from 'react-i18next';
 
 import ErrorImg from '../../../../public/assets/error-banner-oops.png';
 
+function getTrackingTypology(error: ErrorMessage) {
+  if (error?.status && Math.floor(error.status / 100) === 4) {
+    return [401, 403].includes(error.status)
+      ? TRACKING_LABELS.UNAUTHORIZED
+      : TRACKING_LABELS.SERVICE_NOT_FOUND;
+  }
+  return TRACKING_LABELS.PAGE_LOAD;
+}
+
 export const ErrorBanner = ({
   error,
   onRedirectHome,
   onReloadPage,
   labelTracking,
 }: ErrorBannerProps) => {
   const { t } = useTranslation('error');
+  const { shell } = React.useContext(ShellContext);
+  const env = shell?.environment?.getEnvironment();
+
+  React.useEffect(() => {
+    env?.then((response) => {
+      const { applicationName } = response;
+      const name = `errors::${getTrackingTypology(error)}::${applicationName}`;
+      // to confirm with the tracking team
+      shell?.tracking?.trackPage({
+        name,
+        level2: '81',
+        type: 'navigation',
+        page_category: PageType.bannerError,
+      });
+    });
+  }, []);
 
   return (
     <div className="mx-auto  w-full h-full max-w-[600px] overflow-hidden mx-autogrid p-5">

diff --git a/packages/manager-react-components/src/components/templates/error/error.types.tsx b/packages/manager-react-components/src/components/templates/error/error.types.tsx
@@ -4,9 +4,9 @@ export interface ErrorObject {
   headers: any;
 }
 export interface ErrorMessage {
-  message: string;
-  status: number;
-  detail: any;
+  message?: string;
+  status?: number;
+  detail?: any;
 }
 export const TRACKING_LABELS = {
   SERVICE_NOT_FOUND: 'service_not_found',