The 114KB Span Attribute That Hid Our LCP Data
A recent issue in a React Native app revealed a problem with LCP data visibility in Sentry. The problem stemmed from an oversized span attribute, specifically a base64 data URL, which prevented proper querying of the LCP transaction on iOS. This discrepancy highlighted differences in how LCP data was handled between iOS and Android platforms.
- ▪The LCP transaction was visible in Sentry but could not be queried by certain attributes on iOS.
- ▪The problematic span attribute was a base64 data URL that was around 114KB in size.
- ▪In contrast, the Android version of the app handled LCP data without issues, sending a much shorter URL.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 1295265) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } FrankFan Posted on May 22 The 114KB Span Attribute That Hid Our LCP Data #observability #sentry #reactnative #webperf A React Native WebView debugging story about LCP, data URLs, and trace attributes We recently ran into a strange Sentry performance issue in a React Native app. The short version: Our LCP transaction existed in Sentry, but we could not query it by the attributes we attached to it. That sounded contradictory at first.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV.to (Top).