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 App from "./App";
|
||||||
|
|
||||||
import * as serviceWorker from "./serviceWorker";
|
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 { getFilterByLocation } from "./helpers/converters";
|
||||||
import { getPortalInviteLinks } from './store/portal/actions';
|
import { getPortalInviteLinks } from './store/portal/actions';
|
||||||
const { setIsLoaded, getUserInfo, setCurrentProductId, setCurrentProductHomePage, getPortalPasswordSettings, getPortalCultures } = commonStore.auth.actions;
|
const { setIsLoaded, getUserInfo, setCurrentProductId, setCurrentProductHomePage, getPortalPasswordSettings, getPortalCultures } = commonStore.auth.actions;
|
||||||
@ -45,7 +45,9 @@ else {
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
|
<ErrorBoundary>
|
||||||
<App />
|
<App />
|
||||||
|
</ErrorBoundary>
|
||||||
</Provider>,
|
</Provider>,
|
||||||
document.getElementById("root")
|
document.getElementById("root")
|
||||||
);
|
);
|
||||||
|
@ -5,7 +5,7 @@ import store from "./store/store";
|
|||||||
import "./custom.scss";
|
import "./custom.scss";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import * as serviceWorker from "./serviceWorker";
|
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 {
|
const {
|
||||||
getUserInfo,
|
getUserInfo,
|
||||||
getPortalSettings,
|
getPortalSettings,
|
||||||
@ -27,7 +27,9 @@ if (!token) {
|
|||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
|
<ErrorBoundary>
|
||||||
<App />
|
<App />
|
||||||
|
</ErrorBoundary>
|
||||||
</Provider>,
|
</Provider>,
|
||||||
document.getElementById("root")
|
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";
|
@ -11,3 +11,4 @@ export { default as PageLayout } from './PageLayout';
|
|||||||
export { default as Layout } from './Layout';
|
export { default as Layout } from './Layout';
|
||||||
export { default as ProfileMenu } from './ProfileMenu';
|
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