Skip to content
This repository has been archived by the owner on May 21, 2020. It is now read-only.

[Core] Error handling #293

Open
andrzejewsky opened this issue Mar 25, 2020 · 3 comments
Open

[Core] Error handling #293

andrzejewsky opened this issue Mar 25, 2020 · 3 comments
Labels

Comments

@andrzejewsky
Copy link
Collaborator

andrzejewsky commented Mar 25, 2020

  1. Composables return errors object that contains all of errors under the keys that are defined in the core.
  2. A developer can use composable function and the errors field in the theme and is able to react on particular error itself.

example of composable function:

const useUser = () => {
 connst errors = ref({});

 const registerUser = () => {
  try {
    // .. 
   } catch (e) {
    errors.register = e;
   }
 };
 const loginUser = () => {
  try {
    // .. 
   } catch (e) {
    errors.login = e;
   }
  }

 return {
   errors,
   registerUser,
   loginUser
 };
}

now in the theme you can react on each error type:

<template>
 <div>
     <div v-if="errors.register">There was a problem with registering: {{ errors.register }}</div>
     <div v-if="errors.login">There was a problem with login: {{errors.login }}</div>
  </div>
</template>

 setup() {
   const { errors, ... } = useUser()

   // ...

  return { errors };
 }
@patzick
Copy link
Contributor

patzick commented Mar 25, 2020

I believe const errors = ref({}); should be already defined with properties which it contains

connst errors = ref({
  register: null,
  login: null
});

so basically UseUser interface needs to have a definition for errors and loadings objects.
also please edit examples to always clear errors for responsible methods:

const register = () => {
  errors.register = null // ----> this needs to be added
  try {
    // .. 
   } catch (e) {
    errors.register = e;
   }
 };

rest of this looks good to me :)

@lukeromanowicz
Copy link
Contributor

lukeromanowicz commented Mar 26, 2020

We need to use this way of handling errors to handle unhandled promises in our factories. e.g. at the end of useLocale and useUser. Otherwise, we will end up with unhandled rejections which are very hard to track.

@patzick
Copy link
Contributor

patzick commented Mar 31, 2020

Changes discussed

  • add computed with a flag if there are any errors in composable, example
    hasErrors => Object.values(errors).length
  • error object parameter has exact the same name as a method
  • add convertError helper, which can convert caught errors and return string. Example:
try {
  // .. 
 } catch (e) {
  errors.register = convertError(e);
 }

interface of convertError will be provided further by @andrzejewsky

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants