POS UI Extension - Something went wrong

Extensions
1

I have a POS UI Extension which is a modal that lets a user search for a product then add it to the cart, then it sets a line item property on the newly added item. Everything is working as I expect except for the big red error bar.

IMG_0040.PNG
IMG_0040.PNG2224×1668 157 KB

I have connected my iPad to my computer and when debugging I cant see any errors. I have also tried removing as much of the code as I can to try and slim down the surrface area but I constantly get the error.

Below is my add to cart function that is causing the error.

const handleAddToCart = async () => {
    if (!product) return
    if (quantity === 0) return
    setIsAddingToCart(true)

    try {
      const cartQuantity = fractional.getCartQuantity(product, quantity, fractionalSettings)
      const lineItemUuid = await api.cart.addLineItem(product.variants[0].id, cartQuantity)

      await api.cart.addLineItemProperties(lineItemUuid, {
        "Cut Length": fractional.getCutLength(product, quantity, fractionalSettings)
      })
    } catch (error) {
      // Note: Seems like Toast API doesn't support error toasts
      api.toast.show("Error adding to cart")
      console.error(error)
    } finally {
      api.toast.show("Added to cart")
      setIsAddingToCart(false)
    }
  }

Any ideas what is going wrong?

2

Hey, do you have a fuller example here?
I suspect there is some kind of react error based on your note, as the api.toast.show should work all the time.

Also just to confirm you’ve done the debugging steps here, so you get a browser developer tools for your extension. Where you can see the console and any network requests made? Debugging