Using Remix API routes as a reverse proxy

Last updated:

|
Warning

  1. The following self-hosted proxy isn't provided by PostHog, so we can't take responsibility for it! If unsure, we recommend using our managed reverse proxy.

  2. If you are using the EU cloud then use eu instead of us in all domains (e.g. us.i.posthog.com -> eu.i.posthog.com).

  3. Avoid using generic or common path names like /analytics, /tracking, /ingest, or /posthog for your reverse proxy. They will most likely be blocked. Instead, use a non-obvious path name or something random and unique to your application that's unlikely to appear in a filter list.

If you are using Remix, you can use API routes to set up a reverse proxy.

Create a file <ph_proxy_path>.$.tsx in the routes folder. For example, if your proxy path is /ph-relay-xyz123, name the file ph-relay-xyz123.$.tsx.

In this file, set up code to match requests to a custom route, set a new host header, change the URL to point to PostHog, and rewrite the response.

JavaScript
import type { ActionFunction, LoaderFunction } from "@remix-run/node";


const API_HOST = "eu.i.posthog.com";
const ASSET_HOST = "eu-assets.i.posthog.com";


const posthogProxy = async (request: Request) => {
  const url = new URL(request.url);
  const hostname = url.pathname.startsWith("/<ph_proxy_path>/static/")
    ? ASSET_HOST
    : API_HOST;


  const newUrl = new URL(url);
  newUrl.protocol = "https";
  newUrl.hostname = hostname;
  newUrl.port = "443";
  newUrl.pathname = newUrl.pathname.replace(/^\/<ph_proxy_path>/, "");


  const headers = new Headers(request.headers);
  headers.set("host", hostname);


  const response = await fetch(newUrl, {
    method: request.method,
    headers,
    body: request.body,
  });


  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers,
  });
};


export const loader: LoaderFunction = async ({ request }) =>
  posthogProxy(request);


export const action: ActionFunction = async ({ request }) =>
  posthogProxy(request);

Once done, configure the PostHog client to send requests via your rewrite.

JavaScript
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
  api_host: "/<ph_proxy_path>",
  ui_host: "<ph_app_host>"
})

Questions? Ask Max AI.

It's easier than reading through 799 pages of documentation

Community questions

Was this page useful?

Next article

Using SvelteKit server hooks as a reverse proxy

For SvelteKit, you can use server hooks to proxy requests to PostHog. We've tested this (and it works) with Cloudflare Workers. To do this, create a file named hooks.server.ts in your src directory (or the dir you configured to contain source files). In this file, set up code to match requests to a custom route, adjust the relevant headers, change the URL to point to PostHog, and rewrite the response. Note: This only works in SSR mode. If your site is statically generated, SvelteKit…

Read next article