how to handle backend errors in js frontend inside of object and with out object

i have user login and i have 2 errors handlers

  1. email & password empty

  2. email & password not match with data base

through post man i send

  1. empty user name and password result is
    "errors": {
        "email": "please enter valid emails",
        "password": "please enter password"
  1. email and password wrong the result is
    "general": "email or password not match"

i notice 1st error its have object errors and 2nd not have

my react js code is

// i remove css and imports 

class login extends Component {
    constructor() {
        this.state = {
            email: '',
            password: '',
            loading: false,
            errors: {}

    handleChnage = (event) => {
    handleSubmit = (event) => {
        // console.log('hi');
            loading: true
        const userData = {
            password: this.state.password
        }'/login', userData)
            .then((res) => {
                    loading: false
            .catch((err) => {
               // let errors  ={email:'',password:''}
                    errors :,
                    loading: false
    render() {
        const { classes } = this.props;
        const { errors, loading,} = this.state;
        return (
            <Grid container className={classes.form}>
                <Grid item sm />
                <Grid item sm >
                    <img src={AppIcon} alt="app cion" className={classes.image} />
                    <Typography variant="h2" className={classes.pagetitle}>Login</Typography>
                    <form noValidate onSubmit={this.handleSubmit}>
                        <TextField id="email" name="email" type="email" label="Email" className={classes.textfeild}
                            helperText={} error={ ? true : false} value={} onChange={this.handleChnage} fullWidth />
                        <TextField id="password" name="password" type="password" label="Password" className={classes.textfeild}
                            helperText={errors.password} error={errors.password ? true : false} value={this.state.password} onChange={this.handleChnage} fullWidth />
                        {errors.general &&(
                            <Typography variant="body2" className={classes.customerror}>
                        <Button type="submit" variant="contained" color="primary" className={classes.button}>Login </Button>
                <Grid item sm />

login.propTypes = {
    classes: PropTypes.object.isRequired

export default withStyles(styles)(login);

my problem is in this code if i send email and password wrong

93 | helperText={} error={ ? true : false} value={} onChange={this.handleChnage} fullWidth

this line i got error and this is my console log

general: "email or password not match"

how can i handle this kind of errors ?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

Looking at the code of your request handling and the responses I can see that error responses are not consistent in how it handles errors. I think you should think about fixing the response to be consistent. I would try to replace line in error handling of submit

errors :,

with something that would create structure for general erros: f.e.

errors : {, general:}

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply