Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Function Execution Time Monitoring Block for Ark UI

Sixty invocations of one function as dots, cold starts ringed, with a timeout line, a Duration or Billed axis toggle, arrow-key selection and a report of the chosen call in a code box with a copy button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how a serverless function behaves call by call, and what a cold start costs, with this execution-time panel for React with Ark UI. It is Thawlight, a serverless function monitor (made up), watching one function for an hour. A hairline frame with a plus mark on each corner holds 60 invocations, one a minute, drawn as dots with time across and milliseconds up; the cold starts are rings and a dashed line marks the timeout. A Toggle Group swaps the axis between the time to answer (init plus handler) and the billed time, which rounds up to the next 100 ms. The dots are one native radio group: arrow keys step through the invocations, and the chosen one fills the side cell with its facts and its report, four lines in a code box with a Copy Button. The header counts the cold starts and says what one adds at the median. Guides draw the frame and its bands; the entrance is CSS only. For serverless owners, cost reviews and cold-start tuning.

FAQ

How do I use my own invocations?

Edit CALL_LINES: one line per invocation, handler|init|memory, with the handler and init times in tenths of a millisecond (init is 0 for a warm start) and the memory used in megabytes. FIRST_MINUTE, FUNCTION_NAME, MEMORY and TIMEOUT set the rest. Billed time, the cold count, the median init and the header are derived from the lines.

Why is billed time a staircase?

In this made-up product billing rounds each call up to the next 100 ms, so the billed dots snap to rows. Switching the axis shows how much of the bill is rounding: a 104 ms call bills as 200 ms. Change the rounding in callOf to match your platform.

How do I move between invocations by keyboard?

Tab into the group, then use the arrow keys to move between invocations; each press selects it, the side cell updates and a polite line says which call it is. The dots are native radios, so no custom key handling is involved. On a phone the plot scrolls sideways in a named region.

What is real here and what is typed?

The invocations are typed examples and nothing is measured. The copy button is real: it puts the four-line report on your clipboard. The product and the function name are made up; no cloud provider is named. In your app feed the same shape from your function logs.

Can I read it without colour?

Yes. Warm calls are filled dots and cold starts are rings, the selected dot has an outline, the timeout is a dashed line with a label, and every dot has a spoken name with its time, kind and milliseconds.

How does it look on a phone?

The side cell stacks under the plot, and the plot scrolls sideways in a region of its own so the dots keep a usable size.

All 100 monitoring blocks