[explorer/frontend] fix: use runtime configuration on error pages - #2483
Open
cryptoBeliever wants to merge 1 commit into
Open
[explorer/frontend] fix: use runtime configuration on error pages#2483cryptoBeliever wants to merge 1 commit into
cryptoBeliever wants to merge 1 commit into
Conversation
Problem: `pages/404` and `pages/500` must be statically prerendered by Next.js, so the `window.appConfig` script `_app` inlines into them is frozen at image build time. `PUBLIC_*` variables are only set when the container starts, so those pages ship without `PUBLIC_API_BASE_URL` and `createApiUrl` interpolates the literal string "undefined" into every request made from them. Solution: Serve the runtime configuration from an API route instead, loaded through a non-deferred script tag. Next.js defers all of its own bundles, so the script runs before any application module reads the configuration. Fixes #2469
Contributor
Author
|
@OlegMakarenko, could you please have a look and let me know if this solution makes sense to you or if you'd prefer a different approach? |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## dev #2483 +/- ##
==========================================
- Coverage 97.14% 96.87% -0.27%
==========================================
Files 343 320 -23
Lines 24477 22212 -2265
Branches 221 221
==========================================
- Hits 23777 21518 -2259
+ Misses 693 687 -6
Partials 7 7
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2469
Problem
Using the header search bar on a 404 page sends requests to a malformed URL:
The requests fail and the search bar silently returns no results.
Root cause
Next.js requires
pages/404andpages/500to be statically prerendered - it explicitly rejectsgetServerSidePropsandgetInitialPropson them. Their HTML, including thewindow.appConfigscript that_appinlines, is therefore generated once, duringnext build.PUBLIC_*variables are runtime configuration: theDockerfileonly passesNEXT_PUBLIC_EXPLORER_VARIANTas a build arg. At build timeprocess.env.PUBLIC_API_BASE_URLisundefined, andJSON.stringifydrops keys withundefinedvalues entirely - so the key is simply missing fromwindow.appConfigon those pages.createApiUrlthen interpolates it into a template literal:Every other page is server-rendered per request, which is why they are unaffected.
Solution
Serve the configuration from a route that is never statically optimized, and load it from a script tag that runs before the application does.
The inline script is deliberately retained: if
/runtime-config.jsever fails to load, server-rendered pages keep working with their freshly inlined values instead of losing configuration entirely.Because the fix works below the level of any individual request, it covers the search bar, the backend health check, and any request added in the future - no per-caller handling required.