Developer Tools Settings Block for React

Edit CALLS: each request has an id, a method and path, a status, the time in milliseconds, the body it sent and the response it got, and, for a failed one, an error and a stack. payloadOf builds the JSON from a request and the switches, and phasesOf splits the time into phases that add up to it, so a new request needs no other change. ENVIRONMENTS holds the host each environment shows in the URL.

Capture requests decides whether the panel lists requests at all. Debug mode adds a debug object (the SDK version, retries and whether the request was queued) to each request's JSON. Verbose errors adds a stack to the error of a request that failed; a request that succeeded has no error to add it to. Performance timing fills the time column, which shows a dash while it is off, and adds a timing object whose parts add up to the total. The environment changes the host in each URL.

Because the switches stop being a sandbox exercise: on Live they would apply to real devices and real data, so the line says so before you save. It is a statement rather than a block, and Save still works; add a confirmation of your own if saving on Live should need one. The line's room is reserved in both environments, so choosing Live doesn't move the switches.

The six requests are typed: nothing is captured from a device and nothing is sent. Save keeps the switches in this page and says so. To make it real, have the SDK send its recent requests to this panel (or read them from your log store), apply the switches to the SDK's configuration on save, and keep the JSON keys you want to show in payloadOf.

Each switch has its name, the environment is a labelled group, and the request table is a native table with a caption and a header row. Each request is a button, so Tab reaches it and Enter chooses it; the status line says which request is shown, and the JSON tree below it is a real tree with arrow-key navigation. A request that failed carries a "failed" mark in words as well as its icon, and a time of a dash says "Timing is off" for a screen reader.

The switches come first at full width, then the capture panel at a fixed height with the table above and the JSON below, each scrolling inside its own box, so choosing a request or switching capture off never changes the height of the panel. Paths are cut short with an ellipsis in the table and shown in full in the JSON.