Uncatchable error from useUpdateItem

[leffot]

Using

• Next.js v12.1.5
• React v18.0.0
• storefront-data-hooks v1.7.0

Issue
When a user tries to increment a product’s inventory beyond the maximum available, an error is thrown: Uncaught (in promise) Error: An unexpected error ocurred with the Bigcommerce API.

Of course, we expect an error to be returned in this instance, since the user should not be able to add more inventory to their cart, as they’ve already hit the limit.

But what’s odd is that this error cannot be caught, which means we can’t pass the error along to the user.

Our Incrementer component looks something like this:

export default function Incrementer({ item, quantity }) {
    const updateItem = useUpdateItem(item, {
        include: [
            'line_items.physical_items.options',
            'line_items.digital_items.options',
        ],
    })
    
    const updateQty = async newValue => {
        try {
            await updateItem({
                quantity: parseInt(newValue),
            })
        } catch (error) {
            console.log(error)
        }
    }

    return (
        <ActionButton
            caption='Increase Quantity:'
            onClick={() => updateQty(quantity + 1)}
        >
            <ChevronUp />
        </ActionButton>
    )
}

The call to updateItem is wrapped in a try...catch, so conceivably the error should be caught. Is there some other approach we’re supposed to take here?

And in fact it appears that updateItem doesn’t even return a promise, because if we try this:

const res = updateItem(...)
console.log(res)

Then res is immediately logged as undefined, and the error is thrown a few seconds later. Thoughts?

[jorgemasta]

Thanks for the detailed issue @leffot! 🙌

I have debugged this and looks like it's related to this debounce

storefront-data-hooks/src/cart/use-update-item.tsx

Line 54 in abbe17a

debounce(async (newItem: UpdateItemInput) => {

What's happening?

1. A product has a stock limit
2. If the stock is exceeded when using the useUpdateItem, it will fail
3. Because we have that debounce, the error is not thrown on the first failed request.
4. It's throwing an error on the next request

How to solve it?

I would remove it from the library and let the users decide if they want a debounce or not. (cc @jivewise)

[leffot]

Thanks for the quick reply @jorgemasta! That makes sense. I appreciate you looking into it.

[jorgemasta]

The latest beta release includes this fix. You can try it running yarn add @bigcommerce/storefront-data-hooks@beta.

Closing because it will be included in the next release.

[leffot]

Thanks @jorgemasta. Works like a charm!