Makzan / I share what I learned

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. More articles like this:
- Web Technologies
- Netlify
- Eleventy

Previous <- Migrating makzan.net from Wordpress to Eleventy and Netlify
Next -> iOS Shortcut: Bulk resizing photos

📬 Subscribe to Makzan’s Weekly Dispatch

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content:

What to expect: If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at mak@makzan.net. We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.