#404 page

8 messages · Page 1 of 1 (latest)

zinc atlas
#

try {
const newNumber = parseInt(name!);

if (Number.isNaN(newNumber)) {
const response = await fetch(https://api.first2challenger.es/teams/name/${name});
if (!response.ok) {
throw new Error(Failed to fetch team data: ${response.status});
}
const data = await response.json();
team = data.result;
} else {
const response = await fetch(https://api.first2challenger.es/teams/${name});
if (!response.ok) {
throw new Error(Failed to fetch team data: ${response.status});
}
const data = await response.json();
team = data.result;
}
} catch (error) {
console.error("Error fetching team data:", error);
}

in case of response being "result": "Equipo no encontrado.", how do I do to return 404 page?

wheat crestBOT
#

Hi @zinc atlas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To return a 404 page when the API response indicates that the team was not found, you can use Astro's Response object to set the appropriate status code and then use Astro.redirect() to redirect to your custom 404 page. Here's how you can modify your code to achieve this:

---
try {
  const newNumber = parseInt(name!);

  let response;
  if (Number.isNaN(newNumber)) {
    response = await fetch(`<https://api.first2challenger.es/teams/name/${name}`>);
  } else {
    response = await fetch(`<https://api.first2challenger.es/teams/${name}`>);
  }

  if (!response.ok) {
    throw new Error(`Failed to fetch team data: ${response.status}`);
  }

  const data = await response.json();

  if (data.result === "Equipo no encontrado.") {
    return new Response(null, {
      status: 404,
      statusText: 'Not found'
    });
  }

  team = data.result;
} catch (error) {
  console.error("Error fetching team data:", error);
  return new Response(null, {
    status: 404,
    statusText: 'Not found'
  });
}
---

<!-- Rest of your component code -->

In this modified code, we check if the data.result is "Equipo no encontrado." (Team not found). If it is, we return a new Response object with a 404 status code. We do the same thing in the catch block to handle any other errors that might occur during the fetch operation.

To make this work, you need to ensure you have a custom 404 page set up in your Astro project. You can create a custom 404 page by adding a 404.astro or 404.md file in your src/pages/ directory as described in the Astro documentation on custom 404 error pages.

For example, you could create a file src/pages/404.astro with content like this:

# 
---
---
<html lang="en">
  <head>
    <title>Not Found</title>
  </head>
  <body>
    <h1>404: Not Found</h1>
    <p>The team you're looking for couldn't be found.</p>
  </body>
</html>

With this setup, when the API returns "Equipo no encontrado." or when there's an error fetching the team data, Astro will automatically serve your custom 404 page.

Astro Pages
Astro On-demand rendering features

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@zinc atlas Kapa.ai is still learning and improving, please let me know how I did by reacting below.

zinc atlas
#

how can i get a currentdomain from astro? @wheat crest

wheat crestBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

To get the current domain in Astro, you can use the Astro.url property. This property provides a URL object that contains information about the current page's URL, including the domain. Here's how you can access it:

---
const currentDomain = Astro.url.host;
---

<p>The current domain is: {currentDomain}</p>

The Astro.url property is part of the Astro global object, which is available in all .astro files. It provides a URL object constructed from the current request.url value.

Here are some important points to note:

  1. In development mode, Astro.url will typically return a localhost URL.

  2. For prerendered routes in production, the URL will be based on the site and base options in your Astro configuration.

  3. If the site option is not configured, prerendered pages will receive a localhost URL during builds.

You can also access other parts of the URL using Astro.url, such as:

  • Astro.url.pathname for the current path
  • Astro.url.origin for the full origin (protocol + domain)

For more detailed information about Astro.url, you can refer to the Astro API Reference documentation.

Astro render context

Remember that the actual domain in production will depend on where your site is hosted and how you've configured your site option in the Astro configuration.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: