Feature/implement error boundary hoc

CHANGELOG.md

@@ -15,7 +15,6 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Changed ossec to wazuh in sample-data [#3121](https://github.com/wazuh/wazuh-kibana-app/pull/3121)
 - Changed empty fields in FIM tables and `syscheck.value_name` in discovery now show an empty tag for visual clarity [#3279](https://github.com/wazuh/wazuh-kibana-app/pull/3279)
 
-
 ## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4201
 
 ### Added

public/components/add-modules-data/WzSampleDataWrapper.js

@@ -24,8 +24,9 @@ import {
 } from '@elastic/eui';
 import WzSampleData from './sample-data'
 import WzReduxProvider from '../../redux/wz-redux-provider';
-import { withUserAuthorizationPrompt } from '../../components/common/hocs/withUserAuthorization';
+import { withUserAuthorizationPrompt, withErrorBoundary, withReduxProvider } from '../../components/common/hocs';
 import store from '../../redux/store';
+import { compose } from 'redux';
 import { updateSelectedSettingsSection } from '../../redux/actions/appStateActions';
 import { WAZUH_ROLE_ADMINISTRATOR_NAME } from '../../../common/constants';
 
@@ -61,9 +62,7 @@ export class WzSampleDataProvider extends Component {
           <EuiSpacer size='xl'/>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <WzReduxProvider>
-                <WzSampleData {...this.props} />  
-              </WzReduxProvider>
+              <WzSampleData {...this.props} />  
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPageBody>
@@ -73,11 +72,8 @@ export class WzSampleDataProvider extends Component {
   }
 }
 
-const WzSampleDataWrapperWithAdministrator = withUserAuthorizationPrompt(null, [WAZUH_ROLE_ADMINISTRATOR_NAME])(WzSampleDataProvider);
-export function WzSampleDataWrapper() {
-  return (
-  <WzReduxProvider>
-    <WzSampleDataWrapperWithAdministrator />
-  </WzReduxProvider>
-  )
-}
+export const WzSampleDataWrapper = compose(
+  withErrorBoundary,
+  withReduxProvider,
+  withUserAuthorizationPrompt(null, [WAZUH_ROLE_ADMINISTRATOR_NAME])
+)(WzSampleDataProvider);

public/components/agents/stats/agent-stats.tsx

@@ -21,7 +21,7 @@ import {
   EuiText
 } from '@elastic/eui';
 
-import { withGlobalBreadcrumb, withReduxProvider, withGuard, withUserAuthorizationPrompt } from '../../common/hocs';
+import { withGlobalBreadcrumb, withReduxProvider, withGuard, withUserAuthorizationPrompt, withErrorBoundary } from '../../common/hocs';
 import { compose } from 'redux';
 import { WzRequest, formatUIDate } from '../../../react-services';
 import { AgentStatTable } from './table';
@@ -80,6 +80,7 @@ const statsAgents: {title: string, field: string, render?: (value) => any}[] = [
 ];
 
 export const MainAgentStats = compose(
+  withErrorBoundary,
   withReduxProvider,
   withGlobalBreadcrumb(({agent}) => [
     {

public/components/agents/syscollector/main.tsx

@@ -10,16 +10,12 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { Component } from 'react';
-import { SyscollectorInventory } from './inventory'
+import React from 'react';
+import { withErrorBoundary } from '../../common/hocs';
+import { SyscollectorInventory } from './inventory';
 
-export class MainSyscollector extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (<SyscollectorInventory agent={this.props.agent}></SyscollectorInventory> )
-  }
+function MainSyscollectorClass(props) {
+  return <SyscollectorInventory agent={props.agent}></SyscollectorInventory>;
 }
+
+export const MainSyscollector = withErrorBoundary (MainSyscollectorClass);

public/components/common/modules/agents-current-section-wrapper.tsx

@@ -10,20 +10,8 @@
  *
  * Find more information about this on the LICENSE file.
  */
-import React, { Component } from 'react';
-import WzReduxProvider from '../../../redux/wz-redux-provider';
-import WzCurrentAgentsSection from './agents-current-section'
+import WzCurrentAgentsSection from './agents-current-section';
+import { compose } from 'redux';
+import { withErrorBoundary, withReduxProvider } from '../hocs';
 
-export class WzCurrentAgentsSectionWrapper extends Component {
- constructor(props) {
-   super(props);
- }
-
- render() {
-   return (
-     <WzReduxProvider>
-       <WzCurrentAgentsSection {...this.props}/>
-     </WzReduxProvider>
-   );
- }
-}
+export const WzCurrentAgentsSectionWrapper = compose (withErrorBoundary, withReduxProvider) (WzCurrentAgentsSection);

public/components/common/modules/discover/discover.tsx

@@ -21,7 +21,7 @@ import { WazuhConfig } from '../../../../react-services/wazuh-config';
 import { formatUIDate } from '../../../../react-services/time-service';
 import { KbnSearchBar } from '../../../kbn-search-bar';
 import { FlyoutTechnique } from '../../../../components/overview/mitre/components/techniques/components/flyout-technique';
-import { withReduxProvider } from '../../../common/hocs';
+import { withErrorBoundary, withReduxProvider } from '../../../common/hocs';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import _ from 'lodash';
@@ -57,6 +57,7 @@ const mapStateToProps = state => ({
 });
 
 export const Discover = compose(
+ withErrorBoundary,
  withReduxProvider,
  connect(mapStateToProps)
 )(class Discover extends Component {

public/components/common/modules/main.tsx

@@ -27,9 +27,10 @@ import { getAngularModule, getDataPlugin, getUiSettings } from '../../../kibana-
 import { MainModuleAgent } from './main-agent'
 import { MainModuleOverview } from './main-overview';
 import store from '../../../redux/store';
-import WzReduxProvider from '../../../redux/wz-redux-provider.js';
+import { compose } from 'redux';
+import { withReduxProvider,withErrorBoundary } from '../hocs';
 
-export class MainModule extends Component {
+export const MainModule = compose (withErrorBoundary,withReduxProvider) (class MainModule extends Component {
   constructor(props) {
     super(props);
     this.reportingService = new ReportingService();
@@ -211,13 +212,13 @@ export class MainModule extends Component {
       onSelectedTabChanged: (id) => this.onSelectedTabChanged(id)
     }
     return (
-      <WzReduxProvider>
+      <>
         {agent &&
           <MainModuleAgent {...{ ...this.props, ...mainProps }}></MainModuleAgent>
           || ((this.props.section && this.props.section !== 'welcome') &&
             <MainModuleOverview {...{ ...this.props, ...mainProps }}></MainModuleOverview>)
         }
-      </WzReduxProvider>
+      </>
     );
   }
-}
+})

public/components/common/modules/overview-current-section-wrapper.tsx

@@ -10,20 +10,8 @@
  *
  * Find more information about this on the LICENSE file.
  */
-import React, { Component } from 'react';
-import WzReduxProvider from '../../../redux/wz-redux-provider';
-import WzCurrentOverviewSection from './overview-current-section'
+import { compose } from 'redux';
+import { withErrorBoundary, withReduxProvider } from '../hocs';
+import WzCurrentOverviewSection from './overview-current-section';
 
-export class WzCurrentOverviewSectionWrapper extends Component {
- constructor(props) {
-   super(props);
- }
-
- render() {
-   return (
-     <WzReduxProvider>
-       <WzCurrentOverviewSection {...this.props}/>
-     </WzReduxProvider>
-   );
- }
-}
+export const WzCurrentOverviewSectionWrapper = compose (withErrorBoundary, withReduxProvider) (WzCurrentOverviewSection);

public/components/common/permissions/prompt.tsx

@@ -16,15 +16,16 @@ import { useUserRolesRequirements } from '../hooks/useUserRoles';
 import { EuiEmptyPrompt, EuiSpacer, EuiPanel } from '@elastic/eui';
 import { TUserPermissions, TUserPermissionsFunction, TUserRoles, TUserRolesFunction } from '../permissions/button';
 import { WzPermissionsFormatted } from './format';
+import { withErrorBoundary } from '../hocs';
 
 interface IEmptyPromptNoPermissions{
   permissions?: TUserPermissions
   roles?: TUserRoles
   actions?: React.ReactNode
 }
 
-export const WzEmptyPromptNoPermissions = ({permissions, roles, actions}: IEmptyPromptNoPermissions) => {
-  const prompt = (<EuiEmptyPrompt
+export const WzEmptyPromptNoPermissions = withErrorBoundary (({permissions, roles, actions}: IEmptyPromptNoPermissions) => {
+  return <EuiEmptyPrompt
     iconType="securityApp"
     title={<h2>You have no permissions</h2>}
     body={
@@ -44,12 +45,8 @@ export const WzEmptyPromptNoPermissions = ({permissions, roles, actions}: IEmpty
       </Fragment>
     }
     actions={actions}
-  />)
-  return (
-  // <EuiPanel>{prompt}</EuiPanel>
-  prompt
-  )
-}
+  />
+});
 
 interface IPromptNoPermissions{
   permissions?: TUserPermissions | TUserPermissionsFunction

public/components/common/welcome/agents-welcome.js

@@ -23,12 +23,9 @@ import {
   EuiFlexGrid,
   EuiButtonEmpty,
   EuiTitle,
-  EuiHealth,
-  EuiHorizontalRule,
   EuiPage,
   EuiButton,
   EuiPopover,
-  EuiSelect,
   EuiLoadingChart,
   EuiToolTip,
   EuiButtonIcon,
@@ -54,8 +51,9 @@ import { updateCurrentAgentData } from '../../../redux/actions/appStateActions';
 import WzTextWithTooltipIfTruncated from '../wz-text-with-tooltip-if-truncated';
 import { getAngularModule } from '../../../kibana-services';
 import { hasAgentSupportModule } from '../../../react-services/wz-agents';
+import { withErrorBoundary } from '../hocs';
 
-export class AgentsWelcome extends Component {
+export const AgentsWelcome = withErrorBoundary (class AgentsWelcome extends Component {
   _isMount = false;
   constructor(props) {
     super(props);
@@ -329,7 +327,7 @@ export class AgentsWelcome extends Component {
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-    );
+    );withErrorBoundary
 
   }
 
@@ -614,4 +612,4 @@ export class AgentsWelcome extends Component {
       </div>
     );
   }
-}
+})

public/components/common/welcome/management-welcome-wrapper.js

@@ -12,22 +12,9 @@
  *
  * DELETE THIS WRAPPER WHEN WELCOME SCREEN WAS NOT BE CALLED FROM ANGULARJS
  */
-import React, { Component } from 'react';
 import ManagementWelcome from './management-welcome';
-import WzReduxProvider from '../../../redux/wz-redux-provider';
 import './welcome.scss';
+import { compose } from 'redux';
+import { withErrorBoundary, withReduxProvider } from '../hocs';
 
-export class ManagementWelcomeWrapper extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    return (
-      <WzReduxProvider>
-        <ManagementWelcome {...this.props} />
-      </WzReduxProvider>
-    );
-  }
-}
+export const ManagementWelcomeWrapper = compose (withErrorBoundary,withReduxProvider)(ManagementWelcome)

public/components/common/welcome/overview-welcome.js

@@ -31,8 +31,9 @@ import { updateCurrentTab } from '../../../redux/actions/appStateActions';
 import store from '../../../redux/store';
 import './welcome.scss';
 import { WAZUH_MODULES } from '../../../../common/wazuh-modules';
+import { withErrorBoundary } from '../hocs';
 
-export class OverviewWelcome extends Component {
+export const OverviewWelcome = withErrorBoundary (class OverviewWelcome extends Component {
   constructor(props) {
     super(props);
     this.strtools = new StringsTools();
@@ -186,4 +187,4 @@ export class OverviewWelcome extends Component {
       </Fragment>
     );
   }
-}
+})

public/components/health-check/health-check.tsx

@@ -13,8 +13,9 @@ import { WAZUH_ERROR_DAEMONS_NOT_READY, WAZUH_INDEX_TYPE_STATISTICS, WAZUH_INDEX
 import { checkKibanaSettings, checkKibanaSettingsTimeFilter, checkKibanaSettingsMaxBuckets } from './lib';
 import store from '../../redux/store';
 import { updateWazuhNotReadyYet } from '../../redux/actions/appStateActions.js';
+import { withErrorBoundary } from '../common/hocs';
 
-export class HealthCheck extends Component {
+export const HealthCheck = withErrorBoundary (class HealthCheck extends Component {
   checkPatternCount = 0;
   constructor(props) {
     super(props);
@@ -502,4 +503,4 @@ export class HealthCheck extends Component {
       </div >
     );
   }
-};
+});

public/components/management/cluster/cluster-disabled.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { EuiPage, EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
-
-export class ClusterDisabled extends Component {
+import { withErrorBoundary } from '../../common/hocs'
+export const ClusterDisabled = withErrorBoundary (class ClusterDisabled extends Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -43,4 +43,4 @@ export class ClusterDisabled extends Component {
       </EuiPage>
     );
   }
-}
+})