web: common: Added ErrorBoundary component with componentDidCatch and new Error520Container show

products/ASC.People/Client/src/index.js

@@ -8,7 +8,7 @@ import "./custom.scss";
 import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";
-import { store as commonStore, constants } from "asc-web-common";
+import { store as commonStore, constants, ErrorBoundary} from "asc-web-common";
 import { getFilterByLocation } from "./helpers/converters";
 import { getPortalInviteLinks } from './store/portal/actions';
 const { setIsLoaded, getUserInfo, setCurrentProductId, setCurrentProductHomePage, getPortalPasswordSettings, getPortalCultures } = commonStore.auth.actions;
@@ -45,7 +45,9 @@ else {
 
 ReactDOM.render(
   <Provider store={store}>
+    <ErrorBoundary>
       <App />
+    </ErrorBoundary>
   </Provider>,
   document.getElementById("root")
 );

web/ASC.Web.Client/src/index.js

@@ -5,7 +5,7 @@ import store from "./store/store";
 import "./custom.scss";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
-import { store as commonStore, constants, history } from "asc-web-common";
+import { store as commonStore, constants, history, ErrorBoundary} from "asc-web-common";
 const {
   getUserInfo,
   getPortalSettings,
@@ -27,7 +27,9 @@ if (!token) {
 
 ReactDOM.render(
   <Provider store={store}>
+    <ErrorBoundary>
       <App />
+    </ErrorBoundary>
   </Provider>,
   document.getElementById("root")
 );

web/ASC.Web.Common/src/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Error520Container from "../../pages/errors/520"
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { hasError: false };
+    }
+  
+    // eslint-disable-next-line no-unused-vars
+    static getDerivedStateFromError(error) {
+      // Update state so the next render will show the fallback UI.
+      return { hasError: true };
+    }
+  
+    componentDidCatch(error, errorInfo) {
+      // You can also log the error to an error reporting service
+      console.error(error, errorInfo);
+    }
+  
+    render() {
+      if (this.state.hasError) {
+        // You can render any custom fallback UI
+        return <Error520Container />;
+      }
+  
+      return this.props.children; 
+    }
+  }
+
+  ErrorBoundary.propTypes = {
+    children: PropTypes.any
+  }
+
+export default ErrorBoundary;

web/ASC.Web.Common/src/components/ErrorBoundary/index.js

@@ -0,0 +1 @@
+export default from "./ErrorBoundary";

web/ASC.Web.Common/src/components/index.js

@@ -11,3 +11,4 @@ export { default as PageLayout } from './PageLayout';
 export { default as Layout } from './Layout';
 export { default as ProfileMenu } from './ProfileMenu';
 export { default as ErrorContainer } from './ErrorContainer';
+export { default as ErrorBoundary } from './ErrorBoundary';

web/ASC.Web.Common/src/pages/errors/520/i18n.js

@@ -0,0 +1,36 @@
+import i18n from "i18next";
+import en from "./locales/en/translation.json";
+import ru from "./locales/ru/translation.json";
+
+const newInstance = i18n.createInstance();
+
+  const resources = {
+    en: {
+      translation: en//require("./locales/en/translation.json")
+    },
+    ru: {
+      translation: ru //require("./locales/ru/translation.json")
+    }
+  };
+
+  newInstance.init({
+    resources: resources,
+    lng: 'en',
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === 'lowercase') return value.toLowerCase();
+        return value;
+      }
+    },
+
+    react: {
+      useSuspense: true
+    }
+  });
+
+
+export default newInstance;

web/ASC.Web.Common/src/pages/errors/520/index.js

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import { connect } from "react-redux";
+import ErrorContainer from '../../../components/ErrorContainer';
+import { useTranslation } from 'react-i18next';
+import i18n from './i18n';
+
+const Error520Container = ({language}) => {
+  const { t } = useTranslation('translation', { i18n });
+
+  useEffect(() => {
+    i18n.changeLanguage(language);
+  }, [language]);
+
+  return <ErrorContainer headerText={t("Error520Text")} />;
+};
+
+function mapStateToProps(state) {
+  return {
+      language: state.auth.user.cultureName || state.auth.settings.culture,
+  };
+}
+
+const Error404 = connect(mapStateToProps)(Error520Container);
+
+export default Error404;
+

web/ASC.Web.Common/src/pages/errors/520/locales/en/translation.json

@@ -0,0 +1,3 @@
+{
+  "Error520Text": "Something went wrong."
+}

web/ASC.Web.Common/src/pages/errors/520/locales/ru/translation.json

@@ -0,0 +1,3 @@
+{
+  "Error520Text": "Что-то пошло не так."
+}