@zendesk/react-measure-timing-hooks
Version:
react hooks for measuring time to interactive and time to render of components
389 lines • 17.7 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
require("./testUtility/asciiTimelineSerializer");
const vitest_1 = require("vitest");
const matchSpan = __importStar(require("./matchSpan"));
const makeTimeline_1 = require("./testUtility/makeTimeline");
const processSpans_1 = require("./testUtility/processSpans");
const TraceManager_1 = require("./TraceManager");
(0, vitest_1.describe)('TraceManager', () => {
let reportFn;
let generateId;
let reportErrorFn;
let reportWarningFn;
const DEFAULT_COLDBOOT_TIMEOUT_DURATION = 45_000;
vitest_1.vitest.useFakeTimers({
now: 0,
});
(0, vitest_1.beforeEach)(() => {
reportFn = vitest_1.vitest.fn();
generateId = vitest_1.vitest.fn().mockReturnValue('trace-id');
reportErrorFn = vitest_1.vitest.fn();
reportWarningFn = vitest_1.vitest.fn();
});
(0, vitest_1.afterEach)(() => {
vitest_1.vitest.clearAllMocks();
vitest_1.vitest.clearAllTimers();
});
(0, vitest_1.it)('tracks trace after creating a draft and transitioning to active trace', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
const traceId = tracer.createDraft({
variant: 'cold_boot',
});
(0, vitest_1.expect)(traceId).toBe('trace-id');
// prettier-ignore
const { spans } = (0, makeTimeline_1.getSpansFromTimeline) `
Events: ${(0, makeTimeline_1.Render)('start', 0)}-----${(0, makeTimeline_1.Render)('middle', 0)}-----${(0, makeTimeline_1.Render)('end', 0)}---<===+2s===>----${makeTimeline_1.Check}
Time: ${0} ${50} ${100} ${2_100}
`;
(0, processSpans_1.processSpans)(spans, traceManager);
tracer.transitionDraftToActive({ relatedTo: { ticketId: '1' } });
(0, vitest_1.expect)(reportFn).toHaveBeenCalled();
const report = reportFn.mock.calls[0][0];
(0, vitest_1.expect)(report.entries.map((spanAndAnnotation) => spanAndAnnotation.span.performanceEntry)).toMatchInlineSnapshot(`
events | start middle end
timeline | |-<⋯ +50 ⋯>-|-<⋯ +50 ⋯>-|
time (ms) | 0 50 100
`);
(0, vitest_1.expect)(report.name).toBe('ticket.basic-operation');
(0, vitest_1.expect)(report.duration).toBe(100);
(0, vitest_1.expect)(report.status).toBe('ok');
(0, vitest_1.expect)(report.interruptionReason).toBeUndefined();
});
(0, vitest_1.it)('interrupts a basic trace when interruptOnSpans criteria is met in draft mode, trace stops immediately', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.interrupt-on-basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [matchSpan.withName('end')],
interruptOnSpans: [matchSpan.withName('interrupt')],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.createDraft({
variant: 'cold_boot',
});
// prettier-ignore
const { spans } = (0, makeTimeline_1.getSpansFromTimeline) `
Events: ${(0, makeTimeline_1.Render)('start', 0)}-----${(0, makeTimeline_1.Render)('interrupt', 0)}-----${(0, makeTimeline_1.Render)('end', 0)}
Time: ${0} ${100} ${200}
`;
(0, processSpans_1.processSpans)(spans, traceManager);
(0, vitest_1.expect)(reportFn).toHaveBeenCalled();
const report = reportFn.mock.calls[0][0];
// there are NO entries in the report because this trace was interrupted before transitioning from draft to active
(0, vitest_1.expect)(report.entries).toHaveLength(0);
(0, vitest_1.expect)(report.name).toBe('ticket.interrupt-on-basic-operation');
(0, vitest_1.expect)(report.duration).toBeNull();
(0, vitest_1.expect)(report.status).toBe('interrupted');
(0, vitest_1.expect)(report.interruptionReason).toBe('matched-on-interrupt');
});
(0, vitest_1.it)('timeouts when the basic trace when an timeout duration from variant is reached', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.timeout-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'timed-out-render' }],
variants: { cold_boot: { timeout: 500 } },
});
const traceId = tracer.createDraft({
startTime: { now: 0, epoch: 0 },
variant: 'cold_boot',
});
(0, vitest_1.expect)(traceId).toBe('trace-id');
tracer.transitionDraftToActive({ relatedTo: { ticketId: '1' } });
// prettier-ignore
const { spans } = (0, makeTimeline_1.getSpansFromTimeline) `
Events: ${(0, makeTimeline_1.Render)('start', 0)}------${(0, makeTimeline_1.Render)('timed-out-render', 0)}
Time: ${0} ${500 + 1}
`;
(0, processSpans_1.processSpans)(spans, traceManager);
(0, vitest_1.expect)(reportFn).toHaveBeenCalled();
const report = reportFn.mock.calls[0][0];
(0, vitest_1.expect)(report.entries.map((spanAndAnnotation) => spanAndAnnotation.span.performanceEntry)).toMatchInlineSnapshot(`
events | start
timeline | |
time (ms) | 0
`);
(0, vitest_1.expect)(report.interruptionReason).toBe('timeout');
(0, vitest_1.expect)(report.duration).toBeNull();
(0, vitest_1.expect)(report.name).toBe('ticket.timeout-operation');
(0, vitest_1.expect)(report.status).toBe('interrupted');
(0, vitest_1.expect)(report.interruptionReason).toBe('timeout');
(0, vitest_1.expect)(report.duration).toBeNull();
});
(0, vitest_1.it)('reports error when calling `transitionDraftToActive` when a draft trace has not yet been created', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.transitionDraftToActive({ relatedTo: { ticketId: '1' } });
(0, vitest_1.expect)(reportErrorFn).toHaveBeenCalledWith(vitest_1.expect.objectContaining({
message: vitest_1.expect.stringContaining('No currently active trace when initializing'),
}));
});
(0, vitest_1.it)('reports warning when calling `transitionDraftToActive` again after a trace is active', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.createDraft({
variant: 'cold_boot',
});
tracer.transitionDraftToActive({ relatedTo: { ticketId: '1' } });
tracer.transitionDraftToActive({ relatedTo: { ticketId: '2' } });
(0, vitest_1.expect)(reportWarningFn).toHaveBeenCalledWith(vitest_1.expect.objectContaining({
message: vitest_1.expect.stringContaining('trace that has already been initialized'),
}));
});
(0, vitest_1.it)('interrupts a draft trace when interrupt() is called with error', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.createDraft({
variant: 'cold_boot',
});
// prettier-ignore
const { spans } = (0, makeTimeline_1.getSpansFromTimeline) `
Events: ${(0, makeTimeline_1.Render)('start', 0)}-----${(0, makeTimeline_1.Render)('middle', 0)}
Time: ${0} ${50}
`;
(0, processSpans_1.processSpans)(spans, traceManager);
const error = new Error('Test error');
tracer.interrupt({ error });
(0, vitest_1.expect)(reportFn).toHaveBeenCalled();
const report = reportFn.mock.calls[0][0];
(0, vitest_1.expect)(report.entries.length).toBe(3); // start, middle, and error mark
(0, vitest_1.expect)(report.status).toBe('interrupted');
(0, vitest_1.expect)(report.interruptionReason).toBe('aborted');
// Last entry should be the error mark
(0, vitest_1.expect)(report.entries[report.entries.length - 1].span.error).toBe(error);
});
(0, vitest_1.it)('interrupts a draft trace when interrupt() is called without error', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.createDraft({
variant: 'cold_boot',
});
// prettier-ignore
const { spans } = (0, makeTimeline_1.getSpansFromTimeline) `
Events: ${(0, makeTimeline_1.Render)('start', 0)}-----${(0, makeTimeline_1.Render)('middle', 0)}
Time: ${0} ${50}
`;
(0, processSpans_1.processSpans)(spans, traceManager);
tracer.interrupt();
(0, vitest_1.expect)(reportFn).toHaveBeenCalled();
const report = reportFn.mock.calls[0][0];
(0, vitest_1.expect)(report.status).toBe('interrupted');
(0, vitest_1.expect)(report.entries.length).toBe(0);
(0, vitest_1.expect)(report.interruptionReason).toBe('draft-cancelled');
});
(0, vitest_1.it)('interrupts an active trace when interrupt() is called with error', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.createDraft({
variant: 'cold_boot',
});
tracer.transitionDraftToActive({ relatedTo: { ticketId: '1' } });
// prettier-ignore
const { spans } = (0, makeTimeline_1.getSpansFromTimeline) `
Events: ${(0, makeTimeline_1.Render)('start', 0)}-----${(0, makeTimeline_1.Render)('middle', 0)}
Time: ${0} ${50}
`;
(0, processSpans_1.processSpans)(spans, traceManager);
const error = new Error('Test error');
tracer.interrupt({ error });
(0, vitest_1.expect)(reportFn).toHaveBeenCalled();
const report = reportFn.mock.calls[0][0];
(0, vitest_1.expect)(report.entries.length).toBe(3); // start, middle, and error mark
(0, vitest_1.expect)(report.status).toBe('interrupted');
(0, vitest_1.expect)(report.interruptionReason).toBe('aborted');
// Last entry should be the error mark
(0, vitest_1.expect)(report.entries[report.entries.length - 1].span.error).toBe(error);
});
(0, vitest_1.it)('interrupts an active trace when interrupt() is called without error', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.createDraft({
variant: 'cold_boot',
});
tracer.transitionDraftToActive({ relatedTo: { ticketId: '1' } });
// prettier-ignore
const { spans } = (0, makeTimeline_1.getSpansFromTimeline) `
Events: ${(0, makeTimeline_1.Render)('start', 0)}-----${(0, makeTimeline_1.Render)('middle', 0)}
Time: ${0} ${50}
`;
(0, processSpans_1.processSpans)(spans, traceManager);
tracer.interrupt();
(0, vitest_1.expect)(reportFn).toHaveBeenCalled();
const report = reportFn.mock.calls[0][0];
(0, vitest_1.expect)(report.status).toBe('interrupted');
(0, vitest_1.expect)(report.entries.length).toBe(2); // start, middle
(0, vitest_1.expect)(report.interruptionReason).toBe('aborted');
});
(0, vitest_1.it)('reports warning when interrupting a non-existent trace', () => {
const traceManager = new TraceManager_1.TraceManager({
relationSchemas: { ticket: { ticketId: String } },
reportFn,
generateId,
reportErrorFn,
reportWarningFn,
});
const tracer = traceManager.createTracer({
name: 'ticket.basic-operation',
type: 'operation',
relationSchemaName: 'ticket',
requiredSpans: [{ name: 'end' }],
variants: {
cold_boot: { timeout: DEFAULT_COLDBOOT_TIMEOUT_DURATION },
},
});
tracer.interrupt({});
(0, vitest_1.expect)(reportWarningFn).toHaveBeenCalledWith(vitest_1.expect.objectContaining({
message: vitest_1.expect.stringContaining('No currently active trace when canceling a draft'),
}));
});
});
//# sourceMappingURL=TraceManagerWithDraft.test.js.map