From 8d58ff3590c762999c3727989d0da02a63e8c647 Mon Sep 17 00:00:00 2001
From: YuukanOO <julien+github@leicher.me>
Date: Fri, 22 Jan 2021 09:15:22 +0100
Subject: [PATCH] add error boundary

---
 vue2/src/App.vue                      |  6 +++++-
 vue2/src/components/Card.vue          |  1 +
 vue2/src/components/ErrorBoundary.vue | 18 ++++++++++++++++++
 vue2/src/main.js                      |  3 +++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 vue2/src/components/ErrorBoundary.vue

diff --git a/vue2/src/App.vue b/vue2/src/App.vue
index 9f79ba4..f8fd815 100644
--- a/vue2/src/App.vue
+++ b/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,
diff --git a/vue2/src/components/Card.vue b/vue2/src/components/Card.vue
index 037d4fa..656d336 100644
--- a/vue2/src/components/Card.vue
+++ b/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>
diff --git a/vue2/src/components/ErrorBoundary.vue b/vue2/src/components/ErrorBoundary.vue
new file mode 100644
index 0000000..d54f2a0
--- /dev/null
+++ b/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>
diff --git a/vue2/src/main.js b/vue2/src/main.js
index df0ad31..2782719 100644
--- a/vue2/src/main.js
+++ b/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,