Handle 404

Author: GusevPM

error.vue

@@ -51,6 +51,15 @@ const getGithubIssueLink = computed(() => {
 				<Text v-if="error?.statusCode == 404" size="16" weight="500" color="secondary">
 					{{ error?.statusMessage }}
 				</Text>
+				<!-- <Flex v-if="error?.statusCode == 404" direction="column" gap="6">
+					<Text size="16" weight="500" color="secondary">
+						{{ error?.statusMessage }}
+					</Text>
+
+					<Text v-if="error?.data?.value" size="16" weight="500" color="secondary">
+						{{ error?.statusMessage }}
+					</Text>
+				</Flex> -->
 				<Text v-else size="16" weight="500" color="secondary"> Unknown Error </Text>
 
 				<Text

pages/address/[hash].vue

@@ -18,18 +18,18 @@ const route = useRoute()
 const router = useRouter()
 
 const address = ref()
-const hash = route.params.hash.startsWith("0x") ? route.params.hash.slice(2) : route.params.hash
-if (isValidId(hash, "address")) {
-	const { data: rawAddress } = await fetchAddressByHash(hash)
+
+if (isValidId(route.params.hash, "address")) {
+	const { data: rawAddress } = await fetchAddressByHash(route.params.hash)
 
 	if (!rawAddress.value) {
-		router.push("/")
+		throw createError({ statusCode: 404, statusMessage: `Address ${route.params.hash} not found` })
 	} else {
 		address.value = rawAddress.value
 		cacheStore.current.address = address.value
 	}
 } else {
-	router.push("/")
+	throw createError({ statusCode: 404, statusMessage: `Address ${route.params.hash} not found` })
 }
 
 defineOgImageComponent("AddressImage", {

pages/block/[height].vue

@@ -20,7 +20,7 @@ const route = useRoute()
 const block = ref()
 
 if (!isValidId(route.params.height, "block")) {
-	navigateTo("/")
+	throw createError({ statusCode: 404, statusMessage: `Block ${route.params.height} not found` })
 }
 
 const { data: rawBlock } = await fetchBlockByHeight(route.params.height)

pages/ibc/chain/[id].vue

@@ -9,13 +9,12 @@ import { IbcChainName } from "@/services/constants/ibc"
 import { fetchIbcChainsStats } from "@/services/api/stats"
 
 const route = useRoute()
-const router = useRouter()
 
 const { data } = await useAsyncData(`ibc-chains`, () => fetchIbcChainsStats({ limit: 100 }))
 const chain = ref(data.value.find((c) => c.chain === route.params.id))
 
 if (!chain.value) {
-	router.push("/")
+	throw createError({ statusCode: 404, statusMessage: `IBC chain ${route.params.id} not found` })
 }
 
 useHead({

pages/namespace/[id].vue

@@ -14,21 +14,20 @@ import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
-const router = useRouter()
 
 const namespace = ref()
 
 if (isValidId(route.params.id, "namespace")) {
 	const { data: rawNamespace } = await fetchNamespaceByID(route.params.id)
 
 	if (!rawNamespace.value) {
-		router.push("/")
+		throw createError({ statusCode: 404, statusMessage: `Namespace ${route.params.id} not found` })
 	} else {
 		namespace.value = rawNamespace.value[0]
 		cacheStore.current.namespace = namespace.value
 	}
 } else {
-	router.push("/")
+	throw createError({ statusCode: 404, statusMessage: `Namespace ${route.params.id} not found` })
 }
 
 defineOgImageComponent("NamespaceImage", {

pages/network/[slug].vue

@@ -16,13 +16,12 @@ const appStore = useAppStore()
 const cacheStore = useCacheStore()
 
 const route = useRoute()
-const router = useRouter()
 
 const rollup = ref()
 const { data: rawRollup } = await fetchRollupBySlug(route.params.slug)
 
 if (!rawRollup.value) {
-	router.push("/networks")
+	throw createError({ statusCode: 404, statusMessage: `Network ${route.params.slug} not found` })
 } else {
 	rollup.value = rawRollup.value
 	patchRollupColor()

pages/network/rank/[slug].vue

@@ -92,6 +92,10 @@ async function fetchData() {
 		fetchRollupRankingBySlug(slug),
 	])
 
+	if (!rollupData?.data?.value) {
+		throw createError({ statusCode: 404, statusMessage: `Network ${slug} not found` })
+	}
+
 	let description = []
 	for (const [key, value] of Object.entries(rankData?.scores)) {
 		const category = getMetricCategory(key, value)
@@ -244,7 +248,7 @@ const handleHowItWorksClick = () => {
 watch(
 	() => page.value,
 	async () => {
-		repos.value = await getRollupRepos(rollup.value.slug)
+		repos.value = await getRollupRepos(rollup.value?.slug)
 	},
 )
 

pages/proposal/[id].vue

@@ -22,27 +22,29 @@ if (isValidId(route.params.id, "proposal")) {
 	const { data: rawProposal } = await fetchProposalById({ id: route.params.id })
 
 	if (!rawProposal.value) {
-		navigateTo({
-			path: "/",
-			query: {
-				error: "not_found",
-				target: "proposal",
-				id: route.params.id,
-			},
-		})
+		throw createError({ statusCode: 404, statusMessage: `Proposal ${route.params.id} not found` })
+		// navigateTo({
+		// 	path: "/",
+		// 	query: {
+		// 		error: "not_found",
+		// 		target: "proposal",
+		// 		id: route.params.id,
+		// 	},
+		// })
 	} else {
 		proposal.value = rawProposal.value
 		cacheStore.current.proposal = proposal.value
 	}
 } else {
-		navigateTo({
-		path: "/",
-		query: {
-			error: "not_found",
-			target: "proposal",
-			id: route.params.id,
-		},
-	})
+	throw createError({ statusCode: 404, statusMessage: `Proposal ${route.params.id} not found` })
+	// navigateTo({
+	// 	path: "/",
+	// 	query: {
+	// 		error: "not_found",
+	// 		target: "proposal",
+	// 		id: route.params.id,
+	// 	},
+	// })
 }
 
 defineOgImageComponent("ProposalImage", {

pages/tx/[hash].vue

@@ -14,20 +14,19 @@ import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
-const router = useRouter()
 
 const tx = ref()
 const hash = route.params.hash.startsWith("0x") ? route.params.hash.slice(2) : route.params.hash
 if (isValidId(hash, "tx")) {
 	const { data: rawTx } = await fetchTxByHash(hash)
 	if (!rawTx.value) {
-		router.push("/")
+		throw createError({ statusCode: 404, statusMessage: `Transaction ${route.params.hash} not found` })
 	} else {
 		tx.value = rawTx.value
 		cacheStore.current.transaction = tx.value
 	}
 } else {
-	router.push("/")
+	throw createError({ statusCode: 404, statusMessage: `Transaction ${route.params.hash} not found` })
 }
 
 defineOgImageComponent("TxImage", {

pages/validator/[id].vue

@@ -13,20 +13,19 @@ import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
-const router = useRouter()
 
 const validator = ref()
 if (isValidId(route.params.id, "validator")) {
 	const { data: rawValidator } = await fetchValidatorByID(route.params.id)
 
 	if (!rawValidator.value) {
-		router.push("/")
+		throw createError({ statusCode: 404, statusMessage: `Validator ${route.params.id} not found` })
 	} else {
 		validator.value = rawValidator.value
 		cacheStore.current.validator = validator.value
 	}
 } else {
-	router.push("/")
+	throw createError({ statusCode: 404, statusMessage: `Validator ${route.params.id} not found` })
 }
 
 defineOgImageComponent("ValidatorImage", {