Web: Doceditor: added ErrorBoundary component

web/ASC.Web.Editor/src/App.js

@@ -1,19 +1,11 @@
 //import "@appserver/common/utils/wdyr";
 import React from "react";
 import Editor from "./Editor.js";
-//import ErrorBoundary from "@appserver/common/components/ErrorBoundary";
+
 import "@appserver/common/custom.scss";
-import { AppServerConfig } from "@appserver/common/constants";
-import { combineUrl } from "@appserver/common/utils";
 
 const App = (initProps) => {
-  const onError = () =>
-    window.open(combineUrl(AppServerConfig.proxyURL, "/login"), "_self");
-  return (
-    // <ErrorBoundary onError={onError}>
-    <Editor {...initProps} />
-    // </ErrorBoundary>
-  );
+  return <Editor {...initProps} />;
 };
 
 export default App;

web/ASC.Web.Editor/src/Editor.js

@@ -117,6 +117,7 @@ function Editor({
 
   useEffect(async () => {
     console.log("useEffect config", config);
+
     if (config) {
       document.getElementById("scripDocServiceAddress").onload = onLoad();
       setDocumentTitle(config?.document?.title);

web/ASC.Web.Editor/src/client/index.js

@@ -5,6 +5,9 @@ import App from "../App.js";
 import { useSSR } from "react-i18next";
 import useMfScripts from "../helpers/useMfScripts";
 import initDesktop from "../helpers/initDesktop";
+import { AppServerConfig } from "@appserver/common/constants";
+import { combineUrl } from "@appserver/common/utils";
+import ErrorBoundary from "../components/ErrorBoundary";
 
 const propsObj = window.__ASC_INITIAL_STATE__;
 const initialI18nStore = window.initialI18nStore;
@@ -24,7 +27,17 @@ const AppWrapper = () => {
   const [isInitialized, isErrorLoading] = useMfScripts();
   useSSR(initialI18nStore, initialLanguage);
 
+  const onError = () =>
+    window.open(
+      combineUrl(
+        AppServerConfig.proxyURL,
+        propsObj.personal ? "sign-in" : "/login"
+      ),
+      "_self"
+    );
+
   return (
+    <ErrorBoundary onError={onError}>
       <Suspense fallback={<div />}>
         <App
           {...propsObj}
@@ -34,6 +47,7 @@ const AppWrapper = () => {
           initDesktop={initDesktop}
         />
       </Suspense>
+    </ErrorBoundary>
   );
 };
 

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

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ErrorContainer from "@appserver/common/components/ErrorContainer";
+import { useTranslation } from "react-i18next";
+
+const Error520 = ({ match }) => {
+  const { t } = useTranslation(["Common"]);
+  const { error } = (match && match.params) || {};
+
+  return (
+    <ErrorContainer headerText={t("SomethingWentWrong")} bodyText={error} />
+  );
+};
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  static getDerivedStateFromError(error) {
+    console.log("getDerivedStateFromError");
+    // 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);
+    console.log("componentDidCatch");
+    this.props.onError && this.props.onError();
+  }
+
+  render() {
+    console.log("render error boundary");
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <Error520 />;
+    }
+
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.any,
+  onError: PropTypes.func,
+};
+
+export default ErrorBoundary;