Proxy with Astro

An on-demand Astro endpoint relays the script and events. It needs a server adapter.

Set it up

1. Make sure your project has an adapter

   Server endpoints run only with an adapter such as @astrojs/node, @astrojs/vercel, @astrojs/netlify or @astrojs/cloudflare. Add one with npx astro add node (or your host's name). Fully static sites: use your host's recipe instead (see the notes).

2. Add the endpoint

   src/pages/a/[kind].ts

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   17

   18

   19

   20

   21

   22

   23

   24

   25

   26

   27

   28

   // src/pages/a/[kind].ts · needs an Astro adapter (Node, Vercel, Netlify or Cloudflare)
   import type { APIRoute } from "astro";
   
   export const prerender = false;
   
   export const ALL: APIRoute = async ({ params, request, clientAddress }) => {
     const script = params.kind === "script" && request.method === "GET";
     const event = params.kind === "event" && request.method === "POST";
     if (!script && !event) return new Response("Not found", { status: 404 });
     const headers = new Headers({ "x-visitor-ip": clientAddress });
     for (const name of ["content-type", "origin", "user-agent"]) {
       const value = request.headers.get(name);
       if (value) headers.set(name, value);
     }
     const upstream = await fetch(script ? "https://metricraven.com/js/script.js" : "https://metricraven.com/api/v1/collect", {
       method: request.method,
       headers,
       body: event ? await request.arrayBuffer() : undefined,
       signal: AbortSignal.timeout(15000),
     });
     return new Response(upstream.body, {
       status: upstream.status,
       headers: {
         "Content-Type": upstream.headers.get("content-type") || "application/octet-stream",
         "Cache-Control": script ? "public, max-age=3600" : "no-store",
       },
     });
   };

   clientAddress is the visitor IP as your adapter reports it. prerender = false keeps this one route on demand even when the rest of the site is static.

3. Update the tag in your base layout

   Astro doesn't bundle a script tag that has attributes besides src, so the tag works as is. Adding is:inline makes that explicit.

4. Point your script tag at your own paths

   Replace your MetricRaven tag with this one. src loads the tracker from your domain and data-api sends its events there too.

   Your website's shared layout

   Copy

   1

   <script defer src="/a/script" data-api="/a/event" data-site-id="YOUR_SITE_ID"></script>

Notes

• Static Astro builds have no server. Use the Vercel, Netlify or Cloudflare Workers recipe for your host.
• With the Node adapter behind a load balancer, check that clientAddress is the visitor and not the balancer.

How the proxy works and which headers it must send: Use your own domain.