Company
Date Published
Author
Alberto Gimeno
Word count
1439
Language
English
Hacker News points
None

Summary

Rendering logs in a web UI, particularly for GitHub Actions, involves complexities beyond displaying plain text, necessitating features like coloring, grouping, and virtualization to handle large volumes efficiently. Initially, GitHub used a vanilla JavaScript library to virtualize log lines, which enabled rendering a subset of information to prevent browser freezing but faced limitations such as fixed height requirements and poor user experience with multiple scrollable areas and text selection issues. The team decided to revamp the log experience by eliminating data virtualization, as most logs contained fewer than 50,000 lines, opting instead for UI virtualization to maintain smooth scrolling and efficient memory usage. They developed a custom virtualization library to address these issues, allowing variable element heights, single scrollable areas, sticky headers, and improved performance through techniques like estimating heights before rendering and clustering log lines. This approach ensured a more seamless and robust user experience, demonstrating that sometimes creating a tailored solution from scratch can provide greater control and optimization.