Fix NotFoundError in Gatsby in Production

Gatsby 404 Errors in Production

Gatsby generates static HTML files at build time. If a page isn't generated, it won't exist in production — unlike a server-rendered app, there's no fallback.

Page Not Generated

Gatsby only creates pages for files in src/pages/ and routes created in gatsby-node.js:

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query {
      allMdx {
        nodes {
          frontmatter { slug }
        }
      }
    }
  `);

  result.data.allMdx.nodes.forEach(node => {
    createPage({
      path: `/blog/${node.frontmatter.slug}`,
      component: require.resolve('./src/templates/blog-post.js'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

Client-Only Routes

For dynamic routes (user profiles, dashboards), tell Gatsby they're client-only:

// gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/*';
    actions.createPage(page);
  }
};

And configure your hosting:

# netlify.toml
[[redirects]]
  from = "/app/*"
  to = "/app/index.html"
  status = 200

Custom 404 Page

// src/pages/404.js
export default function NotFound() {
  return <h1>Page not found</h1>;
}

Most hosting platforms serve this for unmatched routes.

Cache Invalidation

After a rebuild, CDNs may serve stale content. Purge the cache or use cache-busting headers.

Bugsly monitors client-side errors on Gatsby sites, including navigation failures and broken links that only manifest in production.