[webdevelopersrinu]

Summary

Logs errors thrown in mapStateToProps (or selectors) to console.error
in non-production environments, so they surface during development
instead of being silently swallowed.

Fixes #1942

Background

Since v8.0.0, errors thrown inside mapStateToProps are caught in the
subscription callback (connect.tsx#L133-L136) and stored in
lastThrownError. In v7, those errors surfaced because the component
unmounted on selector errors (the unmount path re-throws
lastThrownError). In v8+, the component no longer unmounts — it just
re-renders in its pre-error state — so the error is silently swallowed.

This was diagnosed by @alexanderchr in
#1942 (Dec 12, 2024), and @markerikson approved the dev-only
logging approach in the same thread:

"logging this in dev seems like a passable fallback"

Changes

• src/components/connect.tsx — log the caught error to console.error
  when process.env.NODE_ENV !== 'production', with a brief message and
  a link back to this issue
• test/components/connect.spec.tsx — add a unit test that dispatches
  an action which causes mapStateToProps to throw, then asserts the
  error was logged via console.error

Behavior

• ✅ Production: unchanged (the new branch is dead-code-eliminated)
• ✅ Development: error is now logged to the console with the
  original error object, making it discoverable in DevTools

Test plan

• yarn test — all connect tests pass (65/65), new test passes,
  no regressions in code I touched
• yarn lint runs as part of pretest and passes
• Type-check passes (vitest --typecheck reports no errors)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[aryaemami59]

The current CI failure is related to arethetypeswrong/arethetypeswrong.github.io#258 which is caused by 101arrowz/fflate#258.

As a temporary workaround, we can pin fflate to 0.8.2 via resolutions in package.json:

  "resolutions": {
    "fflate": "0.8.2"
  },

This should unblock CI until the upstream issue is resolved.

[webdevelopersrinu]

Thanks @aryaemami59 — totally missed your earlier comment, sorry about
that. Happy to add the fflate resolutions pin to this PR if you'd
prefer, or wait if you're patching master directly. Just let me know.

[aryaemami59]

@webdevelopersrinu

Thanks @aryaemami59 — totally missed your earlier comment, sorry about that. Happy to add the fflate resolutions pin to this PR if you'd prefer, or wait if you're patching master directly. Just let me know.

Thanks. I'd prefer to wait and see whether this gets resolved upstream first. That also gives the rest of the team more time to review the PR.

Update: This has since been fixed upstream in @arethetypeswrong/[email protected], so the fflate resolutions pin isn't needed here. I've opened #2307 to bump @arethetypeswrong/cli to 0.18.3 and unblock CI.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/react-redux@0a6bd13 -D

yarn add https://pkg.pr.new/[email protected] -D

pnpm add https://pkg.pr.new/[email protected] -D

bun add https://pkg.pr.new/[email protected] -D

commit: 0a6bd13

[aryaemami59]

Two small follow-ups on top of the dev-logging change:

1. Name the component that threw — the message currently says "a connect()-ed component", which isn't actionable. displayName (Connect(X)) is already computed in _connect and in scope at the call site, so threading it through is cheap and matches the existing mapStateToProps() in Connect(X) … style.
2. Make the test pin NODE_ENV — it's titled "…in development" but never sets the env; it passes only because the runner isn't production.

[webdevelopersrinu]

@aryaemami59 thanks for the review! Addressed all the feedback in 048188c:

• Threaded displayName through subscribeUpdates and included it in the
  dev console.error message, so it now names the offending component
  (e.g. "Connect(Container)"). Used the double-quoted style to match the
  existing "Could not find store" error in this file.
• Updated the test to explicitly set NODE_ENV='development' (and restore
  it), and to assert the logged message names the component.

Let me know if you'd like anything else.

[webdevelopersrinu]

Thanks for the review @aryaemami59

[timdorr]

Thanks!