Create an Alert or Redirect after response has already been sent to the browser

Question

I have a contact form that fetches an Nodemailer end-point to SMTP the form details to the client. The code below works and I receive the email.

My problem is that if the Nodemail end-point is down, I want the user to see an error. What I have done on the page load is test the end-point and if down it display a errorMessage and disable the submit button.

What I would really like to do is to display an alert or redirect to fail-page once the submit button has been pressed and the fetch Nodemailer end-pointn down.

See below line and error when I call Astro.redirect("/fail-page");

---
import Layout from '../layouts/Layout.astro';
import ContactForm from '../components/ContactForm.astro'
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

let errorMessage = null;

//Test that nodemailer is running, if not show error and hide submit button in component
const response = await fetch("http://localhost:3000/send-email")
  .then((data) => {
    let errorMessage = null;
  })
  .catch((error) => {
    errorMessage = "Our contact form is out of order, please let us know [email protected]";
  });

if (Astro.request.method === "POST") {
  try {
    const data = await Astro.request.formData();
    const payload = {
      name: data.get("name"),
      company: data.get("company"),
      mobile: data.get("mobile"),
      email: data.get("email"),
      message: data.get("message"),
    };

    fetch("http://localhost:3000/send-email", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    })
      .then(async (response) => {
        if (!response.ok) {
          throw new Error("Failed to send email"); 
        }
        return response.json();
      })
      .then((data) => {
        console.log('message sent successfully');
        Astro.redirect("/success-page");
      })
      .catch((error) => {
        console.error(error);
        // Cannot redirect - error: AstroError [ResponseSentError]: The response has already been sent to the browser and cannot be altered.
        // How do I create an alert or a dom change to show a message?
        Astro.redirect("/fail-page");
      });
  } catch (error) {
    if (error instanceof Error) {
      console.error(error.message);
      // Handle the error by displaying an alert popup
    }
  }
}

---

<Layout title="Meet the Madini Minerals Team">
    <Header/>
  <div class="page-banner">
    <div class="banner-images">
      <img src="/contact_us/contact_banner.jpg" alt="Banner 1">
    </div>
  </div>
  <div class="content-container">
    <div class="right-content-mustard">
      <div class="text-button-container">
        <p class="h1 h1-white">For any queries<br>contact us</p>
        <a href=#start-text"></a><button class="custom-button">read more</button></a>
      </div>
    </div>
    <div class="content-image">
      <img src="/homepage/contact_us.jpg" alt="Contact Us Image" class="about-image"> 
    </div>
  </div>
  <div class="body-container body-container-small" id="start-text">
  <h1 class="h1">Contact Us</h1>
  
 <ContactForm errorMessage={errorMessage}/>
 
</div>
    <Footer/>
</Layout>
<style>
    .link-team-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
        gap: 2rem;
        padding-top: 20px;
    }
</style>