Client-side Exception on Internal Navigation after Release
Unanswered
Nile Crocodile posted this in #help-forum
Nile CrocodileOP
Description:
I am trying to deploy a new release of my self-hosted Next.js application (version 14.1.0, using Docker) without breaking the user experience for clients who already have the website open in their browser. The application is configured to use Pages and getStaticProps for data fetching.
Steps to Reproduce:
Open the website in a browser tab.
Deploy a new release while the website remains open.
Attempt to navigate using any internal link using <Link> component.
Observed Behavior:
Upon clicking an internal link, I receive the following error:
Browser UI Error:
Application error: a client-side exception has occurred (see the browser console for more information).
Browser Console Error:
TypeError: Cannot read properties of undefined (reading 'tracking')
at [stack trace]
It seems like the application cannot retrieve data from an external source after the release. However, refreshing the page resolves the issue, and internal links start working again.
Additional Information:
- Static files or data fetched in getStaticProps do not change during deploys.
- Static files are stored on AWS S3, and previous versions are maintained.
- Caching is enabled in Next.js (revalidate is set in getStaticProps).
- I am confident that the API always includes the tracking key in the response.
- This issue is not limited to dynamic paths, so using fallback: true in getStaticPaths is not applicable here.
What I’ve Tried:
Verified the configuration of getStaticProps and the external data source.
Checked the error across different browsers and environments (Docker, local development).
Refreshed the browser, resolves the issue.
Confirmed the error persists after next releases.
Expected Behavior:
Internal navigation should work seamlessly, even after a new release, without requiring a page refresh.
Could you please provide guidance or suggest any configuration changes to resolve this issue?
I am trying to deploy a new release of my self-hosted Next.js application (version 14.1.0, using Docker) without breaking the user experience for clients who already have the website open in their browser. The application is configured to use Pages and getStaticProps for data fetching.
Steps to Reproduce:
Open the website in a browser tab.
Deploy a new release while the website remains open.
Attempt to navigate using any internal link using <Link> component.
Observed Behavior:
Upon clicking an internal link, I receive the following error:
Browser UI Error:
Application error: a client-side exception has occurred (see the browser console for more information).
Browser Console Error:
TypeError: Cannot read properties of undefined (reading 'tracking')
at [stack trace]
It seems like the application cannot retrieve data from an external source after the release. However, refreshing the page resolves the issue, and internal links start working again.
Additional Information:
- Static files or data fetched in getStaticProps do not change during deploys.
- Static files are stored on AWS S3, and previous versions are maintained.
- Caching is enabled in Next.js (revalidate is set in getStaticProps).
- I am confident that the API always includes the tracking key in the response.
- This issue is not limited to dynamic paths, so using fallback: true in getStaticPaths is not applicable here.
What I’ve Tried:
Verified the configuration of getStaticProps and the external data source.
Checked the error across different browsers and environments (Docker, local development).
Refreshed the browser, resolves the issue.
Confirmed the error persists after next releases.
Expected Behavior:
Internal navigation should work seamlessly, even after a new release, without requiring a page refresh.
Could you please provide guidance or suggest any configuration changes to resolve this issue?