fix(ui): handle 404 for non-existing profiles

Author: danielroe

app/pages/profile/[handle]/index.vue

@@ -4,11 +4,27 @@ import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
 const route = useRoute('profile-handle')
 const handle = computed(() => route.params.handle)
 
-const { data: profile } = useFetch<NPMXProfile>(() => `/api/social/profile/${handle.value}`, {
+const {
+  data: profile,
+  status: profileStatus,
+  error: profileError,
+} = await useFetch<NPMXProfile>(() => `/api/social/profile/${handle.value}`, {
   default: () => ({ displayName: handle.value, description: '', website: '' }),
-  server: false,
 })
 
+if (
+  profileStatus.value === 'error' &&
+  profileError.value?.statusCode &&
+  profileError.value.statusCode >= 400 &&
+  profileError.value.statusCode < 500
+) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('profile.not_found'),
+    message: $t('profile.not_found_message', { handle: handle.value }),
+  })
+}
+
 const { user } = useAtproto()
 const isEditing = ref(false)
 const displayNameInput = ref()

i18n/locales/en.json

@@ -154,7 +154,9 @@
     "website_placeholder": "https://example.com",
     "likes": "Likes",
     "seo_title": "{handle} - npmx",
-    "seo_description": "npmx profile by {handle}"
+    "seo_description": "npmx profile by {handle}",
+    "not_found": "Profile Not Found",
+    "not_found_message": "The profile for {handle} could not be found."
   },
   "package": {
     "not_found": "Package Not Found",

i18n/schema.json

@@ -468,6 +468,12 @@
         },
         "seo_description": {
           "type": "string"
+        },
+        "not_found": {
+          "type": "string"
+        },
+        "not_found_message": {
+          "type": "string"
         }
       },
       "additionalProperties": false

lunaria/files/en-GB.json

@@ -153,7 +153,9 @@
     "website_placeholder": "https://example.com",
     "likes": "Likes",
     "seo_title": "{handle} - npmx",
-    "seo_description": "npmx profile by {handle}"
+    "seo_description": "npmx profile by {handle}",
+    "not_found": "Profile Not Found",
+    "not_found_message": "The profile for {handle} could not be found."
   },
   "package": {
     "not_found": "Package Not Found",

lunaria/files/en-US.json

@@ -153,7 +153,9 @@
     "website_placeholder": "https://example.com",
     "likes": "Likes",
     "seo_title": "{handle} - npmx",
-    "seo_description": "npmx profile by {handle}"
+    "seo_description": "npmx profile by {handle}",
+    "not_found": "Profile Not Found",
+    "not_found_message": "The profile for {handle} could not be found."
   },
   "package": {
     "not_found": "Package Not Found",