fix: Client-side exception occurs when adding a filter to rate limit logs table with no data#2542
fix: Client-side exception occurs when adding a filter to rate limit logs table with no data#2542chronark merged 17 commits intounkeyed:mainfrom
Conversation
RajuGangitla
requested review from
chronark,
mcstepp and
perkinsjr
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@RajuGangitla is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe changes made in the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![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
🧹 Outside diff range and nitpick comments (1)
apps/dashboard/components/array-input.tsx (1)
Line range hint
21-40: Consider adding input validation and limits for rate limit filters.While the component handles basic input scenarios, consider adding these safeguards for the rate limit logs use case:
- Maximum number of filters to prevent performance issues
- Input validation for filter format/values
- Clear feedback when validation fails
Example improvements:
type Props = { // ... existing props maxItems?: number; validate?: (value: string) => boolean; onValidationError?: (error: string) => void; };This would allow the rate limit logs table to:
- Limit the number of concurrent filters
- Validate filter syntax
- Show meaningful error messages
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- apps/dashboard/components/array-input.tsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (1)
apps/dashboard/components/array-input.tsx (1)
17-17: Verify the fix resolves the rate limit logs table issue.The default value for
selectedshould prevent the "undefined is not iterable" error. The implementation looks correct.Let's verify all usages of ArrayInput to ensure they handle empty states correctly:
✅ Verification successful
Let me check the actual implementation in those files to verify how ArrayInput is being used.
Based on the analysis of the files, I can now generate the final response:
The fix is properly implemented and used correctly throughout the rate limit logs.
The verification shows that:
- In
filters.tsx, ArrayInput receivesidentifierwhich is initialized usingparseAsArrayOf(parseAsString).withDefault([]), ensuring it's never undefined- In
logs/filter.tsx, ArrayInput is used via theFilterRowcomponent which receivesselectedfrom state variables (identifier, country, ipAddress) that are all initialized with.withDefault([])- All usages properly handle the empty state by using array state management with default empty arrays
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for ArrayInput usage in rate limit logs related files rg -l "ArrayInput" | rg -i "rate.*limit|log" # Check for any direct selected prop assignments without default values ast-grep --pattern 'selected={$_}'Length of output: 209
Script:
#!/bin/bash # Check the content of the files that use ArrayInput in rate limit context cat apps/dashboard/app/\(app\)/ratelimits/[namespaceId]/filters.tsx apps/dashboard/app/\(app\)/ratelimits/[namespaceId]/logs/filter.tsx # Also search for any ArrayInput props pattern to see how selected is passed ast-grep --pattern '<ArrayInput $$$selected={$_}$$$/>'Length of output: 13029
| }; | ||
|
|
||
| export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected, setSelected }) => { | ||
| export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected = [], setSelected }) => { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider making the selected prop optional in the Props type.
While adding a default value for selected fixes the "undefined is not iterable" error, there's a slight inconsistency in the type definition. The selected prop is marked as required in the Props type but has a default value in the component signature.
Consider updating the Props type to match the runtime behavior:
type Props = {
title?: string;
placeholder?: string;
- selected: string[];
+ selected?: string[];
setSelected: (v: string[]) => void;
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const ArrayInput: React.FC<Props> = ({ title, placeholder, selected = [], setSelected }) => { | |
| type Props = { | |
| title?: string; | |
| placeholder?: string; | |
| selected?: string[]; | |
| setSelected: (v: string[]) => void; | |
| }; |
|
Awarding RajuGangitla: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/RajuGangitla |
2 participants
What does this PR do?
This pr will add a default value to the filters state
Fixes #2388
Actually this is working fine in local it didnt throw any client side exception but in production its throwing a error
so based on the error undefined is not iterable
i give default value empty array
Summary by CodeRabbit
New Features
ArrayInputcomponent now initializes theselectedprop with a default empty array, enhancing usability and preventing runtime errors.Bug Fixes
selectedprop to ensure smoother functionality.