Next.js Runtime Crash (NotFoundError) – A Mystery Resolved (But Not Understood)
Unanswered
Golden-fronted Woodpecker posted this in #help-forum
Golden-fronted WoodpeckerOP
I recently encountered a strange runtime crashes in my Next.js app (pages directory), which was logged in Sentry multiple times with different framework-level errors. Some Google search results also displayed a "client-side error" message, making it clear something was seriously wrong.
4 Replies
Golden-fronted WoodpeckerOP
The Setup
I had the following
I had the following
BrokerNomination
component:function BrokerNomination({ link, userCountry, userCountryISO, guides }) {
const guide = guides.find((guide) => guide.icon === userCountryISO);
const userCountryGuideSlug = guide?.slug ?? 'افضل-شركات-التداول';
return (
<Link href={`/guide/${userCountryGuideSlug}`}>
<div
className={styles['broker-nomination']}
style={{
backgroundColor: link ? 'lightgreen' : 'lightcoral',
}}
>
<strong>
{link ? (
`تم اختيار هذه الشركة لتكون ضمن دليل افضل شركات التداول في ${userCountry}`
) : (
<>
لا تصنف هذه الشركة ضمن قائمة أفضل شركات التداول في {userCountry} يمكنك الاطلاع على الافضل
كوسيط مالي في {userCountry} واختيار الأنسب لك.
</>
)}
</strong>
</div>
</Link>
);
}
This component relies on two helper functions that determine the user's country and its ISO code based on their IP:
export function getCountryISOByIP() {
const { data, error, isLoading } = useSWRImmutable('https://ipapi.co/json/', (url) =>
fetcher(url)
.then((data) => ({ country: data.country_code }))
.catch((error) => {
console.error('Error fetching country code by IP', error);
return { country: 'US' };
})
);
if (isLoading) return { country: 'ALL', error: null, isLoading: true };
return { country: data.country, error, isLoading };
}
export function getArabicCountryByIP() {
const { country, error, isLoading } = getCountryISOByIP();
countries.registerLocale(require('i18n-iso-countries/langs/ar.json'));
if (isLoading) return { country: '', error: null, isLoading: true }; // ⬅️ Issue?
return { country: countries.getName(country, 'ar'), error, isLoading };
}
Finally, this component was used inside a page component:
export default function Broker({ broker, countryBrokers, guides }) {
const router = useRouter();
const { country: userCountry } = getArabicCountryByIP();
const { country: userCountryISO } = getCountryISOByIP();
if (router.isFallback) {
return <div>جاري التحميل...</div>;
}
return (
<>
...
<BrokerNomination
link={broker.cta_link}
userCountry={userCountry}
userCountryISO={userCountryISO}
guides={guides}
/>
...
</>
);
}
The Problem
Despite this seemingly simple setup, I was receiving frequent runtime crashes reported by Sentry. Additionally, some Google search results were displaying client-side errors at random.
At first, the issue was difficult to reproduce. However, I eventually found a bizarre way to trigger it consistently: using Google browser built-in translation tool on the page.
Debugging the Issue
Since I now had a way to reproduce the crash, I used a binary search debugging approach—gradually disabling parts of the website until I pinpointed the culprit:
➡️ The
The Fix (But Not the Explanation)
I made a minor change to
This small adjustment completely resolved the issue—I could no longer reproduce the crash using the same Google Translate trick.
The Unanswered Question
While the fix worked, I still don’t fully understand why an empty string ("") was capable of crashing the entire Next.js framework at runtime.
- The empty string wasn’t being used in any critical logic.
- There were no direct references to it that would explain a NotFoundError.
- The crash seemed to occur only under certain conditions (like when using Google Translate).
So my question is: Why would returning an empty string cause a framework-level crash in Next.js?
Would love to hear thoughts from anyone who has insights into this! 🚀
Despite this seemingly simple setup, I was receiving frequent runtime crashes reported by Sentry. Additionally, some Google search results were displaying client-side errors at random.
At first, the issue was difficult to reproduce. However, I eventually found a bizarre way to trigger it consistently: using Google browser built-in translation tool on the page.
Debugging the Issue
Since I now had a way to reproduce the crash, I used a binary search debugging approach—gradually disabling parts of the website until I pinpointed the culprit:
➡️ The
BrokerNomination
component was causing the framework to crash at runtime.The Fix (But Not the Explanation)
I made a minor change to
getArabicCountryByIP()
—instead of returning an empty string when the country name is unavailable, I returned a default value 'United States'
.if (isLoading) return { country: 'United States', error: null, isLoading: true };
This small adjustment completely resolved the issue—I could no longer reproduce the crash using the same Google Translate trick.
The Unanswered Question
While the fix worked, I still don’t fully understand why an empty string ("") was capable of crashing the entire Next.js framework at runtime.
- The empty string wasn’t being used in any critical logic.
- There were no direct references to it that would explain a NotFoundError.
- The crash seemed to occur only under certain conditions (like when using Google Translate).
So my question is: Why would returning an empty string cause a framework-level crash in Next.js?
Would love to hear thoughts from anyone who has insights into this! 🚀