Skip to content

Conversation

@p-jackson
Copy link
Member

@p-jackson p-jackson commented Aug 14, 2025

Copied from #105201
Fixes DOTCOM-14221

Proposed Changes

  • Added defensive sanitization logic to the dashboard sites component (https://wordpress.com/sites) to prevent PreviewSizePicker crashes
  • Added validation for previewSize values in grid layout view state before passing to DataViews
  • Invalid previewSize values are automatically reset to safe default (230) with console warnings for debugging

Before:

image

After

image

Why are these changes being made?

Some users have corrupted previewSize values stored in their server-side view preferences for the sites dashboard. When these users click the settings cog wheel icon, the WordPress DataViews PreviewSizePicker component crashes with "Cannot read properties of undefined (reading 'index')" because it expects specific values from [230, 290, 350, 430] but receives invalid data.

preview-size-picker.js:55 Uncaught TypeError: Cannot read properties of undefined (reading 'index')
    at PreviewSizePicker (preview-size-picker.js:55:41)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20099:13)
    at beginWork (react-dom.development.js:21622:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27486:7)
    at performUnitOfWork (react-dom.development.js:26592:12)
    at workLoopSync (react-dom.development.js:26501:5)
PreviewSizePicker @ preview-size-picker.js:55
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20099
beginWork @ react-dom.development.js:21622
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27486
performUnitOfWork @ react-dom.development.js:26592
workLoopSync @ react-dom.development.js:26501
renderRootSync @ react-dom.development.js:26469
performSyncWorkOnRoot @ react-dom.development.js:26120
flushSyncCallbacks @ react-dom.development.js:12042
eval @ react-dom.development.js:25686

This crash makes the sites dashboard settings completely inaccessible and persists across sessions, browsers, and machines since the corrupted data is stored server-side. The fix adds defensive validation to sanitize invalid preference data before it can crash the component.

Testing Instructions

To reproduce the original issue (before fix):

  1. Navigate to http://calypso.localhost:3000/sites
  2. Click on the settings cog wheel icon in the DataViews toolbar
  3. Observe crash with "Cannot read properties of undefined (reading 'index')" error

Note

@p-jackson's note: I don't know how the user got into this state (no attached ZD ticket) but I was able to corrupt the persisted settings like this:

  1. Switch to grid view
  2. Adjust the preview size using the slider
  3. Manually edit the previewSize value in the URL to something invalid—like 10
  4. Type something basic into the dataview search field (this will persist the manually edited change)
  5. Reload the /sites page with a clean URL.
  6. The page is broken

To test the fix:

  1. Apply the changes and navigate to http://calypso.localhost:3000/sites
  2. Click on the settings cog wheel icon
  3. Verify that the settings dropdown opens without crashing
  4. Check browser console for any "Invalid previewSize detected and fixed" warning messages
  5. Test switching between table and grid views to ensure functionality works correctly

Additional testing:

  • Test with users who previously experienced the crash (like the ticket in the Linear report)
  • Verify fix works across different browsers and sessions
  • Confirm that valid previewSize values continue to work as expected

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

Fixed with Claude Code assistance.

@p-jackson p-jackson requested a review from a team as a code owner August 14, 2025 08:38
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 14, 2025
@p-jackson p-jackson force-pushed the fix/sites-invalid-previewSize branch from 9c5b05e to 3a3d1ad Compare August 14, 2025 08:40
@matticbot
Copy link
Contributor

matticbot commented Aug 14, 2025

@matticbot
Copy link
Contributor

matticbot commented Aug 14, 2025

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/sites-invalid-previewSize on your sandbox.


