Capturing 404 URL by using Netlify function and Airtable

Yesterday I migrated makzan.net 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.
  eleventyConfig.addPassthroughCopy("_redirects");

}

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);

    base(AT_TABLE).create([
        {
          "fields": {
            "URL": url
          }
        }
      ], err => {
      if (err) return reject(err);

      resolve();
    });
  });
};

exports.handler = function(event, context, callback) {

  const url = event.queryStringParameters.url || "https://example.com";

  save404(url);

  callback(null, {
    statusCode: 200,
    body: "404 Notified."
  });
}

Published on 2020-05-28 by Makzan. More articles like this:
- Web Technologies
- Netlify
- Eleventy