feat: add custom metrics capturing functionality in custom code and synthetic monitors

App/FeatureSet/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx

@@ -257,7 +257,14 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
   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');

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.
 

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.