Added ErrorBoundary HOC and component.

CHANGELOG.md

@@ -9,6 +9,10 @@ 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)
 
+### Added
+
+- Added `Error Boundary` HOC and Component to handle render errors. [#3321](https://github.com/wazuh/wazuh-kibana-app/pull/3321)
+
 ## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4201
 
 ### Added

package.json

@@ -37,7 +37,7 @@
     "test:browser": "plugin-helpers test:browser",
     "test:jest": "node scripts/jest",
     "generate:api-4.0-info": "cd scripts/generate-api-4.0-info;./generate-api-4.0-info.sh;cd ../..",
-    "prebuild": "node scripts/generate-build-version"    
+    "prebuild": "node scripts/generate-build-version"
   },
   "dependencies": {
     "angular-animate": "1.7.8",
@@ -48,6 +48,7 @@
     "js2xmlparser": "^3.0.0",
     "json2csv": "^4.1.2",
     "jwt-decode": "^2.2.0",
+    "loglevel": "^1.7.1",
     "needle": "^2.0.1",
     "node-cron": "^1.1.2",
     "pdfmake": "0.1.65",

public/components/common/hocs/error-boundary/with-error-boundary.spec.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { expect } from 'chai';
+import ErrorBoundary from './with-error-boundary';
+
+describe('Spec ErrorBoundary', function () {
+  it('it exists', () => {
+    expect(ErrorBoundary).to.be.ok;
+  });
+});

public/components/common/hocs/error-boundary/with-error-boundary.tsx

@@ -0,0 +1,75 @@
+/*
+ * Wazuh app - React HOCs to manage user authorization requirements
+ * Copyright (C) 2015-2021 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import React, { Component } from 'react';
+import log from 'loglevel';
+import { EuiEmptyPrompt } from '@elastic/eui';
+
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch = (error, errorInfo) => catchFunc(error, errorInfo, this);
+
+  render() {
+    // @ts-ignore
+    if (this.state.errorInfo) {
+      return <HandleError props={this} />;
+    }
+    return this.props.children;
+  }
+}
+
+export const withErrorBoundary = (WrappedComponent) => (props) => (
+  <ErrorBoundary>
+    <WrappedComponent {...props} />
+  </ErrorBoundary>
+);
+
+const catchFunc = (error, errorInfo, ctx) => {
+  ctx.setState({
+    error: error,
+    errorInfo: errorInfo,
+  });
+
+  log.error({ error, errorInfo });
+};
+
+const ErrorComponent = (props: { ctx: any }) => {
+  const styles = {
+    error: {
+      borderTop: '1px solid #777',
+      borderBottom: '1px solid #777',
+      padding: '12px',
+    },
+  };
+
+  return (
+    <div style={props.ctx.props.style || styles.error}>
+      <details style={{ whiteSpace: 'pre-wrap' }}>
+        {props.ctx.props.state.error && props.ctx.props.state.error.toString()}
+        <br />
+        {props.ctx.props.state.errorInfo.componentStack}
+      </details>
+    </div>
+  );
+};
+
+const HandleError = (ctx) => (
+  <EuiEmptyPrompt
+    iconType="faceSad"
+    title={<h2>Something went wrong.</h2>}
+    body={<ErrorComponent ctx={ctx} />}
+  />
+);

public/components/common/hocs/index.ts

@@ -30,3 +30,5 @@ export { withButtonOpenOnClick } from './withButtonOpenOnClick';
 export { withAgentSupportModule } from './withAgentSupportModule';
 
 export { withUserLogged } from './withUserLogged';
+
+export { withErrorBoundary } from './error-boundary/with-error-boundary';

public/controllers/agent/components/agents-preview.js

@@ -120,7 +120,7 @@ export const AgentsPreview = compose(
         this.setState({ platforms: platformsModel, loading: false });
     } catch (error) {}
   }
-  
+
   removeFilters(){
     this._isMount && this.setState({agentTableFilters: []})
   }
@@ -164,7 +164,7 @@ export const AgentsPreview = compose(
             </EuiFlexItem>
             {this.totalAgents > 0 && (
               <EuiFlexItem >
-                <EuiPanel betaBadgeLabel="Details">  
+                <EuiPanel betaBadgeLabel="Details">
                   <EuiFlexGroup>
                     <EuiFlexItem>
                       {this.summary && (
@@ -236,7 +236,7 @@ export const AgentsPreview = compose(
                               <EuiToolTip
                                 position='top'
                                 content='View agent details'>
-                                  <a onClick={() => 
+                                  <a onClick={() =>
                                   this.props.tableProps.showAgent(
                                     this.lastAgent
                                   )}>{this.lastAgent.name}</a>
@@ -271,7 +271,7 @@ export const AgentsPreview = compose(
                               style={{ whiteSpace: 'nowrap' }}
                               titleSize="s"
                               description="Most active agent"
-                              titleColor="primary"                              
+                              titleColor="primary"
                             />
                           </EuiFlexItem>
                         )}
@@ -298,13 +298,13 @@ export const AgentsPreview = compose(
                     </div>
                     {this.props.resultState === 'loading' &&
                       (
-                      <div style={{ display: 'block', textAlign: "center", padding: 30}}>                        
+                      <div style={{ display: 'block', textAlign: "center", padding: 30}}>
                         <EuiLoadingChart size="xl" />
                       </div>
                     ) }
-                      
+
                     </EuiFlexItem>
-                  </EuiFlexGroup>                  
+                  </EuiFlexGroup>
                 </EuiPanel>
                 <EuiPanel paddingSize="none" betaBadgeLabel="Evolution" style={{ height: 180,  display: this.props.resultState === 'none' ? 'block' : 'none'}}>
                   <EuiEmptyPrompt
@@ -318,7 +318,7 @@ export const AgentsPreview = compose(
                   />
                 </EuiPanel>
               </EuiFlexItem>
-              
+
             )}
           </EuiFlexGroup>
           <EuiSpacer size="m" />