Conversation
Add virtual list to table to prevent rendering lots of items at once. Since we store items in the memory as we fetch more item, list might get big enough to slow the page down, thats why we have to partially show them.
Add debounce to combobox filters and add shortcut del/backspace to remove combobox filters when focused
|
|
|
|
There was a problem hiding this comment.
We should not parse the body into key-values, and more importantly we should't uppercase their keys, it loses the information that this was actually json, and while we always expect json, the user might mess up and send us something invalid.
I'm good with optimistically calling JSON.stringify(JSON.parse(body), null, 2) in a try catch to try and format it nicely but falling back to displaying the raw string
I agree, yeah. Let's do this. |
Those are actually padded from left on purpose, but we can change that if we are not happy. |
It looks a bit off and unintentional, but maybe that's just me let's keep it as is for now to move quickly |
This PR also adds escape listener when you navigating table with keyboard
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (2)
apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx (2)
3-9: Extract props interface for better maintainability.Consider extracting the props interface to improve code organization and reusability.
+interface LogSectionProps { + details: string | string[]; + title: string; +} + -export const LogSection = ({ - details, - title, -}: { - details: string | string[]; - title: string; -}) => { +export const LogSection = ({ details, title }: LogSectionProps) => {
11-14: Consider using design tokens for measurements.Replace hardcoded pixel values with design system tokens for better maintainability and consistency.
-<div className="px-3 flex flex-col gap-[2px]"> - <span className="text-sm text-content/65 font-sans">{title}</span> - <Card className="rounded-[5px] bg-background-subtle"> - <CardContent className="p-2 text-[12px]"> +<div className="px-3 flex flex-col gap-1"> + <span className="text-sm text-content/65 font-sans">{title}</span> + <Card className="rounded-md bg-background-subtle"> + <CardContent className="p-2 text-xs">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
apps/dashboard/app/(app)/logs/components/log-details/components/log-footer.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/log-details/index.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/logs-table.tsx(1 hunks)apps/dashboard/app/(app)/logs/utils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx
- apps/dashboard/app/(app)/logs/components/log-details/index.tsx
- apps/dashboard/app/(app)/logs/components/logs-table.tsx
- apps/dashboard/app/(app)/logs/components/log-details/components/log-footer.tsx
🔇 Additional comments (4)
apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx (1)
18-19:
Improve header parsing logic.
The current splitting logic might break for headers containing multiple colons.
-const [key, ...valueParts] = header.split(":");
-const value = valueParts.join(":").trim();
+const colonIndex = header.indexOf(':');
+const key = colonIndex > -1 ? header.slice(0, colonIndex) : header;
+const value = colonIndex > -1 ? header.slice(colonIndex + 1).trim() : '';apps/dashboard/app/(app)/logs/utils.ts (3)
1-11: LGTM! Well-structured error handling implementation.
The custom error class follows TypeScript best practices with proper type safety and immutable context.
13-48:
Add input validation and structured logging
Several security and robustness improvements are needed:
export const extractResponseField = <K extends keyof ResponseBody>(
log: Log,
fieldName: K,
): ResponseBody[K] | null => {
+ // Validate fieldName
+ if (typeof fieldName !== 'string' && typeof fieldName !== 'number' && typeof fieldName !== 'symbol') {
+ console.error('[extractResponseField] Invalid fieldName type', { fieldName });
+ return null;
+ }
+
if (!log?.response_body) {
- console.error("Invalid log or missing response_body");
+ console.error("[extractResponseField] Invalid log or missing response_body", { logId: log?.request_id });
return null;
}
+ // Validate response body size
+ const MAX_RESPONSE_BODY_SIZE = 1024 * 1024; // 1MB
+ if (log.response_body.length > MAX_RESPONSE_BODY_SIZE) {
+ console.error("[extractResponseField] Response body exceeds size limit", {
+ logId: log.request_id,
+ size: log.response_body.length
+ });
+ return null;
+ }
try {
const parsedBody = JSON.parse(log.response_body) as ResponseBody;1-84: Verify usage patterns and error handling consistency
Let's verify how these utilities are used across the codebase to ensure consistent error handling patterns.
✅ Verification successful
Consistent error handling and usage patterns verified
Based on the search results, I can confirm:
-
The utility functions are used consistently across the logs feature:
extractResponseFieldis used in log details components for parsing meta, code, and permissionsgetRequestHeaderis used for extracting user-agent informationsafeParseJsonis used for safely displaying request and response bodies
-
Error handling patterns are consistent:
- All functions properly handle edge cases with appropriate error logging
- Error messages are descriptive and include relevant context
- Console logging follows a consistent pattern across the codebase
-
The implementation aligns with the codebase's error handling practices:
- Uses
console.errorfor critical failures - Uses
console.warnfor non-critical issues - Includes contextual information in error messages
- Uses
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check usage patterns of the utility functions
# Check for usage of extractResponseField
echo "Checking extractResponseField usage:"
rg "extractResponseField" -A 2
# Check for usage of getRequestHeader
echo "Checking getRequestHeader usage:"
rg "getRequestHeader" -A 2
# Check for usage of safeParseJson
echo "Checking safeParseJson usage:"
rg "safeParseJson" -A 2
# Check for consistent error logging patterns
echo "Checking error logging patterns:"
rg "console\.(error|warn)" --type ts
Length of output: 15622
apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx
Show resolved
Hide resolved
apps/dashboard/app/(app)/logs/components/log-details/components/log-section.tsx
Show resolved
Hide resolved
2 participants
What does this PR do?
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
Release Notes
New Features
LogsChartcomponent for visualizing log data with a bar chart.DatePickerWithRangecomponent for selecting custom date ranges.ResponseStatusfilter component for managing HTTP response status filters.SearchComboboxfor enhanced log search capabilities.Timelinecomponent for selecting time ranges for log filtering.LogsFilterscomponent to streamline log entry filtering.LogFooter,LogHeader,LogMetaSection, andLogSectioncomponents for detailed log entry views.LoadingRowcomponent to display loading states in the logs table.ResizablePanelfor improved log detail views.TimestampInfocomponent for enhanced timestamp displays.Calendarcomponent for date selection integrated with the UI.ButtonGroupcomponent for grouping buttons in the UI.Improvements
LogsTablefor better performance with large datasets.Bug Fixes
Documentation