chore: stop redux action console flood in dev#7412
Conversation
reduxLogger logged every dispatched action and the full store state to Metro on each dispatch, drowning out other logs and slowing the dev loop. Replace it with a silent dev-only action ring buffer (global.__reduxActions, cap 100) and expose the store on global.reduxStore, so actions and state stay inspectable at runtime without console noise. The verbose logger stays available, commented in the store config, for manual re-enable. Production store config is unchanged.
WalkthroughA new ChangesactionBuffer middleware and store wiring
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
diegolmello
temporarily deployed
to
android_build
GitHub Actions
Inactive
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
app/lib/store/index.ts (1)
36-38: ⚡ Quick winType the dev global store handle instead of casting to
any.This debug API is useful, but the
anycast removes compile-time safety for callers and future maintenance.♻️ Proposed refactor
if (__DEV__) { - (global as any).reduxStore = store; + global.reduxStore = store; }Add a shared
declare globalforreduxStore(alongside__reduxActions) so both debug globals stay strongly typed.As per coding guidelines, "Use TypeScript for type safety; add explicit type annotations to function parameters and return types".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/lib/store/index.ts` around lines 36 - 38, Remove the unsafe `any` cast from the global store assignment in the development block where `(global as any).reduxStore = store` is defined. Instead, add a shared `declare global` statement (similar to how `__reduxActions` is declared) that properly types the `reduxStore` property on the global object with the correct Redux Store type. This will eliminate the type safety hole created by the cast and provide compile-time type checking for all callers accessing this debug API.Source: Coding guidelines
app/lib/store/actionBuffer.ts (1)
3-6: Improve global type safety for the debug action buffer using TypeScript's declare global.The current
(global as any)pattern bypasses TypeScript type-checking on the shared global state. Use a typed global augmentation with interfaces instead.♻️ Proposed refactor
+interface BufferedReduxAction { + type: unknown; +} + +interface BufferedActionEntry { + type: unknown; + t: number; +} + +declare global { + // eslint-disable-next-line no-var + var __reduxActions: BufferedActionEntry[] | undefined; +} + const CAP = 100; export const actionBuffer = () => (_store: any) => (next: any) => (action: any) => { - (global as any).__reduxActions ??= []; - const buf = (global as any).__reduxActions; + global.__reduxActions ??= []; + const buf = global.__reduxActions; buf.push({ type: action.type, t: Date.now() }); if (buf.length > CAP) buf.shift(); return next(action); };This approach follows the TypeScript guideline: "Use TypeScript for type safety; add explicit type annotations" and "Prefer interfaces over type shapes."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/lib/store/actionBuffer.ts` around lines 3 - 6, The actionBuffer middleware uses `(global as any)` type assertions which bypass TypeScript's type checking for the shared global `__reduxActions` state. Instead of using `any`, add a TypeScript `declare global` block with an interface that properly augments the global namespace to type the `__reduxActions` property as an array with the shape containing type and timestamp fields. This way, when accessing `(global as any).__reduxActions` in the actionBuffer function, you can replace the `any` assertions with the properly typed global object, maintaining type safety throughout the middleware.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/lib/store/actionBuffer.test.ts`:
- Around line 33-50: The console spy restorations in the test
(logSpy.mockRestore, infoSpy.mockRestore, groupSpy.mockRestore,
groupEndSpy.mockRestore) are only called if all assertions pass, leaving the
mocks in place if any assertion fails. Move the restoration calls to an
afterEach hook to ensure cleanup happens regardless of test outcome, or wrap the
spy setup and test logic in a try-finally block where the finally clause
contains all mockRestore calls. This guarantees that the mocked console.log,
console.info, console.group, and console.groupEnd methods are properly restored
even when tests fail.
---
Nitpick comments:
In `@app/lib/store/actionBuffer.ts`:
- Around line 3-6: The actionBuffer middleware uses `(global as any)` type
assertions which bypass TypeScript's type checking for the shared global
`__reduxActions` state. Instead of using `any`, add a TypeScript `declare
global` block with an interface that properly augments the global namespace to
type the `__reduxActions` property as an array with the shape containing type
and timestamp fields. This way, when accessing `(global as any).__reduxActions`
in the actionBuffer function, you can replace the `any` assertions with the
properly typed global object, maintaining type safety throughout the middleware.
In `@app/lib/store/index.ts`:
- Around line 36-38: Remove the unsafe `any` cast from the global store
assignment in the development block where `(global as any).reduxStore = store`
is defined. Instead, add a shared `declare global` statement (similar to how
`__reduxActions` is declared) that properly types the `reduxStore` property on
the global object with the correct Redux Store type. This will eliminate the
type safety hole created by the cast and provide compile-time type checking for
all callers accessing this debug API.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f5530592-21d5-4bc3-9851-9915a5716970
📒 Files selected for processing (3)
app/lib/store/actionBuffer.test.tsapp/lib/store/actionBuffer.tsapp/lib/store/index.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: ESLint and Test / run-eslint-and-test
- GitHub Check: format
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions
Files:
app/lib/store/actionBuffer.tsapp/lib/store/actionBuffer.test.tsapp/lib/store/index.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbersUse TypeScript with strict mode enabled
Files:
app/lib/store/actionBuffer.tsapp/lib/store/actionBuffer.test.tsapp/lib/store/index.ts
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Prettier formatting with tabs, single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses
Files:
app/lib/store/actionBuffer.tsapp/lib/store/actionBuffer.test.tsapp/lib/store/index.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Enforce ESLint rules from
@rocket.chat/eslint-configwith React, React Native, TypeScript, and Jest plugins
Files:
app/lib/store/actionBuffer.tsapp/lib/store/actionBuffer.test.tsapp/lib/store/index.ts
app/lib/store/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Store Redux store configuration in 'app/lib/store/' directory
Files:
app/lib/store/actionBuffer.tsapp/lib/store/actionBuffer.test.tsapp/lib/store/index.ts
🧠 Learnings (1)
📚 Learning: 2026-04-30T17:07:51.020Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.
Applied to files:
app/lib/store/actionBuffer.tsapp/lib/store/actionBuffer.test.tsapp/lib/store/index.ts
diegolmello
requested a deployment
to
upload_android
GitHub Actions
Waiting
|
Android Build Available Rocket.Chat 4.74.0.109148 Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNTckuvfGBeYdkGiDKolDcyjLoHrQjZlj22t0-GHEKeMui5ZoyZC9b5_9tgNuAoMgyc_W37BbsawZ8tfXJGv |
|
iOS Build Available Rocket.Chat 4.74.0.109152 |
1 participant
Proposed changes
In dev builds,
reduxLoggerlogged every dispatched action and the full store state to Metro on each dispatch (console.group/info/log/groupEnd), flooding the console and slowing the dev loop.This removes the logger from the store wiring and replaces it with inspection surfaces that stay quiet:
global.__reduxActions(records each actiontype+ timestamp, capped at 100, oldest dropped). Writes nothing to the console.global.reduxStore(dev only) so current state is readable at runtime by agents.Both surfaces live inside the
if (__DEV__)branch, so release builds strip them and the production store config is unchanged.Issue(s)
https://rocketchat.atlassian.net/browse/NATIVE-1298
How to test or reproduce
dispatching/next statelines.globalThis.reduxStore.getState().login.isAuthenticated.globalThis.__reduxActions.slice(-10).globalThis.__reduxActions.some(a => a.type === 'LOGIN_SUCCESS').app/lib/store/index.ts, uncomment theloggerrequire and theapplyMiddleware(logger)line (add a comma afterapplyMiddleware(actionBuffer())).Types of changes
Checklist
Summary by CodeRabbit
Tests
New Features