No Error Tracking Empty State Block for React

No SDK is loaded and nothing is sent. The package and host names are made up, and the test error is a row kept in the page's state: each press adds one to "Seen 3 times" and a reload clears it. To wire it for real, use your own package and key in both snippets, capture a real error where the code says so, and list what your API returns here instead of the typed row.

The small button in the code window copies the command of the open tab, and the Shine Button under the steps does the same: both write the same text to your clipboard, which is the one thing here that really leaves the page. The polite line under the steps says which command was copied ("Copied the pnpm command.") or that the clipboard refused it, with a note to copy it by hand.

Each tab shows one package manager's command, in a window of one fixed height, so choosing a tab never moves the page. They are real tabs, so the arrow keys move between them and Tab goes on to the copy button and the command itself, which scrolls sideways inside its window on a narrow screen. The code windows follow the theme; only a real terminal would stay dark.

It lists one row, "TestError: demo error from this page", with how many times it was seen and the page's fixed date, turns the ring around the boat solid and adds a wider ring. The slot holds one row's height before and after, so nothing moves. Start over, which stays quiet until there is a row, clears it and puts focus back on the button.

No. It is hidden from assistive technology; the same facts are in the list's row ("No errors captured yet" or the test error) and in the status line. The ring is dashed while the water is still and its change is a CSS transition that is off under reduced motion.

The lake sits above the copy at 112 px tall, the steps stack, and the copy button is pinned to the foot of the screen while the page is in view so it is always in reach. Nothing scrolls sideways, even at 320 px wide; the code scrolls inside its window.