@ogygia/devtools/profiler/client

This page is generated from the package’s own .d.ts files on every build, so the signatures, descriptions and examples below always match the source.

import { … } from '@ogygia/devtools/profiler/client';

Exports mark · MarkHandle · MarkAttrs

mark

function

const mark: (<T>(name: string, work: (() => T) | PromiseLike<T>, attrs?: MarkAttrs) => T) & {
  event: typeof mark_event;
  start: typeof mark_start;
}

MarkHandle

interface

interface MarkHandle {/*…*/}

MarkHandle.end

close it; ending twice is a no-op

end(attrs?: MarkAttrs): void;

MarkAttrs

type

mark — the browser twin of span: name a stretch of the visitor's time the server profile cannot see (a design system's CDN components hydrating, a widget booting, a font arriving) and the report shows it next to the islands' own hydration times, for the page.

• mark(name, fn) times a function or the promise it returns; mark(name, promise) times a promise you already hold. A throw or rejection is recorded (error: true) and rethrown. • mark.event(name, type, target?) times until an event fires — a web-components runtime's "all hydrated" event, a widget's ready — from the call (or from navigation start with { from: 'navigation' }). • mark.start(name) opens one by hand; end(attrs?) closes it. { from: 'navigation' } on either measures from the page's start instead of the call.

Cost: nothing without the profiler's beacon tag in the document (the profiler puts it there for its own logged-in user only) — one querySelector on the first call, then a boolean. With it, one entry in a batch sent when the page is idle or hides. Never a request per mark.

import { mark } from '@ogygia/devtools/profiler/client';
mark.event('ds.hydrate', 'components-ready');         // the design system's runtime: every component hydrated
await mark('widget.boot', () => widget.init(), { version: '3' });

type MarkAttrs = Record<string, string | number | boolean>;