500 Internal Server Error- Netlify

Hi, I have a Gatsby site that uses a fallback page for dynamic routes like /pup/* . The fallback page works fine locally when I use gatsby develop, but when I deploy it to Netlify, it gives me a 500 internal server error. Here is the code of my fallback page:

import React from “react”; // Import useSWR hook from swr library import useSWR from “swr”; // Import GatsbyPageProps type from gatsby package

// Import NotFoundPage component from 404.js file import NotFoundPage from “…/404”;

export default function PuppyFallbackPage(props) { // Get the value of the dynamic segment from the props[“Account_Number-:Puppy_s_Name”] property const segment = props[“Account_Number-:Puppy_s_Name”];

// Split the segment by the dash character and assign to variables
const [accountNumber, name] = segment.split("-");

// Define a fetcher function that returns a JSON response
const fetcher = async (url) => {
	const response = await fetch(url);
	const data = await response.json();
	return data;

// Use useSWR hook to fetch data from API
const { data: pupsbreed, error } = useSWR("/api/puppies-breed", fetcher);

// Check if data is available and no error
if (pupsbreed && !error) {
	// Search for the puppy that matches the slug
	const puppy = pupsbreed.find((p) => p.slug === segment);

	// Check if puppy is found and meets the criteria
	if (
		puppy &&
		(puppy.Availability === "Available" ||
			puppy.Availability === "Reserved" ||
			puppy.Availability === "Sold, but Show") &&
		(puppy.Status === "Approved" || puppy.Status === "Approved: Hold") &&
	) {
		// Display the details of the puppy on the frontend
		return (
				<h2> This is the fallback page </h2>
				<p>Account ID: {puppy.Account_Number}</p>
				<p>Puppy Name: {puppy.Puppy_s_Name}</p>
				<p>Breed: {puppy.Breed}</p>
				<p>Availability: {puppy.Availability}</p>
	} else {
		// Render a 404 page and pass the path and location props
		return <NotFoundPage path={props.path} location={props.location} />;
} else {
	// Display a message that data is loading or error occurred
	return (
		<div className='text-center mt-4'>
			<button className='btn btn-primary'>
				{error ? "Error loading data" : "Looking for puppy in our DB..."}


// This is optional, but recommended PuppyFallbackPage.matchPath = “/pup/*”;

// Export an async config function export async function config() { // Return a function that takes params as an argument return ({ params }) => { // Return an object with defer key return { // Set defer to true for all pages defer: true, }; }; }

I have tried to use the Essential Gatsby build plugin and the Gatsby plugin for Netlify, but they didn’t solve the issue. I have also tried to use gatsby-plugin-offline to add an app shell, but it didn’t work either. I have checked the Netlify status page and there are no incidents or maintenance that could affect my site.

Does anyone know what could be causing this issue and how to fix it? Any help would be appreciated. Thank you.

@SamO Can you look into why am I facing this?

You might start by sharing the URL for your site, the repository if it is public and a request ID (see: [Support Guide] Netlify Support asked for the 'x-nf-request-id' header? What is it and how do I find it?).

What about if you build the site and serve it locally? Does it work then?


https://puppysrus.netlify.app/ URl of the site, When I visit the normal route https://puppysrus.netlify.app/pup/5878-romeo/ it displays the info of the puppy but when I visit one which isn’t included during the build it doesn’t activate the fallback page and look for it in the api as shown in my above code and it works locally both during build and develop.

And on netlify it gives 500 Internal Server Error for some unkown reason.

@hrishikesh Can you help here?

@SamO @hrishikesh @jasiqli Anything else I need to do on my side?

It appears to work okay for invalid puppy ID. Guessing you managed to solve the problem.

Prior to seeing this page I saw a message about looking through the DB.