How i handle the error with Fetch in next.js - error-handling

Question

I tried to build a PWA with next.js
My idea is that i call the API to get data .But sometimes that API does not give the right datatypes or the data are not available.
My project is about showing the canteen nearby and show theirs menu
I checked the API , so i knew that sometime it give back the wrong data for the date.
Could someone to help me to handle it.
Here is my codes :
import {useState} from 'react';
import {useEffect} from 'react';
import {useRouter} from 'next/router';
console.log('test');
const Test = () => {
const current = new Date();
const year = current.getFullYear();
const month = current.getMonth() + 1;
const day = current.getDate();
const today = `${year}-${month<10?`0${month}`:`${month}`}-${day}`;
const [date, setDate] = useState(today);
const [menu, setMenu] = useState([]);
const router = useRouter();
const { id } = router.query;
console.log(id);
console.log(date);
const handleMenu = async () => {
const open = await fetch(`https://openmensa.org/api/v2/canteens/${id}/days/${date}`);
const openData = await open.json();
console.log(openData);
console.log(openData['closed']);
if (openData['closed'] === false) {
const res = await fetch(`https://openmensa.org/api/v2/canteens/${id}/days/${date}/meals`);
const data = await res.json();
console.log(data);
setMenu(data);
}
else {
console.log('closed');
const data = [{id:1,name :'Mensa ist geschlossen'}];
}
}
return (
<div>
<input type="text"
value={date}
onChange={(e) => setDate(e.target.value)}
/>
<button onClick={handleMenu}>Get Menu</button>
<h1>Menu</h1>
<p>This is the Menu page</p>
{menu.map((meal) => (
<div key={meal.id}>
<h3>{meal.name}</h3>
<p>Price for students :{meal.prices.students}</p>
<p>Price for employees :{meal.prices.employees}</p>
<p>Price for othters :{meal.prices.others}</p>
<p>Price for pupils :{meal.prices.pupils} kostenlos</p>
</div>))}
</div>
);
}
export default Test;
And here is the error i got
Unhandled Runtime Error
pages/mensen/[id]/review/menu.js (26:40) # eval
24 | const open = await fetch(`https://openmensa.org/api/v2/canteens/${id}/days/${date}`);
25 |
> 26 | const openData = await open.json();
| ^
27 | console.log(openData);
28 | console.log(openData['closed']);
29 |
Thank you so much .