add error boundary

vue2/src/App.vue

@@ -14,7 +14,9 @@
       <!-- </div> -->
     </tabs>
 
-    <card firstname="john" lastname="doe" />
+    <error-boundary>
+      <card firstname="john" lastname="doe" />
+    </error-boundary>
     <greet />
     <counter :initialValue="58" />
     <a-form @custom-event="logEventTime" />
@@ -59,6 +61,7 @@
 
 <script>
 import Card from "./components/Card";
+import ErrorBoundary from "./components/ErrorBoundary";
 import Panel from "./components/Panel";
 import Tabs from "./components/Tabs";
 import TabItem from "./components/TabItem";
@@ -71,6 +74,7 @@ export default {
   components: {
     // MyCard: Card,
     CustomTable,
+    ErrorBoundary,
     Tabs,
     TabItem,
     Panel,

vue2/src/components/Card.vue

@@ -35,6 +35,7 @@ export default {
     // console.log("Prénom", this.firstname, "Nom", this.lastname);
     // this.firstname = this.$route.params.firstname;
     // this.lastname = this.$route.params.lastname;
+    // throw new Error("oops!");
   },
 };
 </script>

vue2/src/components/ErrorBoundary.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="boundary">
+    <slot v-if="err === null"></slot>
+    <p v-else>Une erreur est survenue, veuillez recharger la page !</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { err: null };
+  },
+  errorCaptured(err) {
+    this.err = err;
+    return false;
+  },
+};
+</script>

vue2/src/main.js

@@ -166,6 +166,9 @@ Vue.use({
   },
 });
 
+Vue.config.errorHandler = (err, vm) =>
+  console.log("erreur", err, "dans le composant", vm);
+
 new Vue({
   store,
   router,