: "Application error: a client-side exception has occurred while loading "

App Hosting
,
1

Hi, I am very much a novice coder and am looking for help to solve a problem I have with app hosting. My app is pretty much complete and am trying to get it hosted. It runs without problem in the iFrame preview window. Gemini has tried a lot of things but has not been able to fix it. This is the error message that appears in the browser when I try to load it: : “Application error: a client-side exception has occurred while loading truckprofitapp–studio-264940911-4a52c.asia-southeast1.hosted.app (see the browser console for more information).” I have uploaded a screenshot of the Chrome console report below. And here is a relevant conversation with Gemini:
Hi, I have submitted a ticket with support and are waiting on them to reply. But in the meantime I have found some logs in Google cloud logs explorer relating to when I try to launch the app in chrome. See attached. Please examine an tell me if there is anything there that pinpoints the issue with the client side exception. DO NOT MAKE ANY CHANGES! ONLY EXAMINE THEN REPORT BACK TO ME.

Thank you for providing the screenshot of the Cloud Logs Explorer. I have examined the logs and here is my report:
Log analysis Results

  1. Server Health: The logs show that your Next.js application is starting up perfectly on the server (Next.js 15.5.9, Ready in 286ms). There are no error messages or crashes recorded on the server side.
  2. Successful Requests: The HTTP requests are returning 200 OK and 304 Not Modified. This means the server is successfully generating the initial page and sending it to your browser.
  3. Confirmed: Client-Side Issue: Since the server logs are “green” and the server is successfully delivering the page, this definitively confirms that the crash is happening inside the browser (client-side) immediately after it receives the code.
    What this means for the “Client side Exception”.
    A “client-side exception” in a Next.js 15 app is almost always caused by one of two things:
    • Hydration Mismatch: The HTML the server sent to the browser is slightly different from what the JavaScript code expected to see once it took over. This often happens if the code tries to use window or document before the page is fully “hydrated.”
    • Runtime Crash on Mount: A component is crashing during its first render (e.g., trying to access a property on an object that is undefined because an environment variable is missing).
    Recommendation
    The specific details of the “client-side exception” are not sent to the Cloud Logs; they stay inside your browser. To pinpoint the exact line of code causing the crash, you (or the support technician) will need to:
  4. Open the site in Chrome.
  5. Press F12 to open the Developer Tools.
  6. Go to the Console tab.
  7. Look for a red error message. That error will contain a “Stack Trace” that points directly to the file and line number causing the crash.
    The server logs confirm the infrastructure is working; the solution lies in the specific JavaScript error shown in the browser console. I have made no changes to your code.

Ok, this is what is displayed in the chrome console. See attached. DO NOT MAKE ANY CHANGES! ONLY EXAMINE THEN REPORT BACK TO ME.

Thank you for providing the screenshot of the browser console. This is exactly the “smoking gun” we needed to see.
Analysis of the Console error.
The error message is explicit: Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
What this means.

  1. Pinpointed Cause: The “client-side exception” is being triggered because the Firebase Auth service is being initialized with an invalid or missing API key.
  2. Confirmation of Build Issue: This confirms that the environment variable NEXT_PUBLIC_FIREBASE_API_KEY is either:
    o Not being correctly “baked” into the build during the App Hosting rollout.
    o The value provided in the configuration is incorrect for this specific project.
  3. Why the app crashes: In Next.js, when the root layout tries to initialize the Firebase Provider and it encounters an uncaught exception (like an invalid key), the entire application execution stops, and Next.js replaces the UI with that generic “client-side exception” message.
    Recommendation:
    The issue is definitively tied to how the environment variables are being passed from the apphosting.yaml file to the Next.js build process. If the apiKey value in your apphosting.yaml is exactly as it appears in your Firebase Project Settings, then the build system is failing to inject it into the process.env correctly.
    I have made no changes to your code. This examination confirms that once the API key is correctly recognized by the browser, the app will be able to start.

Please examine the code to see if the API key is present where it should and that it is valid. DO NOT MAKE ANY CHANGES! ONLY EXAMINE THEN REPORT BACK TO ME.

I have thoroughly examined your code and the logs you provided. Here is my report on the situation.
Examination Report
API Key presence and usage.
• Presence: The API key AIzaSyDwAsLSSkbwoIH2a2MrI2HWap786nK_NsE is correctly defined in your apphosting.yaml file.
• Referencing: It is correctly referenced in src/firebase/config.ts using process.env.NEXT_PUBLIC_FIREBASE_API_KEY.
• Standard Compliance: The NEXT_PUBLIC_ prefix is correctly applied. This is a strict requirement for Next.js to allow the browser to see the variable.
Analysis of the Auth/Invalid-API-Key Error.
The error in your Chrome console is a specific rejection from the Firebase Auth SDK. This happens for one of three reasons:

  1. The value is literally wrong: The string in the configuration does not match the one in your Firebase Project Settings.

  2. The value is missing at the moment of call: The variable process.env.NEXT_PUBLIC_FIREBASE_API_KEY is returning the literal string “undefined” or “null” because it wasn’t successfully injected into the build.

  3. Project Mismatch: The API key is valid, but it belongs to a different Firebase project than the one identified by your projectId.
    Why you see the “Client side exception” (the crash).
    Your Chrome console shows a Hydration Mismatch error alongside the Firebase error. This is why the app crashes completely:
    • The Mismatch: On the server, the app renders a “Loading…” state. On the client (your browser), the code immediately detects the invalid API key and tries to render an “Error” or “Configuration” state.
    • The Result: Because the HTML from the server and the first render in the browser don’t match, Next.js 15 identifies this as a fatal state and replaces your UI with the “client-side exception” message.
    Summary
    The API key is in your code, but it is being rejected by the Firebase service. This failure triggers a “Hydration Mismatch” which Next.js 15 treats as a total application crash.
    I have made no changes to your project files as requested. This report is for your information and to assist your support technician.

    And here is the reply from Google Firebase Support: Thank you for providing additional context regarding this issue. Upon reviewing your project, I can confirm that the API key you shared is indeed associated with your project and is therefore not the source of the problem.

    My research indicates that the client-side server error is most likely occurring because the page is attempting to render elements before the page has fully loaded. It is important to note that reviewing and debugging custom application code falls outside the scope of our support. I strongly recommend posting the exact error message from your browser console to the Firebase Studio Community Forums or StackOverflow, as these platforms are excellent resources where fellow developers can assist with React-specific code issues.

    So, what do you think I can do to resolve this??? Help muchly appreciated!

ChromeConsole
ChromeConsole889×276 59.6 KB