The Setup
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 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! 🚀