Self-healing URL in Astro

By Jorge Saud · July 19, 2024

First start to define what a self-healing URL is, a self-healing URL is like medium. com posts a URL that has a unique identifier to allow redirect to a beauty URL path the structure of the URL normally is https://giorgiosaud.medium.com/arquitectura-de-micro-frontend-trabaja-inteligentemente-no-m%C3%A1s-duro-8995417d821a this structure is the ${baseUrl}/${post-name}-${id} this is the one which allows us to detect a malformed URL, if this is in the name will be replaced with the original one for example https://giorgiosaud.medium.com/anything-8995417d821a will redirect you to the self-healed original URL,

In other frameworks, it is easy to find information about it but in Astro, I can’t find any doc related to it I made my implementation in which I use a self-healing ID in the content post, manually generated and I will add this ID to all my shareable links, and I made the implementation o a new [redirect] page inside /notebook path in pages folder:

---
import Container from "@components/container.astro";
import Layout from "@layouts/Layout.astro";
import { getCollection } from "astro:content";
export const prerender = false;
let path = Astro.url.pathname;
if (path.includes("/notebook/")) {
  const hashToHeal = path.match(/\/notebook\/.*?(\d{6})/)?.[1];
  if (hashToHeal) {
    const col = await getCollection("notes", (entry) => {
      return entry.data.selfHealing === hashToHeal;
    });

    if (col.length) {
      const redirect = "/notebook/" + col[0].slug;
      return Astro.redirect(redirect);
    }
  }
  return Astro.redirect("/404");
}
---

Before rendering my 404 page I will try to detect the self-healing ID and redirect to the collection available with this ID then in my normal URL I don’t need to apply this but in the shareable link, I will include it because in other pages is common that the link is bad referenced.

For use this functionality we must me in hybrid mode.

Thanks to Tim Neubauer for the copy code button I use it only touching the css, and a little copilot refactor but it was great.