add error handling for external api requests

apps/web/src/components/events-display/index.tsx

@@ -76,9 +76,14 @@ async function EventList({
 }) {
   const events = await fetchEvents();
 
+  if (!events.ok) {
+    console.warn("Failed to fetch events from Ilmomasiina", events.error);
+    return null;
+  }
+
   return (
     <ul className="space-y-4">
-      {events.map((event) => (
+      {events.data.map((event) => (
         <EventItem
           event={event}
           ilmolinkText={ilmolinkText}

apps/web/src/dictionaries/en.json

@@ -7,5 +7,8 @@
   },
   "heading": {
     "Upcoming events": "Upcoming events"
+  },
+  "errors": {
+    "ilmomasiina-fetch-fail": "Failed to fetch events from Ilmomasiina. Please try again later."
   }
 }

apps/web/src/dictionaries/fi.json

@@ -7,5 +7,8 @@
   },
   "heading": {
     "Upcoming events": "Tulevat tapahtumat"
+  },
+  "errors": {
+    "ilmomasiina-fetch-fail": "Ilmomasiinassa tapahtui virhe. Yritä myöhemmin uudelleen."
   }
 }

apps/web/src/lib/api/external/helpers.ts

@@ -0,0 +1,29 @@
+import type { Dictionary } from "../../dictionaries";
+
+export type ErrorType = keyof Dictionary["errors"];
+
+export interface OkResponse<T> {
+  ok: true;
+  error: null;
+  data: T;
+}
+
+export interface ErrorResponse {
+  ok: false;
+  error: ErrorType;
+  data: null;
+}
+
+export type ApiResponse<T> = OkResponse<T> | ErrorResponse;
+
+export const ok = <T>(data: T): OkResponse<T> => ({
+  ok: true,
+  error: null,
+  data,
+});
+
+export const err = (error: ErrorType): ErrorResponse => ({
+  ok: false,
+  error,
+  data: null,
+});

apps/web/src/lib/api/external/ilmomasiina.ts

@@ -1,3 +1,6 @@
+import type { ApiResponse } from "./helpers";
+import { err, ok } from "./helpers";
+
 export type IlmomasiinaResponse = IlmomasiinaEvent[];
 
 export interface IlmomasiinaEvent {
@@ -39,9 +42,14 @@ export interface EventQuota {
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- ideally would throw during build, but let's at least throw here if it's missing
 const baseUrl = process.env.PUBLIC_ILMOMASIINA_URL!;
 
-export const fetchEvents = async (): Promise<IlmomasiinaResponse> => {
+export const fetchEvents = async (): Promise<
+  ApiResponse<IlmomasiinaEvent[]>
+> => {
   const response = await fetch(`${baseUrl}/api/events`);
+  if (!response.ok) {
+    return err("ilmomasiina-fetch-fail");
+  }
   const data = (await response.json()) as IlmomasiinaResponse;
 
-  return data;
+  return ok(data);
 };