Improved error messaging for project retrieval

.env

@@ -1 +1 @@
-API_ENDPOINT=cdn.guusvanmeerveld.dev
+CDN_ENDPOINT=cdn.guusvanmeerveld.dev

next.config.js

@@ -8,9 +8,9 @@ const { i18n } = require('./next-i18next.config');
 module.exports = {
 	i18n,
 	images: {
-		domains: [process.env.API_ENDPOINT],
+		domains: [process.env.CDN_ENDPOINT],
 	},
 	env: {
-		API_ENDPOINT: process.env.API_ENDPOINT,
+		CDN_ENDPOINT: process.env.CDN_ENDPOINT,
 	},
 };

package.json

@@ -11,6 +11,7 @@
 	},
 	"dependencies": {
 		"axios": "^0.21.4",
+		"chalk": "^4.1.2",
 		"milligram": "^1.4.1",
 		"next": "^11.1.2",
 		"next-i18next": "^8.8.0",

src/components/Project.tsx

@@ -28,7 +28,7 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
 				{cover ? (
 					<div className={styles.cover}>
 						<Image
-							src={`https://${process.env.API_ENDPOINT}/portfolio/${cover}`}
+							src={`https://${process.env.CDN_ENDPOINT}/portfolio/${cover}`}
 							width={200}
 							height={200}
 							alt={name}

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import { GetStaticProps, NextPage } from 'next';
 
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
+import chalk from 'chalk';
 
 import Image from 'next/image';
 
@@ -54,16 +55,36 @@ const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
 };
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => {
-	const { data: projects } = await axios(
+	const translation = await serverSideTranslations(locale, ['home', 'nav']);
-		`https://${process.env.API_ENDPOINT}/portfolio/projects-${locale}.json`
+
+	const projects: ProjectModel[] | undefined = await axios(
+		`https://${process.env.CDN_ENDPOINT}/portfolio/projects-${locale}.json`
+	)
+		.then(({ data }) => {
+			console.log(
+				chalk`{magenta event} - retrieved projects from ` +
+					process.env.CDN_ENDPOINT +
+					' successfully'
 			);
 
+			return data;
+		})
+		.catch((error: AxiosError) => {
+			console.log(chalk`{red error} - failed to retrieve projects:`);
+
+			console.log(error.message);
+		});
+
+	if (projects) {
 		return {
 			props: {
-			...(await serverSideTranslations(locale, ['home', 'nav'])),
+				...translation,
 				projects,
 			},
 		};
+	}
+
+	throw new Error('Failed to retrieve projects from ' + process.env.CDN_ENDPOINT);
 };
 
 export default Home;