Capturing 404 URL by using Netlify function and Airtable

Yesterday I migrated from WordPress to static site that’s powered by Eleventy and Netlify. The function I missed first is the 404 capturing.

I solve this by using Netlify function and Airtable.

The Airtable base contains only two columns: URL and created_at time stamp. By using the airtable.js, I can create record from the function invoke.

By following the function code from @stefanjudis, I created a capture404.js file inside a _functions folder. I also configure Netlify to use this folder for functions. The reason I use _functions folder is to avoid Eleventy to auto-process the files.

For debugging, I use the Netlify Dev to invoke the function locally.

I then add /* redirection to the bottom of _redirects file to display the 404 page. Note: Make sure you put this rule at the bottom of the file. Otherwise it will override all the rules below it.

/* /404.html 404

Also I make sure the _redirects file is configured to copied to the output folder by setting the pass-through-copy in .eleventy.js file.

module.exports = function(eleventyConfig) {
  // If we use Netlify and has the _redirects file.

Lastly, Whenever the 404 page is displayed, I POST to the function to save the record into Airtable.

const Airtable = require('airtable');
const save404 = ( url ) => {
  return new Promise((resolve, reject) => {
    const { AT_API_KEY, AT_BASE, AT_TABLE } = process.env;
    const base = new Airtable({ apiKey: AT_API_KEY }).base(AT_BASE);
          "fields": {
            "URL": url
      ], err => {
      if (err) return reject(err);
exports.handler = function(event, context, callback) {
  const url = event.queryStringParameters.url || "";
  callback(null, {
    statusCode: 200,
    body: "404 Notified."
I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.