web: common: Added ErrorBoundary component with componentDidCatch and new Error520Container show
This commit is contained in:
parent
d657d59556
commit
f0cec97c3e
@ -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}>
|
||||
<App />
|
||||
<ErrorBoundary>
|
||||
<App />
|
||||
</ErrorBoundary>
|
||||
</Provider>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
@ -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}>
|
||||
<App />
|
||||
<ErrorBoundary>
|
||||
<App />
|
||||
</ErrorBoundary>
|
||||
</Provider>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
@ -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;
|
1
web/ASC.Web.Common/src/components/ErrorBoundary/index.js
Normal file
1
web/ASC.Web.Common/src/components/ErrorBoundary/index.js
Normal file
@ -0,0 +1 @@
|
||||
export default from "./ErrorBoundary";
|
@ -10,4 +10,5 @@ export { default as AdvancedSelector } from './AdvancedSelector';
|
||||
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 ErrorContainer } from './ErrorContainer';
|
||||
export { default as ErrorBoundary } from './ErrorBoundary';
|
36
web/ASC.Web.Common/src/pages/errors/520/i18n.js
Normal file
36
web/ASC.Web.Common/src/pages/errors/520/i18n.js
Normal file
@ -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;
|
26
web/ASC.Web.Common/src/pages/errors/520/index.js
Normal file
26
web/ASC.Web.Common/src/pages/errors/520/index.js
Normal file
@ -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;
|
||||
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"Error520Text": "Something went wrong."
|
||||
}
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"Error520Text": "Что-то пошло не так."
|
||||
}
|
Loading…
Reference in New Issue
Block a user