Fix types

Author: kshmidt-digma

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/SpanFrameGroup/typeGuards.ts

@@ -3,6 +3,6 @@ import { isObject } from "../../../../../../typeGuards/isObject";
 import { isString } from "../../../../../../typeGuards/isString";
 
 export const isServiceInfoWithName = (
-  x: ErrorOriginService | null
+  x: ErrorOriginService
 ): x is Omit<ErrorOriginService, "serviceName"> & { serviceName: string } =>
   isObject(x) && isString(x.serviceName);

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/FlowStack/index.tsx

@@ -2,10 +2,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import type { DataFetcherConfiguration } from "../../../../../hooks/useFetchData";
 import { useFetchData } from "../../../../../hooks/useFetchData";
-import type {
-  ErrorFlowFrame,
-  ErrorFlowFrameStack
-} from "../../../../../redux/services/types";
+import type { ErrorFlowFrame } from "../../../../../redux/services/types";
 import { useErrorsSelector } from "../../../../../store/errors/useErrorsSelector";
 import { useStore } from "../../../../../store/useStore";
 import { isNull } from "../../../../../typeGuards/isNull";
@@ -42,15 +39,12 @@ export const FlowStack = ({ data }: FlowStackProps) => {
   const { setErrorDetailsWorkspaceItemsOnly } = useStore.getState();
   const stacksContainerRef = useRef<HTMLDivElement>(null);
 
-  const frameStacks = useMemo(
-    () => data.frameStacks.filter(Boolean) as ErrorFlowFrameStack[],
-    [data]
-  );
+  const frameStacks = useMemo(() => data.frameStacks ?? [], [data]);
 
   const filesURIsPayload = useMemo(
     () => ({
       codeObjectIds: frameStacks
-        .map((stack) => stack.frames.map((x) => x?.codeObjectId))
+        .map((stack) => stack.frames?.map((x) => x?.codeObjectId) ?? [])
         .flat()
         .filter(isString)
     }),
@@ -85,9 +79,10 @@ export const FlowStack = ({ data }: FlowStackProps) => {
         payload: {
           traceId,
           spanName:
-            frameStacks[0].frames[0]?.spanName ??
+            frameStacks[0].frames?.[0]?.spanName ??
             `Sample trace for error ${exceptionType ?? ""}`.trim(),
-          spanCodeObjectId: frameStacks[0].frames[0]?.codeObjectId ?? undefined
+          spanCodeObjectId:
+            frameStacks[0].frames?.[0]?.codeObjectId ?? undefined
         }
       });
     }
@@ -133,7 +128,7 @@ export const FlowStack = ({ data }: FlowStackProps) => {
     <s.Container>
       <s.StacksContainer ref={stacksContainerRef}>
         {frameStacks.map((x) => {
-          const frames = x.frames.filter(Boolean) as ErrorFlowFrame[];
+          const frames = x.frames ?? [];
           const visibleFrames = showWorkspaceOnly
             ? frames.filter((x) => x.codeObjectId && filesURIs[x.codeObjectId])
             : frames;

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/index.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { usePrevious } from "../../../../hooks/usePrevious";
-import { isNull } from "../../../../typeGuards/isNull";
 import { isNumber } from "../../../../typeGuards/isNumber";
 import { isString } from "../../../../typeGuards/isString";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
@@ -31,20 +30,21 @@ export const ErrorDetailsCardContent = ({
     }
   }, [previousId, id]);
 
-  const services = data.originServices
-    .filter(isServiceInfoWithName)
-    .map((x) => x.serviceName);
+  const services =
+    data.originServices
+      ?.filter(isServiceInfoWithName)
+      .map((x) => x.serviceName) ?? [];
   const startedTooltip = new Date(data.firstOccurenceTime).toString();
   const startedString = formatTimeDistance(data.firstOccurenceTime);
   const lastTooltip = new Date(data.lastOccurenceTime).toString();
   const lastString = formatTimeDistance(data.lastOccurenceTime);
   const avgPerDay = data.dayAvg;
 
-  const flows = data.errors.filter((x) => !isNull(x));
+  const flows = data.errors ?? [];
   const currentFlow = flows[currentFlowStack];
 
   const isPreviousFlowButtonDisabled = currentFlowStack === 0;
-  const isNextFlowButtonDisabled = currentFlowStack === flows.length - 1;
+  const isNextFlowButtonDisabled = currentFlowStack >= flows.length - 1;
 
   const handleFlowPaginationButtonClick = (flowNumber: number) => () => {
     sendUserActionTrackingEvent(trackingEvents.FLOW_PAGINATION_BUTTON_CLICKED);
@@ -99,8 +99,10 @@ export const ErrorDetailsCardContent = ({
           <span>
             Flow Stacks{" "}
             <s.FlowsCountNumber>
-              <s.CurrentFlowNumber>{currentFlowStack + 1}</s.CurrentFlowNumber>/
-              {data.errors.length}
+              <s.CurrentFlowNumber>
+                {flows.length > 0 ? currentFlowStack + 1 : 0}
+              </s.CurrentFlowNumber>
+              /{flows.length}
             </s.FlowsCountNumber>
           </span>
           <s.IconButton
@@ -114,7 +116,9 @@ export const ErrorDetailsCardContent = ({
             />
           </s.IconButton>
         </s.FlowPagination>
-        <FlowStack data={currentFlow} key={currentFlowStack} />
+        {flows.length > 0 && (
+          <FlowStack data={currentFlow} key={currentFlowStack} />
+        )}
       </s.FlowsContainer>
     </s.Container>
   );

src/redux/services/types.ts

@@ -812,7 +812,7 @@ export interface ErrorFlowFrame {
   lineNumber: number;
   executedCode: string | null;
   codeObjectId: string | null;
-  parameters: (ParamStats | null)[]; // TODO: check if this is correct
+  parameters: ParamStats[] | null;
   repeat: number;
   spanName: string | null;
   spanKind: string | null;
@@ -823,12 +823,12 @@ export interface ErrorFlowFrame {
 
 export interface ErrorFlowFrameStack {
   exceptionType: string | null;
-  frames: (ErrorFlowFrame | null)[]; // TODO: check if this is correct
+  frames: ErrorFlowFrame[] | null;
   exceptionMessage: string | null;
 }
 
 export interface ErrorFlowInfo {
-  frameStacks: (ErrorFlowFrameStack | null)[]; // TODO: check if this is correct
+  frameStacks: ErrorFlowFrameStack[] | null;
   stackTrace: string | null;
   lastInstanceCommitId: string | null;
   latestTraceId: string | null;
@@ -846,8 +846,8 @@ export interface GetErrorResponse {
   lastOccurenceTime: string;
   dayAvg: number | null;
   scoreInfo: ScoreInfo;
-  errors: (ErrorFlowInfo | null)[]; // TODO: check if this is correct
-  originServices: (ErrorOriginService | null)[]; // TODO: check if this is correct
+  errors: ErrorFlowInfo[] | null;
+  originServices: ErrorOriginService[] | null;
 }
 
 export enum GlobalErrorsSortingCriterion {