frontend: helpers: clusterSettings: Guard localStorage reads against corrupt data

[Kakumanu-Harshitha]

Summary

loadClusterSettings called JSON.parse without any error handling. Corrupted
localStorage entries (e.g. from browser extensions, quota truncation, or manual
edits) threw an uncaught SyntaxError that propagated to all callers
(NamespacesAutocomplete, GlobalSearch, NodeShellTerminal, PodDebugTerminal, etc.),
crashing the settings panel. Additionally, valid but non-object JSON payloads
(123, [], null) passed through silently, breaking downstream property accesses.

Related Issue

Fixes #7265

Changes

• clusterSettings.ts: Wrap JSON.parse in try/catch; add strict type guard
  rejecting non-object payloads, falling back to {} with a logged error.
• clusterSettings.ts: Wrap localStorage.setItem in try/catch so quota errors
  are logged instead of thrown.
• clusterSettings.test.ts: Add tests for invalid JSON, primitive payloads
  (string, number, array, null), and storage quota errors; use try/finally for
  spy cleanup to prevent mock leakage.

Steps to Test

1. Open DevTools → Application → Local Storage.
2. Set cluster_settings.<cluster-name> to {not valid json.
3. Navigate to the cluster settings page — verify no crash, error logged to console.
4. Set it to 123 or ["a"] — verify loadClusterSettings returns {} gracefully.
5. Set a valid settings object — verify it loads correctly as before.
6. Run npm run frontend:test -- src/helpers/clusterSettings.test.ts — all tests pass.

Notes for the Reviewer

• Purely defensive fix: no public API changes, no new dependencies.
• The existing test at line 139–153 already carried a comment expecting this fix —
  this commit fulfils that TODO.
• Follows the same pattern as the accepted PR frontend: pluginConfigSlice: Guard JSON.parse of localStorage with try/catch #6119 (pluginConfigSlice try/catch).

[kubernetes-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Kakumanu-Harshitha
Once this PR has been reviewed and has the lgtm label, please assign sniok for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[illume]

Thanks for the contribution.

Could you take a look at the commit messages in this PR? We follow a Linux kernel style for git commits — see the contributing guide and git log for examples.

Commits that need attention

• build: update npm version and package-lock.json — Missing area: description prefix — e.g. frontend: HomeButton: Fix so it navigates to home or backend: config: Add enable-dynamic-clusters flag.
• build: fix npm ci flag and regenerate package-lock.json — Missing area: description prefix — e.g. frontend: HomeButton: Fix so it navigates to home or backend: config: Add enable-dynamic-clusters flag.
• build: use npm install in Dockerfile to fix lockfile sync issues — Missing area: description prefix — e.g. frontend: HomeButton: Fix so it navigates to home or backend: config: Add enable-dynamic-clusters flag.
• build(frontend): pin @emnapi versions via overrides to fix lockfile sync — Missing area: description prefix — e.g. frontend: HomeButton: Fix so it navigates to home or backend: config: Add enable-dynamic-clusters flag.
• build(frontend): add @emnapi to dependencies to ensure lockfile tracking — Missing area: description prefix — e.g. frontend: HomeButton: Fix so it navigates to home or backend: config: Add enable-dynamic-clusters flag.

Commit guidelines

• Use atomic commits focused on a single change.
• Use the title format <area>: <Description of changes> — description must start with a capital letter.
• Keep the title under 72 characters (soft requirement).
• Explain the intention and why the change is needed.
• Make commit titles meaningful and describe what changed.
• Do not add code that a later commit rewrites; squash or reorder commits instead.
• Do not include Fixes #NN in commit messages.

Good examples:

• frontend: HomeButton: Fix so it navigates to home
• backend: config: Add enable-dynamic-clusters flag

[Copilot]

Pull request overview

Adds defensive handling for cluster-setting writes, alongside broader npm and container-build changes. The read-path fix is already present on the base branch.

Changes:

• Catches and tests localStorage.setItem failures.
• Regenerates frontend dependencies and adds @emnapi packages.
• Changes Docker npm installation behavior; plugin-example CI currently fails.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
frontend/src/helpers/clusterSettings.ts	Handles storage write failures.
frontend/src/helpers/clusterSettings.test.ts	Tests write failures and improves cleanup.
frontend/package.json	Adds and overrides @emnapi dependencies.
frontend/package-lock.json	Regenerates dependency resolution.
Dockerfile	Updates npm and frontend installation.
Dockerfile.plugins	Updates npm for plugin builds.

Files not reviewed (1)

• frontend/package-lock.json: Generated file

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[illume]

Thanks for this PR.

The open review comments from Copilot still need attention — can you have a look? Once addressed, please mark them as resolved.

[Kakumanu-Harshitha]

hey @illume PTAL! when you are free?