Throw error to user when using `onChange` hook

default discord avatar
plainnn
3 weeks ago
9

I'm trying to ensure a block is always first in the block list, is there a way to throw a custom error when it's incorrect? Currently this code just logs out to the console, but i want to show an error to the user...



    beforeChange: [
      async ({ data }): Promise<any> => {
        // Check the order of the blocks, if homepageHeroSlides is not first, throw an error
        const { blocks } = data;
        const homepageHeroSlidesIndex = blocks.findIndex(
          (block) => block.blockType === 'homepageHeroBlock'
        );
        if (homepageHeroSlidesIndex !== 0) {
          throw new Error('Homepage Hero Slides must be the first block');
        }
      },
    ],
  • discord user avatar
    jesschow
    Payload Team
    3 weeks ago

    Hi @plainnn - try replacing the line 'throw new Error(...)' with the following:



    toast.error('Homepage Hero Slides must be the first block')
  • default discord avatar
    plainnn
    3 weeks ago

    @jesschow thanks for the reply, unfortunately that doesn't seem to do anything, it just saves like normal

  • discord user avatar
    jesschow
    Payload Team
    3 weeks ago

    Is this a collection or field

    beforeChange

    hook? Did you import

    import { toast } from 'react-toastify'

    ?

  • default discord avatar
    plainnn
    3 weeks ago

    It's actually a

    GlobalConfig

    hook, and yeah, imported toast correctly 👌



    const Homepage: GlobalConfig = {
      slug: 'homepage',
      access: {
        read: (): boolean => true,
      },
      hooks: {
        beforeChange: [
          async ({ data, global, originalDoc, req }): Promise<any> => {
            const { blocks } = data;
            const homepageHeroSlidesIndex = blocks.findIndex(
              (block) => block.blockType === 'homepageHeroBlock'
            );
    
            console.log('homepageHeroBlockIndex', homepageHeroSlidesIndex);
    
            if (homepageHeroSlidesIndex !== 0) {
              toast.error('Homepage Hero Slides must be the first block');
              console.log('Homepage Hero Slides must be the first block');
            }
          },
        ],
      },
    // other stuff here
  • discord user avatar
    jesschow
    Payload Team
    3 weeks ago

    Odd, you can throw a

    toast.error

    directly from collections or custom components - not sure why this doesn't work for globals...



    Instead, give this a go

    import { APIError } from 'payload/errors'

    and then throw your error like this

    throw new APIError('Homepage Hero Slides must be the first block')
  • default discord avatar
    plainnn
    3 weeks ago

    @jesschow hmm, that works in the console, and shows a 'Something went wrong' toast error, but i want it to describe the issue to the user...

    [12:05:52] ERROR (payload): APIError: Homepage Hero Slides must be the first block
    image.png
  • discord user avatar
    jesschow
    Payload Team
    3 weeks ago

    Hmm that should allow you to output your custom error message... are there any other errors in your console?

    Screenshot_2023-11-07_at_12.09.02_PM.png
    Screenshot_2023-11-07_at_12.15.18_PM.png
  • default discord avatar
    plainnn
    3 weeks ago

    Just a 500 which appears when trying to save



    @jesschow after a bit of googling, I needed to use


       throw new APIError(
                'Hompage Hero Slides must be the first block',
                400,
                undefined,
                true
              );
    image.png
  • discord user avatar
    jesschow
    Payload Team
    3 weeks ago

    Oic it needed to be extended. Is the error displaying the custom message correctly now?

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.