How to raise an error with complex object?

Question

When I throw SubmissionError or call stopSubmit with { _error: "...."} the _error property is a string (found out from docs and TypeScript definitions) but what if I want to send down a complex object or an array of strings (form submit may have many errors, can't always reduce them to a simple string.).

What am I supposed to do in these situations?

I realize that nothing is really stopping me from assigning whatever I want to the _error property but TypeScript is complaining and I think that there should be proper way of doing this.

Answer 1

I know that the case is more specific to TypeScript. I'll share some thoughts and suggestions, so I hope they will help you and give you insights!

Here's how I do it (without TypeScript), as simple as possible:

// Throw a single error string, somewhere in my form submission handler
throw new SubmissionError({
  _error: 'Wrong username'
})

// Throw multiple errors, , somewhere in my form submission handler
throw new SubmissionError({
  _error: ['Wrong username', 'Wrong email']
})

// Errors handling & rendering
const handleErrors = error => Array.isArray(error) ? error.map(renderError) : renderError(error)
const renderError = error => <div>{error}</div> 

// Form component
const Form = ({ error, handleSubmit, children }) => (
  <form onSubmit={handleSubmit}>
    {error && handleErrors(error) }
    {children}
  </form>
)

---

Suggestion (with TypeScript):

I know that TypeScript will expect always the same type of data to be pass down to the _error field, so why don't you standardize what you're passing? You can always convert everything to Array or a specific Object structure. Here are some basic examples:

// Single error string, convert it to Array
throw new SubmissionError({
  _error: ['Wrong username']
})

// Multiple errors, just pass the Array
throw new SubmissionError({
  _error: ['Wrong username', 'Wrong email']
})

As you already told, you are not protected to pass whatever you want to the _error, but that's how the library API works and it is the library responsibility to handle the user input. However, the more important thing (for me) is the way you handle the error rendering, because here it's only your responsibility to render the error correctly. Here you can take advantage of using types and expects a specific error type (for example Array).

Also it's an option to wrap SubmissionError in your own class. Doing it in that way, TypeScript will require you to pass always the same type of _error.

---

I guess you know it, but _error key purpose is to pass top-level (generic) errors to the form. If you want to pass down an error to a specific form field, then you have to pass it in the following way:

throw new SubmissionError({
  // field name
  username: ['It should not be empty']
})