Merge pull request #270 from middlewarehq/GROW-1467

Add SomethingWentWrong component and first team load done flag

Author: shivam-bit

web-server/pages/api/internal/team/[team_id]/dora_metrics.ts

@@ -45,7 +45,7 @@ endpoint.handle.GET(getSchema, async (req, res) => {
     team_id: teamId,
     from_date: rawFromDate,
     to_date: rawToDate,
-    branches,
+    branches
   } = req.payload;
 
   const teamProdBranchesMap =

web-server/src/components/SomethingWentWrong/SomethingWentWrong.tsx

@@ -0,0 +1,120 @@
+import { Button, Card, Link } from '@mui/material';
+import { useRouter } from 'next/router';
+import { FC, useEffect, useMemo } from 'react';
+
+import { track } from '@/constants/events';
+import { useAuth } from '@/hooks/useAuth';
+
+import Error from './error.svg';
+
+import errPattern from '../ErrorBoundaryFallback/err-pattern.png';
+import { FlexBox } from '../FlexBox';
+import { Line } from '../Text';
+
+const helpdeskPrefill = (error: string, details: string) => {
+  if (typeof window === 'undefined') return;
+  // @ts-ignore
+  window.FreshworksWidget?.('prefill', 'ticketForm', {
+    subject: error,
+    description: details
+  });
+};
+
+export const useHelpdeskPrefill = (error: string, details: string) => {
+  useEffect(() => {
+    helpdeskPrefill(error, details);
+  }, [details, error]);
+};
+
+export const useDebug = (
+  error = 'Something went wrong',
+  desc = '<<Enter error description>>'
+) => {
+  const router = useRouter();
+  const { org } = useAuth();
+
+  const debugData = useMemo(
+    () =>
+      Object.entries({
+        Page: router.asPath,
+        'Current Org': `${org?.name} - ${org?.domain}`,
+        'Current Org ID': `${org?.id}`,
+        'Time of error': new Date().toString(),
+        Environment: process.env.NEXT_PUBLIC_APP_ENVIRONMENT
+      })
+        .map(([key, value]) => `${key}: ${value}`)
+        .join('\n'),
+    [router.asPath, org?.name, org?.domain, org?.id]
+  );
+
+  const details = useMemo(
+    () =>
+      `${
+        typeof desc === 'string' ? desc : JSON.stringify(desc)
+      }\n\n\nDEBUG DATA:\n\n${debugData}`,
+    [debugData, desc]
+  );
+
+  useHelpdeskPrefill(error, details);
+
+  const mailtoLink = getMailtoLink(error, details.replaceAll('\n', '%0A'));
+
+  return { details, debugData, mailtoLink };
+};
+
+export const SomethingWentWrong: FC<{ error?: string; desc?: string }> = ({
+  error = 'Something went wrong',
+  desc = '<<Enter error description>>',
+  children
+}) => {
+  const { mailtoLink } = useDebug(error, desc);
+
+  useEffect(() => {
+    track('SOMETHING_WENT_WRONG', { meta: { error, desc } });
+  }, [desc, error]);
+
+  return (
+    <Card
+      component={Card}
+      sx={{
+        backgroundImage: `url(${errPattern})`,
+        backgroundSize: '250px',
+        position: 'relative',
+        maxWidth: '500px',
+        m: '2px'
+      }}
+    >
+      <FlexBox bgfy bgcolor="#0003" sx={{ backdropFilter: 'blur(2px)' }} />
+      <FlexBox relative col centered p={4} gap1 textAlign="center">
+        <Error width="300px" />
+        <Line huge bold mt={1} white>
+          {error}
+        </Line>
+        <Line>{desc ?? "We'll fix it shortly"}</Line>
+        {children ? (
+          <FlexBox col p={1}>
+            {children}
+          </FlexBox>
+        ) : null}
+        <Line bigish semibold mt={3}>
+          Feel free to reach out to us
+        </Line>
+        <Button component={Link} href={mailtoLink} size="small" target="_blank">
+          Click here to send an email
+        </Button>
+        <Line mt={-1}>or</Line>
+        <Button
+          onClick={() => window.location.reload()}
+          size="small"
+          color="secondary"
+          variant="outlined"
+        >
+          Click here to reload
+        </Button>
+      </FlexBox>
+    </Card>
+  );
+};
+
+export const getMailtoLink = (subject: string, body: string) =>
+  `mailto:[email protected][email protected],[email protected]&subject=${subject}&body=<Add details/screenshots here>%0A${body}`;

web-server/src/content/DoraMetrics/DoraMetricsBody.tsx

@@ -17,7 +17,7 @@ import {
   useSingleTeamConfig,
   useStateBranchConfig
 } from '@/hooks/useStateTeamConfig';
-import { fetchTeamDoraMetrics } from '@/slices/dora_metrics';
+import { doraMetricsSlice, fetchTeamDoraMetrics } from '@/slices/dora_metrics';
 import { useDispatch, useSelector } from '@/store';
 import { ActiveBranchMode } from '@/types/resources';
 import { getRandomLoadMsg } from '@/utils/loading-messages';
@@ -27,6 +27,7 @@ import { ChangeFailureRateCard } from './DoraCards/ChangeFailureRateCard';
 import { ChangeTimeCard } from './DoraCards/ChangeTimeCard';
 import { MeanTimeToRestoreCard } from './DoraCards/MeanTimeToRestoreCard';
 import { WeeklyDeliveryVolumeCard } from './DoraCards/WeeklyDeliveryVolumeCard';
+import { SomethingWentWrong } from '@/components/SomethingWentWrong/SomethingWentWrong';
 
 export const DoraMetricsBody = () => {
   const dispatch = useDispatch();
@@ -39,7 +40,12 @@ export const DoraMetricsBody = () => {
   const isLoading = useSelector(
     (s) => s.doraMetrics.requests?.metrics_summary === FetchState.REQUEST
   );
+  const isErrored = useSelector(
+    (s) => s.doraMetrics.requests?.metrics_summary === FetchState.FAILURE
+  );
+
   const firstLoadDone = useSelector((s) => s.doraMetrics.firstLoadDone);
+
   const activeBranchMode = useSelector((s) => s.app.branchMode);
 
   const isTeamInsightsEmpty = useSelector(
@@ -85,8 +91,14 @@ export const DoraMetricsBody = () => {
 
   const { isFreshOrg } = useFreshOrgCalculator();
 
+  if (isErrored)
+    return (
+      <SomethingWentWrong
+        error="Dora metrics data could not be loaded"
+        desc="Hey there! Sorry about that, the intern that was supposed to deliver your metrics got lost on the way"
+      />
+    );
   if (!firstLoadDone) return <MiniLoader label={getRandomLoadMsg()} />;
-
   if (isTeamInsightsEmpty)
     if (isFreshOrg)
       return (

web-server/src/slices/dora_metrics.ts

@@ -67,6 +67,9 @@ export const doraMetricsSlice = createSlice({
       state.deploymentPrs = [];
       state.team_deployments = initialState.team_deployments;
     },
+    setFirstTeamLoadDone(state: State) {
+      state.firstLoadDone = true;
+    },
     toggleActiveModeValue(
       state: State,
       action: PayloadAction<ChangeTimeModes>