diff --git a/resources/js/views/UserIndex.vue b/resources/js/views/UserIndex.vue
index 60843a8..81e64eb 100644
--- a/resources/js/views/UserIndex.vue
+++ b/resources/js/views/UserIndex.vue
@@ -1,7 +1,14 @@
 <template>
     <div class="users">
         <div class="loading" v-if="loading">Loading...</div>
-        <div v-if="error" class="error">{{ error }}</div>
+        <div v-if="error" class="error">
+            <p>{{ error }}</p>
+            <p>
+                <button @click.prevent="fetchData">
+                    Try again
+                </button>
+            </p>
+        </div>
         <ul v-if="users">
             <li v-for="{ name, email } in users">
                 <strong>Name:</strong>  {{ name }},
@@ -32,6 +39,9 @@ export default {
                 .then(response => {
                     this.loading = false;
                     this.users = response.data;
+                }).catch(error => {
+                    this.loading = false;
+                    this.error = error.response.data.message || error.message;
                 });
         }
     }
diff --git a/routes/api.php b/routes/api.php
index d4eae93..77ea24b 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -3,5 +3,8 @@
 use Illuminate\Http\Request;
 
 Route::get('/users', function() {
+    if(rand(1, 10) < 3) {
+        abort(500, 'We could not retrieve the users');
+    }
     return factory('App\User', 10)->make();
 });