How to hide errors in live website build using Reactjs? How to handle errors in Reactjs live website

Hide errors in live website Reactjs

Written By: Mohamed Atef

Published: 2022-03-31 | Comments: 0 | Category: React js

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

Comments

There is no comments yet

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Display PDF in Reactjs from Authenticated API
Publish date: 2022-02-14 | Comments: 0

Tag: React js

CSS media query (breakpoints) in Material UI
Publish date: 2021-10-21 | Comments: 0

Tag: React js

Deploy Reactjs using Azure
Publish date: 2021-07-31 | Comments: 0

Tag: React js

Show CSV file in web page using Reactjs
Publish date: 2021-10-20 | Comments: 0

Tag: React js

Auto complete Google addresses API (Reactjs, Material UI, Formik)
Publish date: 2021-07-03 | Comments: 2

Tag: React js