Hide errors in live website Reactjs

Handling Reactjs errors in a live website

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

Redirect users to a custom error page?

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;
 }

Error reporting in React js

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