DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Vue 2.6.6 Release part1 Async Error Handling
florent giraud
florent giraud

Posted on • Updated on

Vue 2.6.6 Release part1 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);
};
Enter fullscreen mode Exit fullscreen mode

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");
  }
};

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

Enter fullscreen mode Exit fullscreen mode

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;
  }
};

Enter fullscreen mode Exit fullscreen mode

Important:

⚠️ ⚠️ 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);
    });
  }
};

Enter fullscreen mode Exit fullscreen mode
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;
  },
};

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

Easy right ? πŸ˜„

Async:

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

<script>
export default {
  name: "comp",
  mounted() {
    setTimeout(() => {
        this.$emit("custom")
    }, 1500)
  }
};
</script>
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

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!

PS: If you want to check more about release COME HERE

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.