From fe448353a8c646306e738b23ed032f58fb1677fc Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem.tarasov@onlyoffice.com>
Date: Thu, 7 Apr 2022 20:41:33 +0300
Subject: [PATCH] Web: Doceditor: added ErrorBoundary component

---
 web/ASC.Web.Editor/src/App.js                 | 12 +----
 web/ASC.Web.Editor/src/Editor.js              |  1 +
 web/ASC.Web.Editor/src/client/index.js        | 32 ++++++++----
 .../src/components/ErrorBoundary.js           | 51 +++++++++++++++++++
 4 files changed, 77 insertions(+), 19 deletions(-)
 create mode 100644 web/ASC.Web.Editor/src/components/ErrorBoundary.js

diff --git a/web/ASC.Web.Editor/src/App.js b/web/ASC.Web.Editor/src/App.js
index bcdbc03fc2..00e6e72ea0 100644
--- a/web/ASC.Web.Editor/src/App.js
+++ b/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;
diff --git a/web/ASC.Web.Editor/src/Editor.js b/web/ASC.Web.Editor/src/Editor.js
index 1a808a01ef..e1fdfbc1ff 100644
--- a/web/ASC.Web.Editor/src/Editor.js
+++ b/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);
diff --git a/web/ASC.Web.Editor/src/client/index.js b/web/ASC.Web.Editor/src/client/index.js
index 820750d255..312883978d 100644
--- a/web/ASC.Web.Editor/src/client/index.js
+++ b/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,16 +27,27 @@ const AppWrapper = () => {
   const [isInitialized, isErrorLoading] = useMfScripts();
   useSSR(initialI18nStore, initialLanguage);
 
+  const onError = () =>
+    window.open(
+      combineUrl(
+        AppServerConfig.proxyURL,
+        propsObj.personal ? "sign-in" : "/login"
+      ),
+      "_self"
+    );
+
   return (
-    <Suspense fallback={<div />}>
-      <App
-        {...propsObj}
-        mfReady={isInitialized}
-        mfFailed={isErrorLoading}
-        isDesktopEditor={isDesktopEditor}
-        initDesktop={initDesktop}
-      />
-    </Suspense>
+    <ErrorBoundary onError={onError}>
+      <Suspense fallback={<div />}>
+        <App
+          {...propsObj}
+          mfReady={isInitialized}
+          mfFailed={isErrorLoading}
+          isDesktopEditor={isDesktopEditor}
+          initDesktop={initDesktop}
+        />
+      </Suspense>
+    </ErrorBoundary>
   );
 };
 
diff --git a/web/ASC.Web.Editor/src/components/ErrorBoundary.js b/web/ASC.Web.Editor/src/components/ErrorBoundary.js
new file mode 100644
index 0000000000..bc7e63a185
--- /dev/null
+++ b/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;