I'm curious how I can have proper error handling to render an error component if an API request fails or returns a status code outside of 200 ?
#Error Handling in Astro API Fetch
strange lichen
languid garnetBOT
Hi @strange lichen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro provides a way to handle errors and render custom responses based on the status of an API request. You can use the Response object to return a custom response from your page. If an API request fails or returns a status code outside of 200, you can return a custom error page or a 404 page.
Here's an example from the Astro documentation:
---
import { getProduct } from '../api';
const product = await getProduct(Astro.params.id);
// No product found
if (!product) {
return new Response(null, {
status: 404,
statusText: 'Not found'
});
}
---
<html>
<!-- Page here... -->
</html>
In this example, the getProduct function is used to fetch a product from an API. If no product is found (which could be due to an error or the product simply not existing), a new Response is returned with a status of 404 and a status text of 'Not found'. This will result in a 404 page being displayed to the user.
You can customize this code to suit your needs. For example, you could check the status code of the API response and return a different Response based on the status code.
For more information, refer to the Astro documentation on server-side rendering (https://docs.astro.build/en/guides/server-side-rendering#response).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
strange lichen
How can i do this when using cookies to get a user access token? @languid garnet
languid garnetBOT
Let me check the knowledge base for you. One moment! :books:
When using cookies to get a user access token, you can handle errors by checking if the token exists and is valid. If the token is missing or invalid, you can return a custom error response.
Here's an example of how you might do this:
import type { APIRoute } from "astro";
import { app } from "../../../firebase/server";
import { getAuth } from "firebase-admin/auth";
export const get: APIRoute = async ({ request, cookies, redirect }) => {
const auth = getAuth(app);
/* Get token from request headers */
const idToken = request.headers.get("Authorization")?.split("Bearer ")[1];
if (!idToken) {
return new Response(
"No token found",
{ status: 401 }
);
}
/* Verify id token */
try {
await auth.verifyIdToken(idToken);
} catch (error) {
return new Response(
"Invalid token",
{ status: 401 }
);
}
/* Create and set session cookie */
const fiveDays = 60 * 60 * 24 * 5 * 1000;
const sessionCookie = await auth.createSessionCookie(idToken, {
expiresIn: fiveDays,
});
cookies.set("session", sessionCookie, {
path: "/",
});
}
In this example, the get function is an Astro server endpoint that gets the token from the request headers, verifies the token, and then sets a session cookie. If the token is missing or invalid, it returns a Response with a status of 401 (Unauthorized).
You can customize this code to suit your needs. For example, you could return a different Response based on the type of error, or you could render a custom error page.