From cdb63031d896daecd73c0c89e000f78cb6933d5d Mon Sep 17 00:00:00 2001 From: Nawaz Dhandala Date: Wed, 1 Apr 2026 14:34:05 +0100 Subject: [PATCH] feat: add custom metrics capturing functionality in custom code and synthetic monitors --- .../Components/Form/Monitor/MonitorStep.tsx | 15 ++++++- .../Content/monitor/custom-code-monitor.md | 41 +++++++++++++++++- .../Docs/Content/monitor/synthetic-monitor.md | 43 +++++++++++++++++++ 3 files changed, 97 insertions(+), 2 deletions(-) diff --git a/App/FeatureSet/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx b/App/FeatureSet/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx index 50a4f48734..24a3b7d534 100644 --- a/App/FeatureSet/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx @@ -257,7 +257,14 @@ const MonitorStepElement: FunctionComponent = ( if (props.monitorType === MonitorType.CustomJavaScriptCode) { codeEditorPlaceholder = ` // You can use axios, http modules here. -await axios.get('https://example.com'); +const response = await axios.get('https://example.com'); + +// To capture custom metrics, use oneuptime.captureMetric(name, value, attributes) +// These metrics can be charted on dashboards via the Metric Explorer. +oneuptime.captureMetric('api.response.time', response.data.latency); +oneuptime.captureMetric('api.queue.depth', response.data.queueDepth, { + region: 'us-east-1' +}); // when you want to return a value, use return statement with data as a prop. @@ -275,6 +282,7 @@ return { // - page: Playwright Page object to interact with the browser // - browserType: Browser type in the current run context - Chromium, Firefox, Webkit // - screenSizeType: Screen size type in the current run context - Mobile, Tablet, Desktop +// - oneuptime.captureMetric: Capture custom metrics for dashboards await page.goto('https://playwright.dev/'); @@ -286,6 +294,11 @@ const screenshots = {}; screenshots['screenshot-name'] = await page.screenshot(); // you can save multiple screenshots and have them with different names. +// To capture custom metrics, use oneuptime.captureMetric(name, value, attributes) +// These metrics can be charted on dashboards via the Metric Explorer. +const startTime = Date.now(); +await page.waitForSelector('h1'); +oneuptime.captureMetric('page.load.time', Date.now() - startTime); // To log data, use console.log console.log('Hello World'); diff --git a/App/FeatureSet/Docs/Content/monitor/custom-code-monitor.md b/App/FeatureSet/Docs/Content/monitor/custom-code-monitor.md index 2198bf23af..a15b530950 100644 --- a/App/FeatureSet/Docs/Content/monitor/custom-code-monitor.md +++ b/App/FeatureSet/Docs/Content/monitor/custom-code-monitor.md @@ -4,7 +4,7 @@ Custom Code Monitor allows you to write custom scripts to monitor your applicati #### Example -The following example shows how to use a Synthetic Monitor: +The following example shows how to use a Custom Code Monitor: ```javascript // You can use axios module. @@ -50,10 +50,49 @@ console.log(stringSecret); ``` +### Custom Metrics + +You can capture custom metrics from your script using the `oneuptime.captureMetric()` function. These metrics are stored in OneUptime and can be charted on dashboards using the Metric Explorer. + +```javascript +oneuptime.captureMetric(name, value, attributes); +``` + +- `name` (string, required): The metric name (e.g. `"api.response.time"`). It will be stored with a `custom.monitor.` prefix automatically. +- `value` (number, required): The numeric metric value. +- `attributes` (object, optional): Key-value pairs for additional context. + +#### Example + +```javascript +const response = await axios.get('https://api.example.com/health'); + +// Capture a simple metric +oneuptime.captureMetric('api.response.time', response.data.latency); + +// Capture a metric with attributes +oneuptime.captureMetric('api.queue.depth', response.data.queueDepth, { + region: 'us-east-1', + environment: 'production' +}); + +return { + data: response.data +}; +``` + +Once captured, these metrics appear in the Metric Explorer under names like `custom.monitor.api.response.time`. You can add them to dashboard charts, set up alerts, and filter by monitor, probe, or any custom attributes you provided. + +**Limits:** +- Maximum 100 metrics per script execution. +- Metric names are limited to 200 characters. +- Values must be numeric. + ### Modules available in the script - `axios`: You can use this module to make HTTP requests. It is a promise-based HTTP client for the browser and Node.js. - `crypto`: You can use this module to perform cryptographic operations. It is a built-in Node.js module that provides cryptographic functionality that includes a set of wrappers for OpenSSL's hash, HMAC, cipher, decipher, sign, and verify functions. - `console.log`: You can use this module to log data to the console. This is useful for debugging purposes. +- `oneuptime.captureMetric`: You can use this to capture custom metrics from your script. See the Custom Metrics section above. - `http`: You can use this module to make HTTP requests. It is a built-in Node.js module that provides an HTTP client and server. - `https`: You can use this module to make HTTPS requests. It is a built-in Node.js module that provides an HTTPS client and server. diff --git a/App/FeatureSet/Docs/Content/monitor/synthetic-monitor.md b/App/FeatureSet/Docs/Content/monitor/synthetic-monitor.md index 0704e977df..864eb0c2c1 100644 --- a/App/FeatureSet/Docs/Content/monitor/synthetic-monitor.md +++ b/App/FeatureSet/Docs/Content/monitor/synthetic-monitor.md @@ -103,11 +103,54 @@ let booleanSecret = {{monitorSecrets.BooleanSecret}}; console.log(stringSecret); ``` +### Custom Metrics + +You can capture custom metrics from your script using the `oneuptime.captureMetric()` function. These metrics are stored in OneUptime and can be charted on dashboards using the Metric Explorer. + +```javascript +oneuptime.captureMetric(name, value, attributes); +``` + +- `name` (string, required): The metric name (e.g. `"dashboard.load.time"`). It will be stored with a `custom.monitor.` prefix automatically. +- `value` (number, required): The numeric metric value. +- `attributes` (object, optional): Key-value pairs for additional context. + +#### Example + +```javascript +await page.goto('https://app.example.com'); + +const startTime = Date.now(); +await page.waitForSelector('#dashboard-loaded'); +const loadTime = Date.now() - startTime; + +// Capture page load time as a custom metric +oneuptime.captureMetric('dashboard.load.time', loadTime, { + page: 'dashboard' +}); + +const screenshots = {}; +screenshots['dashboard'] = await page.screenshot(); + +return { + data: { loadTime }, + screenshots: screenshots +}; +``` + +Once captured, these metrics appear in the Metric Explorer under names like `custom.monitor.dashboard.load.time`. You can add them to dashboard charts, set up alerts, and filter by monitor, probe, browser type, screen size, or any custom attributes you provided. + +**Limits:** +- Maximum 100 metrics per script execution. +- Metric names are limited to 200 characters. +- Values must be numeric. + ### Modules available in the script - `page`: You can use this module to interact with the browser. It is a Playwright Page object that allows you to perform actions like clicking buttons, filling forms, and taking screenshots. You can access the browser context via `page.context()` if needed (for example, to create a new page or deal with popups). - `axios`: You can use this module to make HTTP requests. It is a promise-based HTTP client for the browser and Node.js. - `crypto`: You can use this module to perform cryptographic operations. It is a built-in Node.js module that provides cryptographic functionality that includes a set of wrappers for OpenSSL's hash, HMAC, cipher, decipher, sign, and verify functions. - `console.log`: You can use this module to log data to the console. This is useful for debugging purposes. +- `oneuptime.captureMetric`: You can use this to capture custom metrics from your script. See the Custom Metrics section above. - `http`: You can use this module to make HTTP requests. It is a built-in Node.js module that provides an HTTP client and server. - `https`: You can use this module to make HTTPS requests. It is a built-in Node.js module that provides an HTTPS client and server.