uploadthing: [bug]: onUploadError not working/available (6.6)

Provide environment information

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 59.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.17.0/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.15.5 - ~/.nvm/versions/node/v18.17.0/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 17.3.1
  npmPackages:
    @uploadthing/react: ^6.4.0 => 6.4.0 
    typescript: ^5 => 5.3.2 
    uploadthing: ^6.6.0 => 6.6.0

Describe the bug

I’m using the Dropzone component to upload files. I want to display the “One or more files are bigger than allowed for their type” error on the client (notifying the user that they cant upload that file size due to the maxFileSize)

If I add the errorFormatter I get this:

Error uploading file Unable to get presigned urls
  - Above error caused by: {
  error: 'One or more files are bigger than allowed for their type',
  data: [ { type: 'pdf', max: 4194304, actual: 17101326 } ]
}

I wrote in the “Error Handling / Catching errors on the client” docs section that I can use onUploadError to log the server error on the client, but both don’t work:

onUploadError property from useUploadthing hook

Property 'onUploadError' does not exist on type '{ readonly startUpload: (files: File[], input?: undefined) => Promise<ClientUploadedFileData<null>[] | undefined>; readonly isUploading: boolean; readonly permittedFileInfo: { ...; } | undefined; }'.ts(2339)

onUploadError prop on UploadDropzone component

Type '{ children: ({ getRootProps, getInputProps, acceptedFiles }: DropzoneState) => Element; onUploadError: (error: Error) => void; multiple: false; onDrop: <T extends File>(acceptedFile: T[]) => Promise<{ id: string; dismiss: () => void; update: (props: ToasterToast) => void; } | undefined>; }' is not assignable to type 'IntrinsicAttributes & DropzoneProps & RefAttributes<DropzoneRef>'.
  Property 'onUploadError' does not exist on type 'IntrinsicAttributes & DropzoneProps & RefAttributes<DropzoneRef>'.

How can I log the error on the client?

(This issue might be related https://github.com/pingdotgg/uploadthing/issues/508, however it doesn’t seem solved despite being marked as closed)

Link to reproduction

https://github.com/moritzWa/ai-quote-finder

To reproduce

clone repo: https://github.com/moritzWa/ai-quote-finder
npm i
npm run dev

Additional information

👨‍👧‍👦 Contributing

🙋‍♂️ Yes, I’d be down to file a PR fixing this bug!

Code of Conduct

I agree to follow this project’s Code of Conduct

About this issue

Original URL
State: closed
Created 3 months ago
Comments: 15 (2 by maintainers)

Most upvoted comments

Thanks! I wasn’t aware this is the logic that passes the error to the client. hmm, this gives me this ts error:

This error is because we type the cause as unknown, you can serialize the cause using JSON.stringify() to resolve that error:

errorFormatter: (err) => {
    console.log('Error uploading file', err.message)
    console.log('  - Above error caused by:', err.cause)

    return {
      message: err.message,
      cause: JSON.stringify(err.cause),
    }
  }

On the client you would need to re-parse it out.

Alternatively, you could typeguard in the error formatter, and parse out the specific info you are looking for.

markflorkowski on Mar 27, 2024

I believe there should be additional properties on the error – I think you would want error.cause

error.cause is empty. The full stringified error is:

{"code":"INTERNAL_SERVER_ERROR","data":{"message":"Unable to get presigned urls"},"cause":{}}

moritzWa on Mar 22, 2024

Thanks - will try re-installing both.

moritzWa on Mar 21, 2024