Handling errors and other events

[filrak]

Error handling in VSF Next

We will have a list of predefined errors and success messages for each composable. We wanted to capture here a dynamic nature of such events and make it easy to use it both on specific components or via global notifications. We're not sure if we want to use both versions or one is enough (the wider API surface is the worse so we're trying to find justification for both APIs)

User API

type AgnosticEvent = AgnosticError | AgnosticSuccess

//  {
//    type; 'error' | 'success',
//    id: string, // eg 'NOT_IN_STOCK'
//    message: string
//    $original: any // original error
//  }

const { cart, events } = useCart()

// you can listen to events happening
events.on(e => {
  if (e.type = 'error' && e.id = 'NOT_IN_STOCK') sendInAppNotification('error', e.message)
  if (e.type = 'success' && e.id = 'ADD_TO_CART') sendInAppNotification('success', e.message)
})

// or just use it as an object so you can use it in the different way and have typings
events.values //  { error: { NOT_IN_STOCK: errorVal, PRODUCT_DONT_EXIST: null, ... }, success { ... } }

Some usage examples:

• Object version

<template>
 <button @click="adddToCart(product)">Add to cart</button>
 <div v-if="cartEvents.error.notInStock">Product not in stock</dIv>
 <!-- you can also directly display the message from Error object but this doesn't mean you should :) -->
 <div v-if="cartEvents.error.productDontExist"> {{ cartEvents.error.productDontExist.message }}</dIv> 
</template>

<script>
export default {
  setup () {
    const { addToCart, events } = useCart()

    return {
      cartEvents: events.values
    }
  }
}
</script>

• Object version

<template>
 <button @click="adddToCart(product)">Add to cart</button>
 <div v-if="error.type === et.NOT_IN_STOCK">Product not in stock</dIv> 
 <div v-if="error.type === et.PRODUCT_DONT_EXIST">{{ error.message }}</dIv>
</template>

<script>
export default {
  setup () {
    const { addToCart, events } = useCart()
    const error = ref(null)

    events.on(e => {
      if (e.type === 'error' ) error.value = e
    })

    return {
      et: events.error.types
      error
    }
  }
}
</script>

Integrator API

const params: UseCartFactoryParams<Cart, LineItem, ProductVariant, any> = {
  // ...
  addToCart: async ({ currentCart, product, quantity }, { customQuery, report }) => {

    try {
      const { data } = await apiAddToCart(currentCart, product, quantity, customQuery);
      report.success.addToCart(product)
    } catch (e) {
      if (e.message === 'Not in stock') report.error.notInStock(e)
      report.error.custom('name', e)
    }
    return data.cart;
  },
}

┆Issue is synchronized with this Jira Story by Unito

[EugeneHlushko]

Yes this would be nice to have, especially when things like loading cart error too, e.g. api error while loading the cart.
I think API way would have IDE autocompletion to suggest events when typing vs in object i would need a list of constants to compare with in the v-ifs.

Hope this helps

[filrak]

@EugeneHlushko Thanks for the input! We're having exactly the same discussion :)

[filrak]

I've updated the RFC to have types in events

[bloodf]

This issue has been closed due to inactivity.

If you want to re-open the issue, please re-create the issue, and post newer information on this problem.