Search Dashboard: harden plan-info renders against missing API data#48660
Open
Search Dashboard: harden plan-info renders against missing API data#48660
Conversation
The Search dashboard renders `<PlanInfo>` → `<FirstRunSection>` → `<PlanSummary>` and `<PlanUsageSection>` whenever `isNewPricing && supportsInstantSearch`, and these components reach into the redux `sitePlan` state without fully guarding against pieces being undefined while the data resolves. Three pre-existing landmines: - `getLatestMonthRequests` selector: `state.sitePlan.plan_usage?.num_requests_3m[ 0 ]` had an unguarded `[0]` after the optional chain — when `plan_usage` (or `num_requests_3m`) is undefined, accessing `undefined[0]` throws "Cannot read properties of undefined (reading '0')". Add the missing `?.` between `num_requests_3m` and `[0]`. - `displayPeriodFromAPIData` in plan-summary.jsx: `apiData.latestMonthRequests.start_date` blew up the same way when `latestMonthRequests` was undefined. Bail to `null` if either date is missing; the `<PlanSummary>` `<h2>` now renders without the date span when data isn't available yet. - `usageInfoFromAPIData` in plan-usage-section.jsx: `apiData?.currentPlan.monthly_search_request_limit` was missing the `?.` on `.currentPlan` (the other three fields above it had it). Same crash class. Add the `?.`. These bugs predate this PR and are independent of the notice migration. They surface intermittently in CI because the JN test site's API population timing varies — the dashboard mounts and the selector evaluates before the API data resolves. Without the fix, the React tree blows up and the dashboard renders blank, which is why Search e2e (`Title should be visible` looking for `<h1>` in `MockedSearchContent`) was failing. Verified locally: with these guards, the dashboard renders cleanly with no console errors even when `plan_usage` is empty.
Contributor
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
github-actions
Bot
added
the
[Package] Search
Contributor
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
github-actions
Bot
added
the
[Status] Needs Author Reply
Code Coverage SummaryCoverage changed in 1 file.
|
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
1 participant
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 pre-existing
Cannot read properties of undefinedcrashes in the Search dashboard whenstate.sitePlan.plan_usage/plan_currenthaven't fully populated yet.Proposed changes
projects/packages/search/src/dashboard/store/selectors/site-plan.js—getLatestMonthRequestshadstate.sitePlan.plan_usage?.num_requests_3m[ 0 ]. The optional chain onplan_usageis undermined by the unguarded[ 0 ]— whenplan_usage(ornum_requests_3m) is undefined, accessingundefined[ 0 ]throws "Cannot read properties of undefined (reading '0')". Add the missing?.betweennum_requests_3mand[ 0 ].<PlanSummary>:displayPeriodFromAPIDatareadsapiData.latestMonthRequests.start_dateand.end_dateunconditionally. Bail tonullif either date is missing; the<h2>keeps rendering, just without the date span.<PlanUsageSection>:usageInfoFromAPIDatahadapiData?.currentPlan.monthly_search_request_limit— missing?.on.currentPlan(the three sibling lines had it). Same crash class. Add the?..Why this matters
The Search dashboard renders
<PlanInfo>→<FirstRunSection>→<PlanSummary>and<PlanUsageSection>wheneverisNewPricing && supportsInstantSearch. These components reach into the reduxsitePlanstate without fully guarding against pieces being undefined while the resolver fetches the wpcom plan response. When any of the three landmines fires, React unmounts the entire dashboard subtree, the<h1>heading disappears, and the page renders blank — which is exactly what made the Search e2e dashboard test ("Title should be visible") flaky against the partner-provisioned 'free' plan that the e2e infra uses.Related product discussion/links
plan_usagewas partially populated. Splitting the hardening out so Search: migrate dashboard notices to @wordpress/ui Notice (depends on #48537) #48550 stays scoped to the notice migration.Does this pull request change what data or activity we track or use?
No. Defensive guards only.
Testing instructions
/wp-admin/admin.php?page=jetpack-search.?new_pricing_202208=1(or whereverisNewPricing && supportsInstantSearchis true), if the wpcom plan endpoint hasn't fully resolved yet, the dashboard renders blank — main content area is empty, only WP-admin chrome shows. Console error:Uncaught TypeError: Cannot read properties of undefined (reading '0')traced to<PlanInfo>.<PlanSummary>'s<h2>showing just the plan name (e.g., "(Free plan)") when the date period isn't available, the donut meters show0 / 0, and no React-tree crash. The<h1>from<MockedSearchContent>is visible — Search e2e'sgetByRole('heading', { name: 'Help your visitors find' })finds it.A console probe to confirm:
No visual change for sites where the wpcom plan is fully populated — the guards just keep the existing render path.