title: Handling Server-Side Errors on React: Formik & Yup
body: <p>I've been trying to handle error from serverside (i.e. email already exists)</p>
  <p>Summary of what I have tried so far:</p>
  <ol>
  <li><p>Asynchronously create User Model with email being unique field upon POST /register request.</p>
  </li>
  <li><p>If there's an Error, I will send client side an error using &quot;res.send(e)&quot;.</p>
  </li>
  <li><p>await Axios request saving it to variable response under try.</p>
  </li>
  <li><p>On the catch block, set error to field with name 'email'</p>
  </li>
  <li><p>Finally set submitting to false so user can fix the error.</p>
  </li>
  </ol>
  <p>Result: No console.log or error message from the server.</p>
  <p>My questions are as follows:</p>
  <ul>
  <li><p>How do I specify which error I am getting from server-side? (I've tried console logging error blocks by trying to access &quot;e.detail&quot; but I will get undefined.</p>
  </li>
  <li><p>How to handle this on client side using Formik and Yup? (What's the best practice?)</p>
  </li>
  </ul>
  <p>Below are my code set up.</p>
  <p>My server router setup.</p>
  <pre><code>const handleErrors = (e) =&gt; {
    console.log(Object.values(e));
    res.send(e)
  };
  
  module.exports.register_post = async (req, res) =&gt; {
      const { email, password, name, gender, social, about, interests } = req.body;
  
      try {
          const user = await User.create({
              email,
              password,
              name,
              gender,
              twitter: social.twitter,
              instagram: social.instagram,
              about,
              interests,
          });
          const token = createToken(user.id);
          console.log(user);
          res.cookie('jwt', token, { httpOnly: true, maxAge: maxAge * 1000 });
          res.send(user);
      } catch (e) {
          handleErrors(e);
      }
  };
  </code></pre>
  <p>My Front-End React(with Formik) side set up</p>
  <pre><code>
  const onSubmit = async (values, { setSubmitting, setFieldError }) =&gt; {
      const filteredValues = _pickBy(values, (_, key) =&gt; key !== 'password2');
      try {
          const response = await axios.post('http://localhost:8080/register', {
              ...filteredValues,
          });
          console.log(response);
          history.push('/register/verification');
      } catch (e) {
          setFieldError('email', e);
      } finally {
          setSubmitting(false);
      }
  };
  </code></pre>