Clean Architecture — Mapping and Displaying Server-Side Errors With Formik in React Client App

Discussing how to properly map server-side errors to individual inputs and display the errors, which complements client-side validations using Formik and Yup.

UPDATE April 10, 2022: all projects in the GitHub repo have been upgraded to .NET 5.

Background

Handling server-side errors on the client-side is always tricky as it can be hard to map the errors to individual form inputs and display them accordingly. When building a React web application, using Formik and Yup allows us to handle client side errors pretty intuitively, but it is still not straightforward to handle server side errors.

In fact, there is an open issue on the Formik GitHub repo asking how to properly track and display server-side errors, in addition to client-side validation errors. While there are lots of discussions under this topic, this issue apparently is more difficult than it looks to address at the abstraction level. Even though the ticket was created in 2017, it is still open as of this writing in Nov. 2020!

The Formik author, Jared Palmer, recommends, quote to quote, “Write an small function that transforms your backend error into same shape as formik’s errors and then call setErrors”.

Goal