if ( sanitized.type === 'grid' && sanitized.layout?.previewSize ) {
// From PreviewSizePicker imageSizes in GB https://github.com/WordPress/gutenberg/blob/58a5abc7714bdff204d5f6bc350980f73686d54f/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx#L14
const validSizes = [ 120, 170, 230, 290, 350, 430 ];
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is pretty wild that we have to hard code these valid sizes into our code. If GB isn't going to export these valid sizes from the dataviews package, then I think there needs to be a fix upstream so that dataviews doesn't crash when an invalid previewSize is provided. I.e. the sanitisation needs to happen somewhere, and if the valid values aren't exported by the package so we can do it, then the package itself needs to do it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the concept of the previewSize changes from the number of items to the width by WordPress/gutenberg#70493. Maybe we can simply check whether the value is smaller than XXX (e.g.: 120) to determine whether to delete it 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As the current version we used doesn't include the smaller sizes added by WordPress/gutenberg#71077. I'd prefer to remove them (120 and 170)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it does look like the issue only happens when the value is less than 120. But perhaps also it might happen if it is NaN? Which could happen if the query string value is set to something bogus.

// From PreviewSizePicker imageSizes in GB https://github.com/WordPress/gutenberg/blob/58a5abc7714bdff204d5f6bc350980f73686d54f/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx#L14
const validSizes = [ 120, 170, 230, 290, 350, 430 ];
if ( ! validSizes.includes( sanitized.layout.previewSize ) ) {
sanitized.layout = { ...sanitized.layout, previewSize: 230 };
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, this is a lot more straight forward 😅

Suggested change
sanitized.layout = { ...sanitized.layout, previewSize: 230 };
sanitized.layout.previewSize = 230;

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually maybe I should set this to undefined 🤔 that way it is reverting back to the default.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I decided to delete the invalid previewSize settings after all. Sorry for the churn @arthur791004 😅

@arthur791004 arthur791004 merged commit df47058 into trunk Aug 14, 2025
11 checks passed
@arthur791004 arthur791004 deleted the fix/sites-invalid-previewSize branch August 14, 2025 10:46
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 14, 2025
paulopmt1 pushed a commit that referenced this pull request Aug 14, 2025
#105206)

* fix(sites): prevent PreviewSizePicker crash from invalid previewSize values

* Move previewSize sanitization to existing `sanitizeView` function

* Simplify code for updating `previewSize` to a valid value

* Use `undefined` instead of `230` in order to explicitly get the default

* Check whether the previewSize is smaller than the smallest value

* Check whether the previewSize is NaN

---------

Co-authored-by: Arun <arun@arun.blog>
Co-authored-by: arthur <arthur.chu@automattic.com>
paulopmt1 added a commit that referenced this pull request Aug 21, 2025
* Created the initial structure for the the /contact-info route

* Added some initial components to the screen

* Using DataForm for domain Contact details

* Finished the first interface version

* Reading Contact information from /whois endpoint

* Validating data before saving Contact Info

* Update Contact details data using backend API

* Added isDurty state for the save button

* Added basic validation on DataForm

* Getting supported contries list from our API

* Add support to opt-out 60-day option

* Add Save contact info warning

* Add support to State selection from selected country

* Move country and state logic to inside the contact form component

* Fix re-render issue that removed the focus from text input while typing

* Add eslint rule to prevent lodash usage

* Refactor domain-supported contries and states and removed lodash usage

* Move mutate events to contact-form

* My Jetpack: Updating user connection page header and button text. (#105149)

* Substack Import: fix flow bug (#105167)

* Only display error message in the expiry column in the Site Overview (#105168)

* Enable summer special (#105169)

* Site Overview: Implement renew now action (#105160)

* Site Overview: Implement renew now action

* Fix types

* Use replaceAll

* Redirect by window.location.href

* Increase timeout between atomic transfer and redirect (#105174)

* Increase timeout between atomic transfer and redirect

* Remove unnecessary delay

* Connect Refresh: Extract Gravatar Magic Login into its own space (#104863)

* Connect Refresh: Extract Gravatar Magic Login into its own space

* whole lotta love

* migrate styles

* cleanup. fix publicToken use?

* unfix publicToken use?

* cmon. works now

* fix loginUrl

* lots of cleanup

* fix form outlines

* fix navigation to login

* extract inner components into outer scope

* extract inner components into outer scope

* cleanup. address feedback

* cleanup

* Update client/login/magic-login/gravatar/style.scss

Co-authored-by: Welly Shen <hivoid19@gmail.com>

* address feedback. progress on code-validated

* fix interval not resetting

* fix code validation transition

* Update client/login/magic-login/gravatar/index.tsx

Co-authored-by: Welly Shen <hivoid19@gmail.com>

* Update client/login/magic-login/gravatar/index.tsx

Co-authored-by: Welly Shen <hivoid19@gmail.com>

* Update client/login/magic-login/gravatar/index.tsx

Co-authored-by: Welly Shen <hivoid19@gmail.com>

* cleanup redirect

---------

Co-authored-by: Welly Shen <hivoid19@gmail.com>

* Connect Refresh: Migrate Akismet create-account to unified Signup (#105116)

* Fixes the Promote Post version check hook (#105163)

* Allow plugins upload for plans without sftp (#105176)

* Connect Refresh: Migrate VIP create-account to unified Signup (#105132)

* Remove Summer Special install plugin feature from Business and Ecommerce (#105177)

* Updating @wordpress/components and @wordpress/dataviews packages (#105142)

* Updating @wordpress/components and @wordpress/dataviews packages

* Fix plugin icon

* Fix site icon

---------

Co-authored-by: arthur <arthur.chu@automattic.com>

* Fix font size when rendering ZD HTML (#105180)

* Site settings: add missing learn more links (#105150)

* Staging Sites Redesign: Update Tooltip and checkbox disable style (#105158)

* Improve styles

* Ensure we have checkbox

* Fix both disabaled and checked

* Fix tooltip position

* Clean comments

* Update message

* Fix typo

* Break tooltip in two lines

* Allow full sync when selective sync is not disabled

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* Hosting Dashboard: Add site logs initial dataviews with data (#105118)

* Connect Refresh: Migrate Jetpack Cloud create-account to unified Signup (#105178)

* add null checks (#105165)

* Staging Sites: Notify syncing after completing the endpoint call (#105112)

* Staging Sites: Notify syncing after completing the endpoint call

* Add the callback to the pull action too

* Disable sync button immediately after starting syncing

* Check inflight mutations to disable Sync button

* close modal after mutation completes

---------

Co-authored-by: Gergely Csécsey <gcsecsey@gmail.com>

* Connect Refresh: Migrate Studio create-account to unified Signup (#105133)

* Components: Fix ambiguous `rem()` import (#103385)

* Domains Hosting Dashboard: Create "Add new DNS record" page (#105095)

* (WIP) Create "Add new DNS record" page to Hosting Dashboard

* Create forms to add all supported DNS record types

* Remove some console.logs and refactor some code

* Refactor code splitting the form configuration for each record type in its own file

* Fix field types and add "required" validation

* Add trailing dot automatically for fields that need to be a FQDN

* Use text area component for TXT record data

* Add description field for DNS records

* Remove empty default element from select fields

* Make placeholders translatable

* Reset form data when changing record types

* Navigate to DNS overview page when clicking on "Cancel"

* Remove query that does not belong to this PR

* Refactor DNSRecord type

* Consolidate component in /dns/add/index.tsx

* Rename `AddDNSRecordFormData` to `DNSRecordFormData` and fix form typing

* Remove `isValid` properties from DNS record configs

* Move DNS record configs to types file

* Rename `types.ts` to `dns-record-configs.ts`

* Small refactor

* Replace straight quote mark by a curly quote mark

* Do not translate DNS record types (e.g. A, ALIAS, CNAME)

* Navigate to DNS overview page after adding a record

* Remove translation from CAA tags

* Improve FQDN comment in the data transformation function

* Remove translations from SRV protocol labels

* Translate placeholder strings for DNS records

* Translate page title

* Remove `WPCOMDNSRecord` that was not being used

* Fix type error because ALIAS did not have a `name` property

* Update type names and definitions to align with #105129

* Update type names to keep consistency

* Update mutation function to a more generic one

* Update mutation function to align with #105129

* A4A > Sign up: Show Onboarding tour in WC flow (#105175)

* Jetpack Cloud: skip wpcomJetpackScanAtomicTransfer middleware on Cloud and A4A (#105189)

* Staging Sites: Add separate expand button and allow selecting nodes by clicking on them in the Jetpack Backup FileBrowser (#105161)

* Allow selecting files by clicking on them

* Add separate expand button option to file browser component

* Remove unnecessary min-width

* Correct grammar in a comment

* Fix styling

* Add RTL support for chevrons

* Improve checkbox accessibility

* Adjust accessibility

* Remove tab index from the node button only when `showFileCard` option is disabled

* Add `expandDirectoriesOnClick` prop to control directory expansion behavior in file browser

* Introduce separate `handleExpandButtonClick` handler

* Expansion directories only when `expandDirectoriesOnClick` prop is true

* Simplify checkbox change logic

* Improve contents of

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* Redirect from deletion banner when the staging site is deleted (#105164)

* redirect from deletion banner when the staging site is deleted

* check if query is undefined

* use calypso/state notices instead of snackbar

* clean up comments

* CalloutOverlay: Fix the overlapping issue (#105195)

* Fix section name in track events (#105196)

* Hosting Dashboard: Add domain glue records DataView (#105184)

* ZD: Fix metadata when creating a ticket (#105183)

* Packages: Add domain-search to tsconfig (#105186)

* Dashboard v2: render expiring purchase in color (#105170)

* Gravatar: Adjust login-related screens for Gravatar-owned services (#105192)

* Gravatar: Adjust login-related screens for Gravatar owned services

* Reuse one more variable

---------

Co-authored-by: Welly Shen <welly.shen@automattic.com>

* Domain Dashboard: Render registered date and renewal CTA (#105188)

* Render the header and registered date

* Render the renew now button if eligible

* Wrap domain name if it doesnt fit in the container

* Use purchase properties

* Revert callback changes

* Hosting dashboard: Add a custom empty state to the site list (#104544)

* Backups Dashboard: add back up now button (#105190)

* Add enqueue and fetch backup functions

* Add siteBackupsQuery

* Add BackupNowButton

* Render BackupNowButton as Backups page header action

* Remove backup up now button icon

* Refactor BackupNowButton: Simplify button content and tooltip handling

- Moved button content and tooltip text into a structured object for better readability and maintainability.
- Updated mutation function to set the enqueue state before calling the backup function.

* Removed unnecessary empty object from the post request

* Refactor backup data layer to entity/collection pattern

* Domains Hosting Dashboard: DNS records list (#105129)

* Add dns list placeholder

* Add basic data

* Implement data view

* Add value column

* Update section header

* Hide DataView header

* Add actions placeholders

* Add action menu placeholder

* Update dns record list - handle protected records

* Move action to a separate file

* Move fields in a separate file

* Add restore default records actions placeholders

* Add logit to enable/disable dns actions

* Work in progress

* Add delete/edit callback

* Minor fixes after rebase

* Fix edit dns route

* Implement domain restore actions

* Fine tuning

* Fix type issue

* Restore params

* Fix type error

* Restore DnsRecordType

* Fix type

* Address PR review comments

* Fix dropdown

* Address PR review comments

* Add more tracking information around creating conversations (#105199)

* Fix double login e2e (#101899)

* Site Overview: Implement change site address action (#105191)

* Site Overview: Implement change site address action

* Fix types

* Update eslint

* Address feedback

* Fix display incorrect wpcom domain

* fix(sites): prevent PreviewSizePicker crash from invalid previewSize … (#105206)

* fix(sites): prevent PreviewSizePicker crash from invalid previewSize values

* Move previewSize sanitization to existing `sanitizeView` function

* Simplify code for updating `previewSize` to a valid value

* Use `undefined` instead of `230` in order to explicitly get the default

* Check whether the previewSize is smaller than the smallest value

* Check whether the previewSize is NaN

---------

Co-authored-by: Arun <arun@arun.blog>
Co-authored-by: arthur <arthur.chu@automattic.com>

* Domains: Create name-servers component (#105062)

* Create name-servers component

* Marketplace Site Selector: Fix highlight styles within component (#105047)

* Fix styles within component

* Improve syntax

* Remove content-fade

* Cleanup comments

* Remove unnecessary overide

* Keep fade in

* Revert reader changes

* Update colors and fade in

* Improve fade in removal

* Ensure the hover state on badges remain the same

* Only apply the overrides for specific badges

* Fix unintended changes

* Fix unintended change

* Remove redundant styles

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

* Add the hosting dashboard domain forwarding add/edit form (#105113)

The Hosting Dashboard add and edit form for Domain Forwarding rules. There are a few follow up tasks that we'll fix

* Newsletter importer: Update billing warning copy (#105203)

* Newsletter importer: Update billing warning copy.

* Connect Refresh: Fix layout issues with Woo DNA/JPC signup (create-account) form (#105156)

* Domain Search: Update experiment name (#105131)

* Domain Search: Update experiment name

* Enable eligibility only for logged in users

---------

Co-authored-by: Luis Felipe Zaguini <luisfelipezaguini@gmail.com>

* Getting supported contries list from our API

* Fix merge conflict

* Add support to State selection from selected country

* Refactor domain-supported contries and states and removed lodash usage

* Remove unnecessary code after merge

* Renamed contact-details directory to domain-contact-details

* Update domain data type and removed types file

* Use contact-form-fields to store them so the main file doesn't get too big

* Final review changes

* Removed unnecessary css files and fixed types

* Readability improvements

* Fix data types

* Improve support links usage

* Improve the usage of queries for validate mutation

* Fix unnecessary type mapping and remove older query

* Fix type error on StateFieldEdit component

* Fix render error during component update

---------

Co-authored-by: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com>
Co-authored-by: Tony Arcangelini <33258733+arcangelini@users.noreply.github.com>
Co-authored-by: Griffith Chen <griffith.chen@automattic.com>
Co-authored-by: Veselin Nikolov <veselin@automattic.com>
Co-authored-by: arthur791004 <arthur.chu@automattic.com>
Co-authored-by: Claudiu Filip <claudiu.filip@automattic.com>
Co-authored-by: Christos <chriskmnds@gmail.com>
Co-authored-by: Welly Shen <hivoid19@gmail.com>
Co-authored-by: Sebastián Barbosa <sebabarbosa@gmail.com>
Co-authored-by: Omar Alshaker <omar@omaralshaker.com>
Co-authored-by: Ashar Fuadi <ashar.fuadi@automattic.com>
Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com>
Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>
Co-authored-by: Karen Attfield <karenlattfield@gmail.com>
Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com>
Co-authored-by: Roberto Aranda <roberto.aranda@automattic.com>
Co-authored-by: Gergely Csécsey <gcsecsey@gmail.com>
Co-authored-by: Lena Morita <lena@jaguchi.com>
Co-authored-by: leonardost <leonardost@users.noreply.github.com>
Co-authored-by: Yashwin Poojary <yashwinpoojary@gmail.com>
Co-authored-by: Rafael Agostini <rafael.agostini@automattic.com>
Co-authored-by: Ivan Ottinger <ivan.ottinger@automattic.com>
Co-authored-by: Miroslav Mitev <m1r0@users.noreply.github.com>
Co-authored-by: Payton Swick <payton@automattic.com>
Co-authored-by: Welly Shen <welly.shen@automattic.com>
Co-authored-by: Luis Felipe Zaguini <26530524+zaguiini@users.noreply.github.com>
Co-authored-by: Philip Jackson <p-jackson@users.noreply.github.com>
Co-authored-by: Igor Giussani <igor.giussani@automattic.com>
Co-authored-by: Arun <arun@arun.blog>
Co-authored-by: Bogdan Nikolic <bogdan.nikolic87@gmail.com>
Co-authored-by: Kamen Stanev <kamen.stanev@automattic.com>
Co-authored-by: Allison Levine <1689238+allilevine@users.noreply.github.com>
Co-authored-by: Luis Felipe Zaguini <luisfelipezaguini@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants