Added try-catch stratategy in common/tables

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added try catch strategy with ErrorOrchestrator service on FIM & SCA sections [#3417](https://github.com/wazuh/wazuh-kibana-app/pull/3417)
 - Added try-catch strategy in Configuration section [#3451](https://github.com/wazuh/wazuh-kibana-app/pull/3451)
 - Added try catch strategy with ErrorOrchestrator service on Components > Overview [#3442](https://github.com/wazuh/wazuh-kibana-app/pull/3442)
+- Added try-catch stratategy in common/tables [#3480](https://github.com/wazuh/wazuh-kibana-app/pull/3480)
 
 ### Changed
 

public/components/common/tables/components/export-table-csv.tsx

@@ -18,6 +18,9 @@ import {
 import { filtersToObject } from '../../../wz-search-bar/';
 import exportCsv from '../../../../react-services/wz-csv';
 import { getToasts }  from '../../../../kibana-services';
+import { UI_ERROR_SEVERITIES } from '../../../../react-services/error-orchestrator/types';
+import { UI_LOGGER_LEVELS } from '../../../../../common/constants';
+import { getErrorOrchestrator } from '../../../../react-services/common-services';
 
 export function ExportTableCsv({endpoint,totalItems,filters,title}){
 
@@ -42,7 +45,17 @@ export function ExportTableCsv({endpoint,totalItems,filters,title}){
         `vuls-${(title).toLowerCase()}`
       );
     } catch (error) {
-      showToast('danger', error, 3000);
+      const options = {
+        context: `${ExportTableCsv.name}.downloadCsv`,
+        level: UI_LOGGER_LEVELS.ERROR,
+        severity: UI_ERROR_SEVERITIES.BUSINESS,
+        error: {
+          error: error,
+          message: error.message || error,
+          title: `${error.name}: Error downloading csv`,
+        },
+      };
+      getErrorOrchestrator().handleError(options);
     }
   }
 

public/components/common/tables/table-default.tsx

@@ -12,6 +12,9 @@
 
 import React, { useState, useEffect } from 'react';
 import { EuiBasicTable } from '@elastic/eui';
+import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
+import { UI_LOGGER_LEVELS } from '../../../../common/constants';
+import { getErrorOrchestrator } from '../../../react-services/common-services';
 
 export function TableDeafult({
   onSearch,
@@ -65,6 +68,17 @@ export function TableDeafult({
       }catch(error){
         setItems([]);
         setTotalItems(0);
+        const options = {
+          context: `${TableDeafult.name}.useEffect`,
+          level: UI_LOGGER_LEVELS.ERROR,
+          severity: UI_ERROR_SEVERITIES.BUSINESS,
+          error: {
+            error: error,
+            message: error.message || error,
+            title: `${error.name}: Error fetching items`,
+          },
+        };
+        getErrorOrchestrator().handleError(options);
       }
       setLoading(false);
     })()

public/components/common/tables/table-with-search-bar.tsx

@@ -12,7 +12,10 @@
 
 import React, { useState, useEffect } from 'react';
 import { EuiBasicTable, EuiSpacer } from '@elastic/eui';
-import { WzSearchBar } from '../../wz-search-bar/'
+import { WzSearchBar } from '../../wz-search-bar/';
+import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
+import { UI_LOGGER_LEVELS } from '../../../../common/constants';
+import { getErrorOrchestrator } from '../../../react-services/common-services';
 
 export function TableWithSearchBar({
   onSearch,
@@ -27,83 +30,94 @@ export function TableWithSearchBar({
   tableProps = {},
   reload,
   ...rest
-})
-  {
-
+}) {
   const [loading, setLoading] = useState(false);
   const [items, setItems] = useState([]);
   const [totalItems, setTotalItems] = useState(0);
   const [filters, setFilters] = useState(rest.filters || []);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: tablePageSizeOptions[0]
+    pageSize: tablePageSizeOptions[0],
   });
 
   const [sorting, setSorting] = useState({
     sort: {
       field: tableInitialSortingField,
       direction: tableInitialSortingDirection,
-    }
+    },
   });
-  
-  function tableOnChange({ page = {}, sort = {} }){
+
+  function tableOnChange({ page = {}, sort = {} }) {
     const { index: pageIndex, size: pageSize } = page;
     const { field, direction } = sort;
     setPagination({
       pageIndex,
-      pageSize
+      pageSize,
     });
     setSorting({
       sort: {
         field,
         direction,
       },
     });
-  };
-  
+  }
+
   useEffect(() => {
-    (async function(){
-      try{
+    (async function () {
+      try {
         setLoading(true);
         const { items, totalItems } = await onSearch(filters, pagination, sorting);
         setItems(items);
         setTotalItems(totalItems);
-      }catch(error){
+      } catch (error) {
         setItems([]);
         setTotalItems(0);
+        const options = {
+          context: `${TableWithSearchBar.name}.useEffect`,
+          level: UI_LOGGER_LEVELS.ERROR,
+          severity: UI_ERROR_SEVERITIES.BUSINESS,
+          error: {
+            error: error,
+            message: error.message || error,
+            title: `${error.name}: Error fetching items`,
+          },
+        };
+        getErrorOrchestrator().handleError(options);
       }
       setLoading(false);
-    })()
+    })();
   }, [filters, pagination, sorting, reload]);
 
   useEffect(() => {
-    setFilters(rest.filters || [])
+    setFilters(rest.filters || []);
   }, [rest.filters]);
 
   const tablePagination = {
     ...pagination,
     totalItemCount: totalItems,
-    pageSizeOptions: tablePageSizeOptions
-  }
-  return <>
-    <WzSearchBar
-      noDeleteFiltersOnUpdateSuggests
-      filters={filters}
-      onFiltersChange={setFilters}
-      suggestions={searchBarSuggestions}
-      placeholder={searchBarPlaceholder}
-      {...searchBarProps}
-    />
-    <EuiSpacer size='s'/>
-    <EuiBasicTable
-      columns={tableColumns}
-      items={items}
-      loading={loading}
-      pagination={tablePagination}
-      sorting={sorting}
-      onChange={tableOnChange}
-      rowProps={rowProps}
-      {...tableProps}
-    />
-  </>
+    pageSizeOptions: tablePageSizeOptions,
+  };
+  return (
+    <>
+      <WzSearchBar
+        noDeleteFiltersOnUpdateSuggests
+        filters={filters}
+        onFiltersChange={setFilters}
+        suggestions={searchBarSuggestions}
+        placeholder={searchBarPlaceholder}
+        {...searchBarProps}
+      />
+      <EuiSpacer size="s" />
+      <EuiBasicTable
+        columns={tableColumns}
+        items={items}
+        loading={loading}
+        pagination={tablePagination}
+        sorting={sorting}
+        onChange={tableOnChange}
+        rowProps={rowProps}
+        {...tableProps}
+      />
+    </>
+  );
 }

public/components/common/tables/table-wz-api.tsx

@@ -22,6 +22,9 @@ import { TableWithSearchBar } from './table-with-search-bar';
 import { TableDeafult } from './table-default'
 import { WzRequest } from '../../../react-services/wz-request';
 import { ExportTableCsv }  from './components/export-table-csv';
+import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
+import { UI_LOGGER_LEVELS } from '../../../../common/constants';
+import { getErrorOrchestrator } from '../../../react-services/common-services';
 
 export function TableWzAPI({endpoint, ...rest}){
 
@@ -51,7 +54,17 @@ export function TableWzAPI({endpoint, ...rest}){
     } catch (error) {
       setIsLoading(false);
       setTotalItems(0);
-      return Promise.reject(error);
+      const options = {
+        context: `${TableWithSearchBar.name}.useEffect`,
+        level: UI_LOGGER_LEVELS.ERROR,
+        severity: UI_ERROR_SEVERITIES.BUSINESS,
+        error: {
+          error: error,
+          message: error.message || error,
+          title: `${error.name}: Error searching items`,
+        },
+      };
+      getErrorOrchestrator().handleError(options);
     };
   },[]);