TechPrufer
Get started
Atlassian
Atlassian logoAtlassian · Feature trail

Unreproducible React Bug Debugging

1 post · Jul 2022

What this trail covers

This post details the process of debugging and fixing an unreproducible React bug in Trello's date picker. It highlights strategies for investigating issues that are difficult to reproduce, including analyzing customer clues, using support impersonation, and simulating browser-specific behaviors. The core of the fix involved identifying an infinite loop in a Trello-specific Popover component that was triggered by inconsistent viewport measurements, leading to a one-line code change.

All Atlassian trails
  1. A Trello feature froze, but engineering didn’t: How we fixed an unreproducible React bugThis post details the debugging process for an unreproducible React bug affecting Trello's date picker. It describes how the team used customer clues (quick edit menu vs. full card edit, 'Page Unresponsive' dialog, exiting fullscreen) to narrow down the problem to Trello's modern stack Popover component. The key finding was an infinite loop caused by a `resizeHandler` function, which used `MutationObserver` and `getBoundingClientRect` to calculate `maxHeight`. Inconsistent floating-point measurements, simulated by modifying `getBoundingClientRect` to add random noise, were found to trigger the loop. The fix involved a one-line change to prevent the loop.