@zendesk/react-measure-timing-hooks
Version:
react hooks for measuring time to interactive and time to render of components
69 lines • 2.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateUseBeacon = void 0;
const react_1 = require("react");
const ErrorBoundary_1 = require("../ErrorBoundary");
const ensureTimestamp_1 = require("./ensureTimestamp");
const makeEntry = (inp) => ({
...inp,
startTime: (0, ensureTimestamp_1.ensureTimestamp)(inp.startTime),
});
/**
* The job of the beacon:
* emit component-render-start, component-render, component-unmount entries
*/
const generateUseBeacon = (traceManager) => (config) => {
const renderCountRef = (0, react_1.useRef)(0);
renderCountRef.current += 1;
const { attributes, renderedOutput } = config;
const status = config.error ? 'error' : 'ok';
const isIdle = config.isIdle ??
(renderedOutput === 'content' || renderedOutput === 'error');
const relatedTo = config.relatedTo;
const renderStartTaskEntry = makeEntry({
...config,
relatedTo,
type: 'component-render-start',
duration: 0,
attributes,
status,
renderCount: renderCountRef.current,
isIdle,
});
traceManager.processSpan(renderStartTaskEntry);
const renderStartRef = (0, react_1.useRef)();
renderStartRef.current = renderStartTaskEntry.startTime;
// Beacon effect for tracking 'component-render'. This will fire after every render as it does not have any dependencies:
(0, react_1.useEffect)(() => {
traceManager.processSpan(makeEntry({
...config,
relatedTo,
startTime: renderStartRef.current,
type: 'component-render',
duration: performance.now() - renderStartRef.current.now,
status,
attributes,
renderCount: renderCountRef.current,
isIdle,
}));
renderStartRef.current = undefined;
});
// Beacon effect for tracking 'component-unmount' entries
(0, ErrorBoundary_1.useOnComponentUnmount)((errorBoundaryMetadata) => {
const unmountEntry = makeEntry({
...config,
relatedTo,
type: 'component-unmount',
attributes,
error: errorBoundaryMetadata?.error,
errorInfo: errorBoundaryMetadata?.errorInfo,
duration: 0,
status: errorBoundaryMetadata?.error ? 'error' : 'ok',
renderCount: renderCountRef.current,
isIdle,
});
traceManager.processSpan(unmountEntry);
}, [config.name]);
};
exports.generateUseBeacon = generateUseBeacon;
//# sourceMappingURL=hooks.js.map