Mohamed Atef
31 Mar 2022
React js
As you know your live website shouldn't show any kind of errors while it's on the production server because it will be annoying to show errors and codes to your visitors and also it's not safe at all, because you show your visitor a part of code and also how you are coding this might make the user think about hacking or checking your source code, so there is a small way you can use in your website while you are on the production server to prevent error showing
The screenshot below it shows How React js display the error in your live website
To prevent this view in your live website all you do is just open App.js file
Path to App > src > App.js
it looks like this in my project
import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { create } from 'jss';
import rtl from 'jss-rtl';
import MomentUtils from '@date-io/moment';
import { SnackbarProvider } from 'notistack';
import {
jssPreset,
StylesProvider,
ThemeProvider
} from '@material-ui/core';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import GlobalStyles from 'src/components/GlobalStyles';
import ScrollReset from 'src/components/ScrollReset';
import CookiesNotification from 'src/components/CookiesNotification';
import FeedBackPopup from 'src/components/FeedBackPopup';
import GoogleAnalytics from 'src/components/GoogleAnalytics';
import { AuthProvider } from 'src/contexts/JWTAuthContext';
import useSettings from 'src/hooks/useSettings';
import { createThemeDefault } from 'src/theme';
import routes, { renderRoutes } from 'src/routes';
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
const history = createBrowserHistory();
const App = () => {
const { settings } = useSettings();
const theme = createThemeDefault({
direction: settings.direction,
responsiveFontSizes: settings.responsiveFontSizes,
theme: settings.theme
});
return (
<ThemeProvider theme={theme}>
<StylesProvider jss={jss}>
<MuiPickersUtilsProvider utils={MomentUtils}>
<SnackbarProvider
dense
TransitionProps={true}
maxSnack={3}
>
<Router history={history}>
<AuthProvider>
<GlobalStyles />
<ScrollReset />
<GoogleAnalytics />
<FeedBackPopup />
<CookiesNotification />
{renderRoutes(routes)}
</AuthProvider>
</Router>
</SnackbarProvider>
</MuiPickersUtilsProvider>
</StylesProvider>
</ThemeProvider>
);
};
export default App;
I just need to add <React.StrictMode> before the ThemeProvider opening and close it in the last line </React.StrictMode> hit save and push the changes and try again the error view will be gone
like a component says 400 cannot handle your request, or try again later You can do it easily if you are using a class component using a method called componentDidCatch.
componentDidCatch is an amazing method that helps you to detect errors in your component and also you can use it to report errors to the backend, you can use it like this
componentDidCatch(){
this.props.history.push('/error');
return false;
}
You can use the same method called componentDidCatch and pass two parameters to the method one called error and the second one is Info, then you can use any endpoint provided by the backend to save the errors in the DB to review it later
async componentDidCatch(error, info){
try{
// Use endpoint to report error
let res = axios.post(BackendURL+'/api/report/error', { error: error, info: info });
console.log(res.data);
console.error(error);
console.error(info);
this.props.history.push('/error');
return false;
}catch(err){
console.error(err);
}
}
so the result will look like, and request will be generated to the selected endpoint
That's all if you have any issues please let me know, Good Luck
No Comments to show
© 2023 Copyrights reserved for web-brackets.com