full stack Nextjs on pages with hono | Sometimes Work, Sometimes Not
I am getting some weird error, once there is some error in my useEffect hook, i get 500 error back in reponse. Then if i again reload the page the whole website with all routes whichever i visit shows 500 error page.
It sometimes work,sometimes not
this is how my useEffect looks like:
Here is my /api file
It sometimes work,sometimes not
this is how my useEffect looks like:
useEffect(() => {
const fetchNews = async () => {
try {
const response = await fetch("/api/news/top");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setDropDownArticles(data as NewsData);
const article_list: topArticle[] = [];
Object.keys(data as NewsData).forEach((category) => {
(data as any)[category].slice(0, 2).forEach((items: Article) => {
const item: topArticle = {
title: items.title,
image_url: items.image_url,
};
article_list.push(item);
});
});
setTopArticles(article_list);
} catch (error) {
console.error("Error fetching news: ", error);
}
};
fetchNews();
}, []); useEffect(() => {
const fetchNews = async () => {
try {
const response = await fetch("/api/news/top");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setDropDownArticles(data as NewsData);
const article_list: topArticle[] = [];
Object.keys(data as NewsData).forEach((category) => {
(data as any)[category].slice(0, 2).forEach((items: Article) => {
const item: topArticle = {
title: items.title,
image_url: items.image_url,
};
article_list.push(item);
});
});
setTopArticles(article_list);
} catch (error) {
console.error("Error fetching news: ", error);
}
};
fetchNews();
}, []);Here is my /api file
app.get("/news/top", async (ctx) => {
try {
const { KV } = getRequestContext().env;
const keys = ["business", "politics", "sports", "tech", "business"]; // Changed the last key to "top"
const promises = keys.map((key) => KV.get(key));
const [business_news, politics_news, sports_news, tech_news, top_news] =
await Promise.all(promises);
const news = {
business: JSON.parse(business_news || "null"),
politics: JSON.parse(politics_news || "null"),
sports: JSON.parse(sports_news || "null"),
tech: JSON.parse(tech_news || "null"),
top: JSON.parse(top_news || "null"),
};
return ctx.json(news);
} catch (error) {
console.error("error: ", error);
return ctx.json({ message: "Internal server error" });
}
});app.get("/news/top", async (ctx) => {
try {
const { KV } = getRequestContext().env;
const keys = ["business", "politics", "sports", "tech", "business"]; // Changed the last key to "top"
const promises = keys.map((key) => KV.get(key));
const [business_news, politics_news, sports_news, tech_news, top_news] =
await Promise.all(promises);
const news = {
business: JSON.parse(business_news || "null"),
politics: JSON.parse(politics_news || "null"),
sports: JSON.parse(sports_news || "null"),
tech: JSON.parse(tech_news || "null"),
top: JSON.parse(top_news || "null"),
};
return ctx.json(news);
} catch (error) {
console.error("error: ", error);
return ctx.json({ message: "Internal server error" });
}
});