Flow Studio
Text Search
The search box in the Logs tab performs a case-insensitive substring match across the message field and the serialized data field. Matching entries are shown; non-matching entries are hidden. The match term is highlighted in results.
What Is Searched
| Field | Searched | Notes |
|---|---|---|
message | Yes | Full message text (post-sanitization) |
data | Yes | Serialized to JSON string first, then searched |
level | No | Use the level filter chips instead |
nodeId / node name | No | Use the node filter dropdown instead |
traceId | Yes | Allows searching by trace ID to find all logs for a specific trace |
Search Implementation
// Case-insensitive substring search
function matchesSearch(entry: LogEntry, term: string): boolean {
if (!term) return true;
const lower = term.toLowerCase();
const messageMatch = entry.message.toLowerCase().includes(lower);
const dataMatch = entry.data
? JSON.stringify(entry.data).toLowerCase().includes(lower)
: false;
const traceMatch = entry.traceId.toLowerCase().includes(lower);
return messageMatch || dataMatch || traceMatch;
}
Debounced Input
The search input is debounced by 200ms to avoid re-filtering the entire log buffer on every keystroke. With a 10,000-entry buffer, filtering is fast but debouncing prevents UI jank during rapid typing:
// Debounced search term state
const [searchTerm, setSearchTerm] = useState('');
const debouncedTerm = useDebounce(searchTerm, 200);
Highlight in Results
Matched portions of the message are wrapped in a highlight span. The highlight uses the accent colour (#fbbf24 — amber) so it is visually distinct from all level colours:
// Simple highlight utility
function highlight(text: string, term: string): ReactNode {
if (!term) return text;
const parts = text.split(new RegExp(`(${escapeRegex(term)})`, 'gi'));
return parts.map((part, i) =>
part.toLowerCase() === term.toLowerCase()
? <mark key={i} className="log-highlight">{part}</mark>
: part
);
}
Search + Filters Stack
Text search combines with the level filter and node filter. All three constraints must be satisfied for a log entry to appear. For example: level=Error AND node=send-email AND message contains "timeout".