Get span errors via REST API

Author: kshmidt-digma

eslint.config.mjs

@@ -17,7 +17,7 @@ export default tseslint.config(
       parserOptions: {
         project: "./tsconfig.eslint.json",
         tsconfigRootDir: import.meta.dirname,
-        ecmaVersion: 2022
+        ecmaVersion: 2023
       }
     },
     rules: {

src/components/Errors/Errors.stories.tsx

@@ -2,8 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Errors } from ".";
 import { ConfigContext, initialState } from "../common/App/ConfigContext";
 import type { ConfigContextData } from "../common/App/types";
-import { actions } from "./actions";
-import { mockedErrorsData } from "./mockData";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const mockedConfig: ConfigContextData = {
@@ -48,34 +46,10 @@ export default meta;
 type Story = StoryObj<typeof Errors>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const ErrorsList: Story = {
-  play: () => {
-    window.setTimeout(() => {
-      window.postMessage({
-        type: "digma",
-        action: actions.SET_ERRORS_DATA,
-        payload: mockedErrorsData
-      });
-    }, 1000);
-  }
-};
+export const ErrorsList: Story = {};
 
 export const ErrorDetails: Story = {
   args: {
     errorId: "1"
   }
 };
-
-export const Empty: Story = {
-  play: () => {
-    window.setTimeout(() => {
-      window.postMessage({
-        type: "digma",
-        action: actions.SET_ERRORS_DATA,
-        payload: {
-          errors: []
-        }
-      });
-    }, 1000);
-  }
-};

src/components/Errors/ErrorsList/index.tsx

@@ -1,46 +1,43 @@
 import { useMemo } from "react";
-import type { DataFetcherConfiguration } from "../../../hooks/useFetchData";
-import { useFetchData } from "../../../hooks/useFetchData";
+import { useGetErrorsQuery } from "../../../redux/services/digma";
+import type { GetErrorsPayload } from "../../../redux/services/types";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { isString } from "../../../typeGuards/isString";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { EmptyState } from "../EmptyState";
 import { ErrorCard } from "../ErrorCard";
-import { actions } from "../actions";
 import { trackingEvents } from "../tracking";
-import type { GetErrorsDataPayload, SetErrorsDataPayload } from "../types";
 import * as s from "./styles";
 import type { ErrorsListProps } from "./types";
 
-const dataFetcherConfiguration: DataFetcherConfiguration = {
-  requestAction: actions.GET_ERRORS_DATA,
-  responseAction: actions.SET_ERRORS_DATA,
-  refreshWithInterval: true,
-  refreshOnPayloadChange: true
-};
+const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
 
 export const ErrorsList = ({
   onErrorSelect,
   spanCodeObjectId,
   methodId
 }: ErrorsListProps) => {
-  const payload = useMemo(
+  const { environment } = useConfigSelector();
+
+  const payload: GetErrorsPayload = useMemo(
     () => ({
-      spanCodeObjectId,
-      methodId
+      codeObjectId: [spanCodeObjectId, methodId].filter(isString),
+      environment: environment?.id ?? ""
     }),
-    [spanCodeObjectId, methodId]
+    [spanCodeObjectId, methodId, environment?.id]
   );
 
-  const { data } = useFetchData<GetErrorsDataPayload, SetErrorsDataPayload>(
-    dataFetcherConfiguration,
-    payload
-  );
+  const { data } = useGetErrorsQuery(payload, {
+    pollingInterval: REFRESH_INTERVAL,
+    skip: !environment?.id
+  });
 
   if (!data) {
     // TODO: replace with skeletons
     return <EmptyState preset={"loading"} />;
   }
 
-  if (data.errors.length === 0) {
+  if (data.length === 0) {
     return <EmptyState preset={"noData"} />;
   }
 
@@ -51,7 +48,7 @@ export const ErrorsList = ({
 
   return (
     <s.Container>
-      {data.errors.map((x) => (
+      {data.map((x) => (
         <ErrorCard key={x.uid} data={x} onClick={handleErrorCardClick} />
       ))}
     </s.Container>

src/components/Errors/actions.ts

@@ -3,8 +3,6 @@ import { addPrefix } from "../../utils/addPrefix";
 const ACTION_PREFIX = "ERRORS";
 
 export const actions = addPrefix(ACTION_PREFIX, {
-  GET_ERRORS_DATA: "GET_ERRORS_DATA", // TODO: refactor to HTTP API call
-  SET_ERRORS_DATA: "SET_ERRORS_DATA",
   GO_TO_TRACE: "GO_TO_TRACE",
   OPEN_RAW_ERROR_STACK_TRACE_IN_EDITOR: "OPEN_RAW_ERROR_STACK_TRACE_IN_EDITOR",
   GO_TO_CODE_LOCATION: "GO_TO_CODE_LOCATION",

tsconfig.json

@@ -18,7 +18,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "ES2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ES2023",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react-jsx",                                  /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */