Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Is there a way to create a toast error message on the frontend from within a doc, or field hook?

default discord avatar
Zephury12 months ago
8

I want to ensure that a page can only be created from the default locale, as I need to ensure it's default pathname is created, before any sort of localized pathname is added.



I'd like to do something like this:


  if (operation === "create" && isDefaultLocale) {
    throw new Error("Pages must be created within the default locale.");
  }


However, that error only shows in the server's console. Is there a way I can send that error message to the client, in order to be displayed within a toast message/notification, instead of saying a non-descriptive "Something went wrong"?

  • discord user avatar
    denolfe
    12 months ago

    In order for an error to show up in the toast notification it must have the

    isPublic

    property on it.



    The easiest way to do this would be to extend our existing

    APIError

    with a new class, then throw that class. Here is an example:



    import { APIError } from 'payload/errors'
    class MySpecialError extends APIError {
      constructor(message: string) {
        super(message, 400, undefined, true)
      }
    }


    The 4th parameter is the

    isPublic

    value.



    Then throw as you'd expect

    throw new MySpecialError('Cannot create in default locale')
    CleanShot_2023-10-20_at_20.39.27.png
  • default discord avatar
    Zephury12 months ago

    Thank you 👍🏻

  • default discord avatar
    jacko4911 months ago

    When I try to do this i get this error:


    TypeError: Class constructor APIError cannot be invoked without 'new'

    Seems to be related to this:


    https://stackoverflow.com/questions/50203369/class-constructor-cannot-be-invoked-without-new-typescript-with-commonjs

    Any ideas? thanks

  • discord user avatar
    denolfe
    11 months ago

    Can you show your code?

  • default discord avatar
    jacko4911 months ago

    @denolfe


    errorClasses.ts


    import { APIError } from "payload/errors";
    
    export class CustomAdminError extends APIError {
      constructor(message: string, statusCode: number) {
        super(message, statusCode, undefined, true)
      }
    }
    export default CustomAdminError;

    Calling it from a hook here:


    export const blockSuperAdminCreation: CollectionBeforeValidateHook = async ({
        data,
        req,
        operation,
        originalDoc
        }) => {
            if (operation === "create") {
                // If user is trying to create a super_admin, make sure they themselves are a super_admin
                if (data.roles.includes("super_admin")) {
                    if (req.user.roles.includes("super_admin")) {
                        return data
                    }
                    else {
                        //TODO: throw toast error
                        throw new CustomAdminError(`You are not allowed to access this site, please proceed to your site's domain`, 403)
                    }
                } else {
                    // If not creating super_admin, pass to creation accesss control
                    return data
                }
            }
        }
  • default discord avatar
    tributeone11 months ago

    i do get the same error, would be awesome if someone could help us!



    my error call does exist inside a beforeChange hook:



    throw new ConflictsError(

    Konflikte bei ContentIdentifierIDs gefunden: ${JSON.stringify(conflicts)}

    );

    import { APIError } from 'payload/errors' class ConflictsError extends APIError { constructor(message: string) { super(message, 400, undefined, true) } }

    [14:52:26] ERROR (payload): TypeError: Class constructor APIError cannot be invoked without 'new'


    at new ConflictsError



    @denolfe

  • discord user avatar
    denolfe
    11 months ago

    Likely something to do w/ your tsconfig.json target.



    Try using

    ES2017

    or greater

  • default discord avatar
    tributeone11 months ago

    That solved my problem. Thank you!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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