http.cat

About

This is the website that is hosted at https://http.cat.

The code for the older version hosted at the heroku platform is at the http-status-cats-api repo.

This version does not need any server side code. The API behavior is provided by a Nginx server config.

On v2.0.0 the website was built with React and pre-rendered with react-snap.

As of v3.0.0 it's built with Next.js (currently version 16).

Usage

Every status code is an image: https://http.cat/<code> (or https://http.cat/<code>.jpg), e.g. https://http.cat/404.

The same information as the status page is also available as JSON at https://http.cat/<code>.json:

curl https://http.cat/500.json

{
  "status": 500,
  "name": "Internal Server Error",
  "description": "The HTTP `500 Internal Server Error` server error response code indicates ...",
  "image": "https://http.cat/500",
  "url": "https://http.cat/status/500"
}

description is Markdown. The JSON can be fetched from other sites (it's sent with Access-Control-Allow-Origin: *). A code that doesn't exist, e.g. /999.json, returns a 404 with the body of /404.json, so check the HTTP status rather than the status field.

Postman Collection

There's a Postman collection with requests for the HTTP status cats, created by @SubramanyaRaj5. Use the button below to import it into your Postman app.

Using HTTP Cats as Nginx Error Pages

You can make your own Nginx server show HTTP Cats on its error pages with the integrations/nginx/http-cats.conf snippet. Download it to your Nginx snippets folder:

sudo wget -O /etc/nginx/snippets/http-cats.conf https://raw.githubusercontent.com/httpcats/http.cat/master/integrations/nginx/http-cats.conf

Then include it in the server block(s) where you want the cats:

server {
    # ...
    include snippets/http-cats.conf;
}

Reload Nginx with sudo nginx -t && sudo systemctl reload nginx, and visit a page that doesn't exist to see the 404 cat.

A few things to keep in mind:

• The original status code is kept, only the response body is replaced by the cat image.
• A location that defines its own error_page doesn't inherit these.
• If Nginx is a reverse proxy for an app, add proxy_intercept_errors on; to that location so the app's error responses also get cats.
• Each error page is fetched from http.cat. If it's unreachable, or its certificate can't be verified, Nginx responds with its own 502 Bad Gateway instead.
• Nothing from your visitors' requests (cookies, Authorization headers, bodies) is sent to http.cat, and only the image comes back: no cookies, always image/jpeg. http.cat's certificate is verified against /etc/ssl/certs/ca-certificates.crt; on RHEL and Fedora, change that path to /etc/pki/tls/certs/ca-bundle.crt.

Based on this gist by @mjmeyer, suggested by @mishailovic in #126.

Development

npm run dev

Runs the development server.

npm run build

Creates a build of the project.

npm test

Checks the content and the build output (run npm run build first).

npm run nginx:up
npm run test:smoke
npm run nginx:down

Serves out/ through the production Nginx config in Docker at https://localhost:8443 (with a self-signed certificate, so accept the browser warning), and checks every URL the specs describe against it. Use it before deploying: npm run dev doesn't run Nginx, so the image URLs (/404) and the JSON 404s and CORS header only work there. Don't use http://localhost:8080: like production, it redirects to https://http.cat, the live site. Run npm run nginx:up again after each build. If your user can't use Docker directly, the script runs docker with sudo. SMOKE_URL=https://http.cat npm run test:smoke runs the same checks against production.

New features and behavior changes start as a spec, see specs/README.md.

Adding a new image

Currently not all HTTP status codes are covered. You are welcome to create an issue or PR to cover them.

We've prepared some templates to make this process easier.

• Landscape template
• Portrait template

You can clone it, replace the information with the new one and export as a JPG image.

Then, upload it to both public/images and public/images-original folders and update the statuses.js file.

Finally you need to add a markdown file in /content/<status-code>.md with a description of the status code and links to official documentation. Please follow the format of already existing files. Also, copy this file over to /content/ca and ask Copilot, ChatGPT or Google, etc to translate the content to Catalan.

Credits

Thanks to @girliemac for creating the amazing http status cats images.

Thanks to @pfdborges for creating the http.cat logo (RIP my friend).

Thanks to all the contributors:

John HU 🔣 ️️️️♿️	Tomomi ❤ Imura 💻 🖋 🌍	strangeloveBsc 💻 🎨	Nátaly Enne 💻	Lennart Blom 💻	BitterPanda 💻	Katrin Leinweber 💻
Luiz Fernando da Silva Cieslak 💻	Leonard Janis Robert König 💻	Omar Flores Grimontt 💻	Kian 💻	David Cruz 💻 🎨 ️️️️♿️	Matt Lavoie 💻	zurgeg 💻
Joshix-1 💻	kiriya-aoi 💻	Jasmin Lapointe 💻	Arnau 🌍	Mathias Oterhals Myklebust 💻	Ronan 💻	Alejandro Mayol 🎨 💻
NoobTracker 💻	Mohammad Kazemi 📖	Lucas Mezêncio 💻	Xeno 💻	Santiago Salinas 🖋	Karl Hiramoto 💻	Anisah Majeed 💻 🖋
mata saru 💻	ddelange 💻 🖋	Pierre Borgmann 🖋	Lilly Helbling 💻

Star History

Sponsor / Donate

Please consider sponsoring or donating via the following options:

You can also adopt an HTTP Cat and have your name in the chosen cat image!

License

MIT