TechPrufer
Get started
Slack
Slack logoSlack · Feature trail

React Analytics Logging Library

2 posts · Nov 2020 – Dec 2020

What this trail covers

This thread tracks the evolution of Slack's analytics logging capabilities within its React frontend. Initial posts detail the creation of a flexible React analytics library, focusing on efficient data sharing, smarter impression logging, and simplified event logging. This post introduces advanced features such as abstracting the library for cross-team use, implementing robust history tracking of user navigation, and building a live data viewer for real-time visibility into logged events. The thread will continue to cover further refinements to the logging system.

All Slack trails
  1. Creating a React Analytics Logging LibraryThis post details the technical implementation of advanced features for a React analytics logging library. It covers abstracting PropTypes for customizable data tag configurations, enabling teams to define their own data keys and types. It also describes how to create custom payload data shapes using a configuration object and lodash's `set` function for nested data structures. Furthermore, it explains how to implement log history tracking using `window.sessionStorage` to enrich subsequent events with referring data, and how to build a live log-viewer component using React Context API to visualize configured and triggered events in real-time.
  2. Creating a React Analytics Logging LibraryThis post details the technical implementation of a React analytics logging library, focusing on three key areas: efficient data sharing using React's Context API to avoid prop-drilling and code duplication; smarter impression logging by leveraging the Intersection Observer API to log impressions only when elements are in view; and simplified event logging for actions like clicks. It provides code examples for sharing data, setting up observers, and handling component updates for logging.