Building a Scalable Log Viewer with React and GraphQL
At LogRocket, we understand the importance of having a reliable log viewer that can handle large amounts of data. In this article, we’ll explore how we built our log viewer using React, GraphQL, and other modern technologies.
Initial Design Concerns
When designing our log viewer, we had several key concerns:
- Smooth scroll performance: We wanted to ensure that our log viewer could handle thousands of logs without sacrificing performance.
- User-interactive JSON tree: We wanted to allow users to expand and collapse JSON objects in the log viewer, just like in the Chrome console.
- Lazy-loaded object expansion: We wanted to load log data on demand when a user expands a log entry, rather than loading all data upfront.
- Persisted state: We wanted to persist the state of the log viewer even when the component is unmounted and remounted.
Using React-Virtualized for Smooth Scrolling
To achieve smooth scrolling, we used React-Virtualized, a library that allows us to render only the visible items in a list. This approach bypasses the browser’s layout engine, allowing us to freely mount and unmount rows without affecting the positioning of subsequent rows.
Implementing Dynamic Row Heights
One challenge we faced was implementing dynamic row heights. We needed to account for rows with varying heights, such as when a user expands a JSON object. To solve this, we used React-Measure, a library that provides a helpful abstraction for writing components that are aware of their own height.
Using Apollo Client for Data Fetching
To handle data fetching, we used Apollo Client, a GraphQL client that works nicely in React apps. When a user clicks on a log entry, Apollo makes a request to the backend and populates the data in the Redux store.
Object Inspection with React-Inspector
To let users explore logged objects, we used React-Inspector, a library that includes a host of components for logging objects and DOM nodes. We did, however, end up forking the library to build a controlled version that keeps state in Redux.
Conclusion
Building a scalable log viewer requires careful consideration of performance, user experience, and data management. By using React, GraphQL, and other modern technologies, we were able to create a log viewer that meets the needs of our users.