How to create a broken link (404) checker

Jun 01, 2023

Posted by

Ian Vanagas

On this page

Creating a Next.js app and adding PostHog
Building a custom 404 page
Sending 404s to Slack
Further reading

Broken links and 404s are frustrating for users. Without a way to check for them, you might not realize they exist and can’t fix them.

This tutorial shows you how to create a broken link checker for a Next.js app that sends a notification in Slack when a user visits a page that doesn’t exist.

Creating a Next.js app and adding PostHog

To start, create a Next.js app. Run the command below, chose not to use TypeScript, and the defaults for all the other options (including yes to using the app router).

Terminal

npx create-next-app@latest 404s

Next, go into your newly created 404s folder and install posthog-js.

Terminal

cd 404s 
npm i posthog-js

In the app folder, create a provider.js file where we initialize PostHog on the client side.

JavaScript

// app/providers.js
'use client'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { useEffect } from 'react'

export default function PHProvider({ children }) {
  useEffect(() => {
    posthog.init('<ph_project_api_key>', {
      api_host: 'https://us.i.posthog.com',
    })
  }, []);
  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}

Once created, we can import the provider into the layout.js file to access PostHog throughout our app.

JavaScript

// app/layout.js
import './globals.css'
import Providers from './providers'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <Providers>
        <body>{children}</body>
      </Providers>
    </html>
  )
}

Building a custom 404 page

To capture broken link events, create a custom 404 page to send details to PostHog. In your app folder, create a file named not-found.js. In this file, set up PostHog to send an event and return a component saying the page isn’t found.

JavaScript

//app/not-found.js
'use client'
import Link from 'next/link';
import { usePostHog } from 'posthog-js/react';
import { useEffect } from 'react';
 
export default function NotFound() {
  const posthog = usePostHog();

  useEffect(() => {
    posthog.capture('not_found');
  }, []);

  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <p>
        <Link href="/blog">Go home</Link>
      </p>
    </div>
  );
}

Once done, build the app and run it. We don’t use the development server as it triggers repeated reloads on pages not found.

Terminal

npm run build
npm start

When you go to a route that doesn’t exist, like http://localhost:3000/test, your app captures a not found event and return the component.

Sending 404s to Slack

Since we want to send our 404s and broken links to somewhere we check frequently, we will set up a Slack webhook to send notifications. We can use our Slack realtime destinations for this.

Start by going to the data pipeline destinations tab and search for the Slack destination and click + Create. On the creation screen:

Follow the steps to integrate with your Slack workspace if you haven't already and then select it.
Make sure the PostHog integration is added to the channel you want to send messages to and select it.
Under Match event and actions, select not found.
Under Blocks, modify the text to include the pathname. For example:

JSON

{
  "text": {
    "text": "*{person.name}* triggered 404 on '{event.properties.$pathname}'",
    "type": "mrkdwn"
  },
  "type": "section"
},

Customize the name and description, and press Create & enable.

You can then test the destination and it will start sending 404s to Slack.

Slack message

How to create a broken link (404) checker

Creating a Next.js app and adding PostHog

Building a custom 404 page

Sending 404s to Slack

Further reading

Product for Engineers

Comments