skinny-azureS
Refine3y ago
31 replies
skinny-azure

Handle Errors inside of Forms being posted to a custom API

Hey everyone!
We're using Refine to such a great extend and I'm very thankful for all the work that has been put into Refine so far!

Right now we're facing a situation, where we have a custom API that we are using to create workflows for users. Whenever we encounter errors inside the custom API, I'm wondering how to handle those respectively inside of the frontend. Here we have three different types of errors, that I'd like to handle. Maybe there is a solution to all three situations in Refine, but I'm missing a concept?

1. Handle global errors ✅
This one is pretty basic, and can be handled through a interceptor inside of Axios. Basically we encounter >500 errors inside of the API that might point to a network failure or general availability. I'm showing a toast right now if anything goes wrong on the server side.

2. Handle general form errors ❓
So this one is the first I'm struggling with, we basically check for general sanity of the form somebody posted. Since we're editing DTOs inside of our backend, say there is a check, that a certain combination of entries cannot be done, i.e. "This combination of attributes is not allowed". How would I handle such a case, what would the optimal JSON response from the API look like to scope the error to the form and show it inside of refine? I want to have a uniform solution, so that we don't have to build this again and again. Suggestions highly welcome!

3. Handle scoped form field errors ❓
This one is the second one I'm struggling with, since we have a collection of fields i.e. "id, name, zip, city", the server side could be checking something like "does the zip and the city match?" and if they don't match I want to show an error on the city field (just as an example) like "your city does not match the zip you entered". How would I pass the error to the form, so that (in our case) Antd would be able to work with that? Maybe it's too custom, but maybe that's something you figured out already 🙂

Cheers!
Was this page helpful?