Show error message when visit profile page of invalid user

src/components/user_profile/user_profile.js

@@ -4,6 +4,11 @@ import Timeline from '../timeline/timeline.vue'
 import FollowList from '../follow_list/follow_list.vue'
 
 const UserProfile = {
+  data () {
+    return {
+      error: false
+    }
+  },
   created () {
     this.$store.commit('clearTimeline', { timeline: 'user' })
     this.$store.commit('clearTimeline', { timeline: 'favorites' })
@@ -13,6 +18,9 @@ const UserProfile = {
     this.startFetchFavorites()
     if (!this.user.id) {
       this.$store.dispatch('fetchUser', this.fetchBy)
+        .catch(() => {
+          this.error = true
+        })
     }
   },
   destroyed () {

src/components/user_profile/user_profile.vue

@@ -55,7 +55,8 @@
       </div>
     </div>
     <div class="panel-body">
-      <i class="icon-spin3 animate-spin"></i>
+      <span v-if="error">{{ $t('user_profile.profile_does_not_exist') }}</span>
+      <i class="icon-spin3 animate-spin" v-else></i>
     </div>
   </div>
 </div>

src/i18n/en.json

@@ -383,7 +383,8 @@
     "mute_progress": "Muting..."
   },
   "user_profile": {
-    "timeline_title": "User Timeline"
+    "timeline_title": "User Timeline",
+    "profile_does_not_exist": "Sorry, this profile does not exist."
   },
   "who_to_follow": {
     "more": "More",

src/modules/users.js

@@ -140,7 +140,7 @@ const users = {
   getters,
   actions: {
     fetchUser (store, id) {
-      store.rootState.api.backendInteractor.fetchUser({ id })
+      return store.rootState.api.backendInteractor.fetchUser({ id })
         .then((user) => store.commit('addNewUsers', [user]))
     },
     fetchBlocks (store) {

src/services/api/api.service.js

@@ -244,6 +244,12 @@ const denyUser = ({id, credentials}) => {
 const fetchUser = ({id, credentials}) => {
   let url = `${USER_URL}?user_id=${id}`
   return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => {
+      if (!data.ok) {
+        throw Error(data.statusText)
+      }
+      return data
+    })
     .then((data) => data.json())
     .then((data) => parseUser(data))
 }