Better error handling

2 files changed, 11 insertions, 3 deletions

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 44192e9a..ebf6c61a 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,3 +1,4 @@
+import get from 'lodash/get'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeline from '../timeline/timeline.vue'
@@ -18,8 +19,15 @@ const UserProfile = {
     this.startFetchFavorites()
     if (!this.user.id) {
       this.$store.dispatch('fetchUser', this.fetchBy)
-        .catch(() => {
-          this.error = true
+        .catch((reason) => {
+          const errorMessage = get(reason, 'error.error')
+          if (errorMessage === 'No user with such user_id') { // Known error
+            this.error = this.$t('user_profile.profile_does_not_exist')
+          } else if (errorMessage) {
+            this.error = errorMessage
+          } else {
+            this.error = this.$t('user_profile.profile_loading_error')
+          }
         })
     }
   },
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index ccebe20b..ba1a7760 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="panel-body">
-      <span v-if="error">{{ $t('user_profile.profile_does_not_exist') }}</span>
+      <span v-if="error">{{ error }}</span>
       <i class="icon-spin3 animate-spin" v-else></i>
     </div>
   </div>