giraud florent

Vue 2.6.6 Release part1 Async Error Handling

Async Error Handling

Yeah the new release of Vue is up ! πŸŽ‰

Today we will speak about the first part: Async Error Handling

For the history of the vue async error handling check HERE

First, how to configure the async error handling !

Vue.config.errorHandler = (err, vm, info) => {
  // err => the message error
  // vm the exact component where the error occur
  // info is error type v-on / lifecycle etc
  console.log("[ERROR CATCH]: ", err);
  console.log("[ERROR COMPONENT]: ", vm);
  console.log("[ERROR INFO]: ", info);
};

As older versions you can easily imagine here some custom errors tracking services like Sentry or Bugsnag do.

We will run into the paradise now !

1) Component LifeCycle Hook 😍

Here are 3 manners on how error handling works in hook lifecycle:

export default {
  name: "myAwesomeComponent",
  mounted() {
     // i do some work here
     throw new Error("i am a bad error");
  }
};

export default {
  name: "myAwesomeComponent",
  mounted() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("i am a bad error");
      }, 2000);
    });
  }
};

const err = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("i am a bad error");
    }, 2000);
  });
};

export default {
  name: "myAwesomeComponent",
  async mounted() {
      let ret = err();
      return ret;
  }
};

##Important:##

:warning: :warning: If you are using Promise or async you should return it as in the 2nd and 3rd example. If you don't do it, vue will not catch the error inside the config.error.

Don't do this ! πŸ‘ΏπŸ‘ΏπŸ‘Ώ

export default {
  name: "myAwesomeComponent",
  mounted() {
    // it will not being catch
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("i am a bad error");
      }, 2000);
    });
  }
};

const err = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject();
    }, 2000);
  });
};
export default {
  name: "myAwesomeComponent",
  async mounted() {
    // it will not being catch
    let ret = err();
    ret;
  },
};

Here you should return ret and return the new Promise

2) Vue event handlers (Custom and DOM listeners) 😍

Sync:

As always ...... Code ! 😎 😎

<template>
  <div>I am a simple component</div>
</template>

<script>
export default {
  name: "comp",
  mounted() {
    this.$emit("custom")
  }
};
</script>
<template>
    <div>
       <comp v-on:custom="customE"/>
    </div>
</template>

<script>
import Cmp from "@/Component";
export default {
  components: {
    Cmp
  },
  name: "app",
  methods: {
    customE() {
      throw new Error("i am a bad error");
    }
  }
};
</script>

Easy right ? :smile:

Async:

<template>
  <div>I am a simple component</div>
</template>

<script>
export default {
  name: "comp",
  mounted() {
    setTimeout(() => {
        this.$emit("custom")
    }, 1500)
  }
};
</script>
<template>
    <div>
       <comp v-on:custom="customE"/>
    </div>
</template>

<script>
const err = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("i am a bad error");
    }, 2000);
  });
};
import Cmp from "@/Component";
export default {
  components: {
    Cmp
  },
  name: "app",
  methods: {
    customE() {
      return err(); // the return is IMPORTANT here
    }
  }
};
</script>

This way, the error from those Promises chain will also be handled. So you can chain them as long as you think to return.

Thanks for reading :).

If you want to follow me or know about what i am actually working on!