Move error page to react.

packages/webapp/src/app.tsx

@@ -34,6 +34,7 @@ import AppConfig from './classes/app-config';
 import RegistrationSuccessPage from './components/registration-success-page';
 import { ThemeProvider } from '@emotion/react';
 import RegistrationCallbackPage from './components/registration-callback';
+import ErrorPage from './components/error-page';
 
 const EditorPage = React.lazy(() => import('./components/editor-page'));
 const MapsPage = React.lazy(() => import('./components/maps-page'));
@@ -67,7 +68,9 @@ function Redirect({ to }) {
 
 const App = (): ReactElement => {
   const locale = AppI18n.getDefaultLocale();
+  const overwriteView = window.errorMvcView;
 
+  // This is a hack to move error handling on Spring MVC.
   return locale.message ? (
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
@@ -80,6 +83,7 @@ const App = (): ReactElement => {
             <MuiThemeProvider theme={theme}>
               <ThemeProvider theme={theme}>
                 <CssBaseline />
+                {!overwriteView ? (
                   <Router>
                     <Routes>
                       <Route path="/" element={<Redirect to="/c/login" />} />
@@ -98,7 +102,10 @@ const App = (): ReactElement => {
                           <Suspense
                             fallback={
                               <div>
-                              <FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
+                                <FormattedMessage
+                                  id="dialog.loading"
+                                  defaultMessage="Loading ..."
+                                />
                               </div>
                             }
                           >
@@ -112,7 +119,10 @@ const App = (): ReactElement => {
                           <Suspense
                             fallback={
                               <div>
-                              <FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
+                                <FormattedMessage
+                                  id="dialog.loading"
+                                  defaultMessage="Loading ..."
+                                />
                               </div>
                             }
                           >
@@ -126,7 +136,10 @@ const App = (): ReactElement => {
                           <Suspense
                             fallback={
                               <div>
-                              <FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
+                                <FormattedMessage
+                                  id="dialog.loading"
+                                  defaultMessage="Loading ..."
+                                />
                               </div>
                             }
                           >
@@ -136,6 +149,11 @@ const App = (): ReactElement => {
                       />
                     </Routes>
                   </Router>
+                ) : (
+                  <Router>
+                    <ErrorPage isSecurity={overwriteView === 'securityError'} />
+                  </Router>
+                )}
               </ThemeProvider>
             </MuiThemeProvider>
           </StyledEngineProvider>

packages/webapp/src/components/error-page/index.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Header from '../layout/header';
+import Typography from '@mui/material/Typography';
+import ReactGA from 'react-ga4';
+import { ErrorBody } from './styled';
+
+export type ErrorPageType = {
+  isSecurity: boolean;
+};
+
+const ErrorPage = ({ isSecurity }: ErrorPageType): React.ReactElement => {
+  const intl = useIntl();
+
+  useEffect(() => {
+    document.title = intl.formatMessage({
+      id: 'error.page-title',
+      defaultMessage: 'Unexpected Error | WiseMapping',
+    });
+    ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: 'ErrorPage' });
+  }, []);
+
+  return (
+    <div>
+      <Header type="only-signup" />
+
+      <ErrorBody>
+        <Typography variant="h3" component="h3">
+          {isSecurity ? (
+            <FormattedMessage
+              id="error.security-error"
+              defaultMessage="Mindmap cannot be opened."
+            />
+          ) : (
+            <FormattedMessage
+              id="error.undexpected-error"
+              defaultMessage="An unexpected error has occurred."
+            />
+          )}
+        </Typography>
+
+        <Typography variant="h5" component="h6">
+          {isSecurity ? (
+            <FormattedMessage
+              id="error.security-error-msg"
+              defaultMessage="You do not have enough right access to see this map. This map has been changed to private or deleted."
+            />
+          ) : (
+            <FormattedMessage
+              id="error.undexpected-error-msg"
+              defaultMessage="Unexpected error processing request"
+            />
+          )}
+        </Typography>
+      </ErrorBody>
+    </div>
+  );
+};
+
+export default ErrorPage;

packages/webapp/src/components/error-page/styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const ErrorBody = styled.div`
+  margin: auto;
+  width: 90%;
+  padding: 10px;
+`;

packages/webapp/src/components/layout/header/index.tsx

@@ -6,15 +6,17 @@ import { Link } from 'react-router-dom';
 import Button from '@mui/material/Button';
 
 import logo from './logo-small.svg';
+import { JSX } from '@emotion/react/jsx-runtime';
 
 interface HeaderProps {
   type: 'only-signup' | 'only-signin' | 'none';
 }
 
 export const Header = ({ type }: HeaderProps): React.ReactElement => {
-  let signUpButton;
-  let text;
-  let signInButton;
+  let signUpButton: string | JSX.Element | undefined;
+  let text: string | JSX.Element | undefined;
+  let signInButton: string | JSX.Element | undefined;
+
   if (type === 'only-signup') {
     text = (
       <span className="header-area-content-span">

packages/webapp/src/index.tsx

@@ -7,6 +7,7 @@ import { createRoot } from 'react-dom/client';
 declare global {
   interface Window {
     newrelic: { noticeError: (Error) => void };
+    errorMvcView: string;
   }
 }