How do you use prisma's error Formatting?

Get Help and Help Others
1

I am super new to Prisma so apologies so please be gentle :blush:

Prisma allows you to set formatting for errors generated by Prisma by adding an object to the Prisma contructor.

export const db = new PrismaClient({
  errorFormat: 'pretty'
})

So I am using this in a super simple page that I am building.

So I have a ContactPage , that shows 2 things:

  1. ContactsCell and
  2. ContactsForm

ContactsCell is based off of Contact Schema as follows:
model Contact {

  id        Int      @id @default(autoincrement())
  name      String
  email     String
  message   String
  createdAt DateTime @default(now())
  @@unique([ name, email, message ])
}

Within the contact from I have created the following mutation code

mutation CreateContactMutation($input: CreateContactInput!) {
    createContact(input: $input) {
      id
      name
      email
      message
      createdAt
    }
  }
`

  const [ create , { loading, error }] = useMutation(CREATE_CONTACT, {
    refetchQueries: [{ query: QUERY }],
    awaitRefetchQueries: true
  })

and finally onsubmit has something like this:

const onSubmit = (input) => {
    console.log(input)
    create({ variables: { input }})
    formMethods.reset()
  }

and the contract form has a FormError component that gets the error passed from the useMutation hook.

<FormError className="alert alert-danger" error={error} />

However, the error message from Prisma that I get isnt formatted properly and the message looks something like this:

e[31mInvalid
e[1m`prisma.contact.create()`
e[22m invocation:
e[39m Unique constraint failed on the fields: (`name`,`email`,`message`)

image
image1353×202 8.84 KB

My question is how do I go about formatting this error from Prisma?

2

Hi @asdethprime.

Personally, I typically do not want to share these errors with my users and expose some of the technical details – because from a UX perspective, it isn’t helpful to a user to know about a missing unique constraint.

For a developer, however, it is and that error should be output to the API’s log – and Redwood will look to improve its logging capabilities in 1.0.

So, I am not sure that even pretty printing the error would help in this case as you would have to format it in the cell or perhaps use a pre or code tag to display.

Instead, I might log the error on the API side and in the cell, not output the Error.message and instead show the user some friendlier failure message – like that you might with other required fields.

If you did want to show Unique constraint failed on the fields: (name,email,message) then perhaps in your cell’s Failure, you could parse that error (or error.message ?) and extract just that portion of it to render.

1 Like
3

I really appreciate the response , thank you :slight_smile:

Its not the cell itself not working the cell is working fine, its actually the FormError component from redwood forms that’s giving this cryptic error.

Looking at documentation there is nothing regarding this in redwoodjs/form so a bit stuck, though its just a toy app nothing production.

To give you a bit more background, I am reading through prisma’s documentation and trying to see what else I can make Prisma do for me, so was trying to see if I could do anything with the error formating option.

4

Have you looked at

https://redwoodjs.com/docs/form#formerror-attributes

<FormError> Attributes
 error
An object containing server errors. Redwood expects this object to be from GraphQL listing errors in validation before submission to the server, or errors from the server when trying to mutate the data store in response to the GraphQL mutation sent across the wire.

The easiest way to get your errors in this format is give <FormError> the error property created by the useMutation hook provided by @redwoodjs/web (the body of the form has been left out to keep this code short-ish):

(example)

If error contains the object that <FormError> is expecting then the errors will be shown (in this case at the top of the form) otherwise nothing is rendered.

So, the error is coming from GraphQL. A field error will be rendered if the name of the form element is included.

I still think thought that you’ve got an issue where you are trying to save a duplicate record – hence the unique constraint.

Catching that in the service and reporting a higher lever Form error of “This record already exists. Please change your values and try again.” seems to be a nicer UX.

If you look at the Form code

It is reporting GraphQL errors of which there are in Apollo:

  • UserInputError
  • ValidationError
  • ForbiddenError

etc.

See: Error handling - Apollo GraphQL Docs

In fact, for auth

throw new AuthenticationError("You don't have permission to do that.")

and RBAC

throw new ForbiddenError("You don't have access to do that.")

You can get these (and others) from

import { AuthenticationError, ForbiddenError } from '@redwoodjs/api'

and use in your service that tries to save that duplicate contact.

the ForbiddenError errors are thrown.

1 Like