Display debug data in Error view (Dev mode only)

resources/js/app.js

@@ -51,12 +51,14 @@ const router = new VueRouter({
         {
             path: '/404',
             name: '404',
-            component: NotFound
+            component: NotFound,
+            props: true
         },
         {
             path: '/error',
             name: 'GenericError',
-            component: NotFound
+            component: NotFound,
+            props: true
         },
     ],
 });

resources/js/views/Accounts.vue

@@ -158,7 +158,7 @@
                 })
                 .catch(error => {
                     if (error.response.status === 404) {
-                        this.$router.push({name: '404' });
+                        this.$router.push({name: '404', params: { err : error.response }});
                     }
                 });  
             },

resources/js/views/Error.vue

@@ -9,6 +9,13 @@
                 <p class="error-generic"></p>
                 <p>An error occured, please <router-link :to="{ name: 'accounts' }" class="is-text has-text-white">refresh</router-link></p>
             </div>
+            <div v-if="debugMode == 'development'">
+                <p class="debug">
+                    <code>
+                        {{ debug }}
+                    </code>
+                </p>
+            </div>
         </modal>
     </div>
 </template>
@@ -20,10 +27,19 @@
     export default {
         data(){
             return {
-                ShowModal : true
+                ShowModal : true,
+                debug : this.err.data,
             }
         },
 
+        computed: {
+            debugMode: function() {
+                return process.env.NODE_ENV
+            }
+        },
+
+        props: ['err'],
+
         components: {
             Modal
         },