@financial-times/custom-code-component 2.0.3 → 2.0.5

package/README.md

@@ -58,4 +58,37 @@ export default (shadowRoot, props, ...children) => {
 * `data-asset-type="custom-code-component"`
     * Part of spec.
 * <any other attributes>
-    * All remaining attributes get passed as an object named `props` to render().
+    * All remaining attributes get passed as an object named `props` to render().
+
+## client-metrics-adaptor
+
+This module is an adaptor of the [dotcom-reliability-kit client metrics package](https://github.com/Financial-Times/dotcom-reliability-kit/tree/main/packages/client-metrics-web) to help integrating RUM metrics for the Custom Code Components.
+
+### Requirements
+
+To use it, you are required to have pre-installed the client-metrics-web package.
+
+### Options
+
+- **enrichEventCb** (optional): function to enrich the event payload before is sent to AWS RUM
+- **shouldIgnoreEventCb** (optional): function that checks if the event should be sent or not to AWS RUM
+
+### Usage:
+
+Initialise the ClientMetrics Adaptor in your project to start listening to CCC Events and dispatch automatically AWS RUM events
+
+
+#### example.jsx
+
+```js
+import { MetricsClient } from '@dotcom-reliability-kit/client-metrics-web';
+import * as ClientMetricsAdaptor from '@financial-times/custom-code-component';
+
+const client = new MetricsClient({
+    // Options go here
+});
+
+ClientMetricsAdaptor.init(client, {
+  enrichEventCb: enrichCCCEventWithHomepageContext,
+  shouldIgnoreEventCb: shouldIgnoreCCCEvent,
+});

package/dist/client-metrics-adaptor.d.ts

@@ -0,0 +1,107 @@
+declare class CCCEvent extends Event {
+    component: ComponentPath;
+    source?: string;
+    static eventType: string;
+    constructor(eventType: string | undefined, detail: {
+        component: ComponentPath;
+        source?: string;
+    }, opts?: EventInit);
+}
+
+declare class ComponentPath {
+    org: string;
+    repo: string;
+    name: string;
+    versionRange: string;
+    constructor(path?: ComponentPathType | string);
+    set path(path: ComponentPathType | string);
+    get path(): string;
+    get isValid(): boolean;
+    toString(): string;
+    static fromString(p?: string | null, v?: string | null): ComponentPath;
+}
+
+declare type ComponentPathType = {
+    org: string;
+    repo: string;
+    name: string;
+    versionRange: string;
+};
+
+export declare const DEFAULT_VALUE = "uknown";
+
+export declare const EVENT_TYPES: Record<string, EventType>;
+
+declare type EventType = {
+    namespace: string;
+    payloadFn: (event: GenericCCCEvent) => Record<string, unknown>;
+};
+
+export declare type GenericCCCEvent = CCCEvent | ErrorEvent;
+
+export declare function getComponentProps(eventComponentProp: ComponentPathType): {
+    name: string;
+    org: string;
+    repo: string;
+    versionRange: string;
+};
+
+export declare function getEnrichEventProps(event: GenericCCCEvent): Record<string, unknown>;
+
+export declare function getErrorPayload(event: GenericCCCEvent): Record<string, unknown>;
+
+export declare function getPendingEventsQueue(): PendingEvent[];
+
+export declare function getSuccessPayload(event: GenericCCCEvent): Record<string, unknown>;
+
+/**
+ * Initialises the Adaptor with the provided configuration and starts listening to CCC events.
+ * If there's any pending event, it'll send them to the Metrics server
+ * @param _metricsClient MetricClient instance
+ * @param _options Options to configure adaptor
+ */
+export declare function init(_metricsClient: MetricsClient, _options?: Options): void;
+
+export declare const MAX_PENDING_EVENTS = 50;
+
+export declare type MetricsClient = {
+    recordEvent: (namespace: string, payload?: Record<string, unknown>) => void;
+};
+
+export declare function onEventReceived(_event: Event): void;
+
+declare type Options = {
+    enrichEventCb?: (event: GenericCCCEvent) => Record<string, unknown> | void;
+    shouldIgnoreEventCb?: (event: GenericCCCEvent) => boolean;
+};
+
+declare type PendingEvent = {
+    time: number;
+    event: GenericCCCEvent;
+};
+
+export declare function processEvent(event: GenericCCCEvent): void;
+
+/**
+ * Sends all pending events waiting to be processed
+ *
+ * Notes:
+ * 1. All these events will be registered in RUM with the same time
+ * (at this moment the MetricsClient API doesn't allow to override it)
+ * 2. It's safe to process them in bulk since ClientMetrics will send them in bulk
+ * (all in 1 request)
+ */
+export declare function sendPendingEvents(): void;
+
+/**
+ * Start listening to CCC events
+ * In case there's no MetricsClient registered, it'll store them until they can be sent
+ */
+export declare function startListeners(): void;
+
+/**
+ * Stop listening CCC events
+ */
+export declare function stopListeners(): void;
+
+export { }

package/dist/client-metrics-adaptor.js

@@ -0,0 +1,98 @@
+const f = Object.freeze({
+  "ccc:ready": {
+    namespace: "ccc.success",
+    payloadFn: y
+  },
+  "ccc:error": {
+    namespace: "ccc.failure",
+    payloadFn: w
+  }
+}), i = "uknown", t = [], g = 50;
+let a, n, s = !1;
+function h() {
+  s || (window.addEventListener("ccc:error", u), window.addEventListener("ccc:ready", u)), s = !0;
+}
+function b() {
+  s && (window.removeEventListener("ccc:error", u), window.removeEventListener("ccc:ready", u)), s = !1, t.length = 0, a = null, n = {};
+}
+function v(e, c) {
+  if (!e || typeof e.recordEvent != "function") {
+    console.warn("CCC Can't initialise MetricsClientAdaptor");
+    return;
+  }
+  a = e, n = {}, typeof (c == null ? void 0 : c.shouldIgnoreEventCb) == "function" && (n.shouldIgnoreEventCb = c.shouldIgnoreEventCb), typeof (c == null ? void 0 : c.enrichEventCb) == "function" && (n.enrichEventCb = c.enrichEventCb), o(), h();
+}
+function d(e) {
+  var c;
+  try {
+    const r = ((c = n == null ? void 0 : n.enrichEventCb) == null ? void 0 : c.call(n, e)) || {};
+    if (typeof r != "object" || Array.isArray(r))
+      throw new TypeError("Enrich event callback returned invalid value");
+    return r;
+  } catch (r) {
+    return console.error("CCC RUM event couldn't be enriched", r), {};
+  }
+}
+function l(e) {
+  return {
+    name: (e == null ? void 0 : e.name) || i,
+    org: (e == null ? void 0 : e.org) || i,
+    repo: (e == null ? void 0 : e.repo) || i,
+    versionRange: (e == null ? void 0 : e.versionRange) || i
+  };
+}
+function y(e) {
+  return {
+    ...d(e),
+    component: l(e.component)
+  };
+}
+function w(e) {
+  const c = e.error, r = c == null ? void 0 : c.name;
+  return {
+    ...d(e),
+    component: l(c == null ? void 0 : c.component),
+    error: r || i
+  };
+}
+function E(e) {
+  if (n.shouldIgnoreEventCb && n.shouldIgnoreEventCb(e))
+    return;
+  if (!a) {
+    console.warn("CCC Couldn't process event: ClientMetrics not initialised");
+    return;
+  }
+  const c = f[e.type];
+  if (!c) {
+    console.warn("CCC event.type not registered");
+    return;
+  }
+  a.recordEvent(c.namespace, c.payloadFn(e));
+}
+function u(e) {
+  const c = e;
+  a ? E(c) : (t.push({ event: c, time: Date.now() }), t.splice(0, t.length - g));
+}
+function o() {
+  t.forEach(({ event: e }) => E(e)), t.length = 0;
+}
+function L() {
+  return t;
+}
+export {
+  i as DEFAULT_VALUE,
+  f as EVENT_TYPES,
+  g as MAX_PENDING_EVENTS,
+  l as getComponentProps,
+  d as getEnrichEventProps,
+  w as getErrorPayload,
+  L as getPendingEventsQueue,
+  y as getSuccessPayload,
+  v as init,
+  u as onEventReceived,
+  E as processEvent,
+  o as sendPendingEvents,
+  h as startListeners,
+  b as stopListeners
+};
+//# sourceMappingURL=client-metrics-adaptor.js.map

package/dist/client-metrics-adaptor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-metrics-adaptor.js","sources":["../src/client-metrics-adaptor.ts"],"sourcesContent":["// MetricsClient type from https://github.com/Financial-Times/dotcom-reliability-kit/tree/main/packages/client-metrics-web\n// We intentionally copied this type here to avoid having version conflicts between this module and it's client\nimport type { ComponentPathType } from './path'\nimport type { CCCEvent } from './events'\n\nexport type MetricsClient = {\n  recordEvent: (namespace: string, payload?: Record<string, unknown>) => void\n};\n\nexport type GenericCCCEvent = CCCEvent | ErrorEvent;\n\ntype Options = {\n  enrichEventCb?: (event: GenericCCCEvent) => Record<string, unknown> | void\n  shouldIgnoreEventCb?: (event: GenericCCCEvent) => boolean\n};\n\ntype PendingEvent = {\n  time: number\n  event: GenericCCCEvent\n};\n\ntype EventType = {\n  namespace: string\n  payloadFn: (event: GenericCCCEvent) => Record<string, unknown>\n};\n\nexport const EVENT_TYPES: Record<string, EventType> = Object.freeze({\n  'ccc:ready': {\n    namespace: 'ccc.success',\n    payloadFn: getSuccessPayload,\n  },\n  'ccc:error': {\n    namespace: 'ccc.failure',\n    payloadFn: getErrorPayload,\n  },\n});\n\nexport const DEFAULT_VALUE = 'uknown';\n\nconst pendingEvents: PendingEvent[] = [];\nexport const MAX_PENDING_EVENTS = 50;\nlet metricsClient: MetricsClient | null;\nlet options: Options;\nlet isRunning = false;\n\n/**\n * Start listening to CCC events\n * In case there's no MetricsClient registered, it'll store them until they can be sent\n */\nexport function startListeners() {\n  if (!isRunning) {\n    window.addEventListener('ccc:error', onEventReceived);\n    window.addEventListener('ccc:ready', onEventReceived);\n  }\n  isRunning = true;\n}\n\n/**\n * Stop listening CCC events\n */\nexport function stopListeners() {\n  if (isRunning) {\n    window.removeEventListener('ccc:error', onEventReceived);\n    window.removeEventListener('ccc:ready', onEventReceived);\n  }\n\n  isRunning = false;\n  pendingEvents.length = 0;\n  metricsClient = null;\n  options = {};\n}\n\n/**\n * Initialises the Adaptor with the provided configuration and starts listening to CCC events.\n * If there's any pending event, it'll send them to the Metrics server\n * @param _metricsClient MetricClient instance\n * @param _options Options to configure adaptor\n */\nexport function init(_metricsClient: MetricsClient, _options?: Options) {\n  if (!_metricsClient || typeof _metricsClient.recordEvent !== 'function') {\n    console.warn(\"CCC Can't initialise MetricsClientAdaptor\");\n    return;\n  }\n\n  metricsClient = _metricsClient;\n\n  options = {};\n  if (typeof _options?.shouldIgnoreEventCb === 'function') {\n    options.shouldIgnoreEventCb = _options.shouldIgnoreEventCb;\n  }\n  if (typeof _options?.enrichEventCb === 'function') {\n    options.enrichEventCb = _options.enrichEventCb;\n  }\n\n  sendPendingEvents();\n  startListeners();\n}\n\nexport function getEnrichEventProps(event: GenericCCCEvent) {\n  try {\n    const props = options?.enrichEventCb?.(event) || {};\n    if (typeof props !== 'object' || Array.isArray(props)) {\n      throw new TypeError('Enrich event callback returned invalid value');\n    }\n    return props;\n  } catch (error) {\n    console.error(\"CCC RUM event couldn't be enriched\", error);\n    return {};\n  }\n}\n\nexport function getComponentProps(eventComponentProp: ComponentPathType) {\n  return {\n    name: eventComponentProp?.name || DEFAULT_VALUE,\n    org: eventComponentProp?.org || DEFAULT_VALUE,\n    repo: eventComponentProp?.repo || DEFAULT_VALUE,\n    versionRange: eventComponentProp?.versionRange || DEFAULT_VALUE,\n  };\n}\n\nexport function getSuccessPayload(event: GenericCCCEvent): Record<string, unknown> {\n  return {\n    ...getEnrichEventProps(event),\n    component: getComponentProps((event as CCCEvent).component),\n  };\n}\n\nexport function getErrorPayload(event: GenericCCCEvent): Record<string, unknown> {\n  const error = (event as ErrorEvent).error;\n  const errorName = error?.name;\n\n  return {\n    ...getEnrichEventProps(event),\n    component: getComponentProps(error?.component),\n    error: errorName || DEFAULT_VALUE,\n  };\n}\n\nexport function processEvent(event: GenericCCCEvent) {\n  // Stop processing the event if we should ignore it\n  if (options.shouldIgnoreEventCb && options.shouldIgnoreEventCb(event)) {\n    return;\n  }\n\n  if (!metricsClient) {\n    console.warn(\"CCC Couldn't process event: ClientMetrics not initialised\");\n    return;\n  }\n\n  const eventType = EVENT_TYPES[event.type];\n  if (!eventType) {\n    console.warn('CCC event.type not registered');\n    return;\n  }\n\n  metricsClient.recordEvent(eventType.namespace, eventType.payloadFn(event));\n}\n\nexport function onEventReceived(_event: Event) {\n  // The Event object dispatched from the CCC has extra custom props\n  const event = _event as GenericCCCEvent\n\n  if (metricsClient) {\n    processEvent(event);\n  } else {\n    pendingEvents.push({ event: event, time: Date.now() });\n    // keep only the last MAX_PENDING_EVENTS events (FIFO)\n    pendingEvents.splice(0, pendingEvents.length - MAX_PENDING_EVENTS);\n  }\n}\n\n/**\n * Sends all pending events waiting to be processed\n *\n * Notes:\n * 1. All these events will be registered in RUM with the same time\n * (at this moment the MetricsClient API doesn't allow to override it)\n * 2. It's safe to process them in bulk since ClientMetrics will send them in bulk\n * (all in 1 request)\n */\nexport function sendPendingEvents() {\n  pendingEvents.forEach(({ event }) => processEvent(event));\n  pendingEvents.length = 0;\n}\n\nexport function getPendingEventsQueue() {\n  return pendingEvents;\n}\n"],"names":["EVENT_TYPES","getSuccessPayload","getErrorPayload","DEFAULT_VALUE","pendingEvents","MAX_PENDING_EVENTS","metricsClient","options","isRunning","startListeners","onEventReceived","stopListeners","init","_metricsClient","_options","sendPendingEvents","getEnrichEventProps","event","_a","props","error","getComponentProps","eventComponentProp","errorName","processEvent","eventType","_event","getPendingEventsQueue"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "type": "module",
   "exports": {
     ".": {
@@ -11,6 +11,10 @@
       "types": "./dist/custom-element.d.ts",
       "default": "./dist/custom-element.js"
     },
+    "./client-metrics-adaptor": {
+      "types": "./dist/client-metrics-adaptor.d.ts",
+      "default": "./dist/client-metrics-adaptor.js"
+    },
     "./custom-code-component.css": "./src/custom-code-component.css"
   },
   "scripts": {

package/src/client-metrics-adaptor.ts

@@ -0,0 +1,188 @@
+// MetricsClient type from https://github.com/Financial-Times/dotcom-reliability-kit/tree/main/packages/client-metrics-web
+// We intentionally copied this type here to avoid having version conflicts between this module and it's client
+import type { ComponentPathType } from './path'
+import type { CCCEvent } from './events'
+
+export type MetricsClient = {
+  recordEvent: (namespace: string, payload?: Record<string, unknown>) => void
+};
+
+export type GenericCCCEvent = CCCEvent | ErrorEvent;
+
+type Options = {
+  enrichEventCb?: (event: GenericCCCEvent) => Record<string, unknown> | void
+  shouldIgnoreEventCb?: (event: GenericCCCEvent) => boolean
+};
+
+type PendingEvent = {
+  time: number
+  event: GenericCCCEvent
+};
+
+type EventType = {
+  namespace: string
+  payloadFn: (event: GenericCCCEvent) => Record<string, unknown>
+};
+
+export const EVENT_TYPES: Record<string, EventType> = Object.freeze({
+  'ccc:ready': {
+    namespace: 'ccc.success',
+    payloadFn: getSuccessPayload,
+  },
+  'ccc:error': {
+    namespace: 'ccc.failure',
+    payloadFn: getErrorPayload,
+  },
+});
+
+export const DEFAULT_VALUE = 'uknown';
+
+const pendingEvents: PendingEvent[] = [];
+export const MAX_PENDING_EVENTS = 50;
+let metricsClient: MetricsClient | null;
+let options: Options;
+let isRunning = false;
+
+/**
+ * Start listening to CCC events
+ * In case there's no MetricsClient registered, it'll store them until they can be sent
+ */
+export function startListeners() {
+  if (!isRunning) {
+    window.addEventListener('ccc:error', onEventReceived);
+    window.addEventListener('ccc:ready', onEventReceived);
+  }
+  isRunning = true;
+}
+
+/**
+ * Stop listening CCC events
+ */
+export function stopListeners() {
+  if (isRunning) {
+    window.removeEventListener('ccc:error', onEventReceived);
+    window.removeEventListener('ccc:ready', onEventReceived);
+  }
+
+  isRunning = false;
+  pendingEvents.length = 0;
+  metricsClient = null;
+  options = {};
+}
+
+/**
+ * Initialises the Adaptor with the provided configuration and starts listening to CCC events.
+ * If there's any pending event, it'll send them to the Metrics server
+ * @param _metricsClient MetricClient instance
+ * @param _options Options to configure adaptor
+ */
+export function init(_metricsClient: MetricsClient, _options?: Options) {
+  if (!_metricsClient || typeof _metricsClient.recordEvent !== 'function') {
+    console.warn("CCC Can't initialise MetricsClientAdaptor");
+    return;
+  }
+
+  metricsClient = _metricsClient;
+
+  options = {};
+  if (typeof _options?.shouldIgnoreEventCb === 'function') {
+    options.shouldIgnoreEventCb = _options.shouldIgnoreEventCb;
+  }
+  if (typeof _options?.enrichEventCb === 'function') {
+    options.enrichEventCb = _options.enrichEventCb;
+  }
+
+  sendPendingEvents();
+  startListeners();
+}
+
+export function getEnrichEventProps(event: GenericCCCEvent) {
+  try {
+    const props = options?.enrichEventCb?.(event) || {};
+    if (typeof props !== 'object' || Array.isArray(props)) {
+      throw new TypeError('Enrich event callback returned invalid value');
+    }
+    return props;
+  } catch (error) {
+    console.error("CCC RUM event couldn't be enriched", error);
+    return {};
+  }
+}
+
+export function getComponentProps(eventComponentProp: ComponentPathType) {
+  return {
+    name: eventComponentProp?.name || DEFAULT_VALUE,
+    org: eventComponentProp?.org || DEFAULT_VALUE,
+    repo: eventComponentProp?.repo || DEFAULT_VALUE,
+    versionRange: eventComponentProp?.versionRange || DEFAULT_VALUE,
+  };
+}
+
+export function getSuccessPayload(event: GenericCCCEvent): Record<string, unknown> {
+  return {
+    ...getEnrichEventProps(event),
+    component: getComponentProps((event as CCCEvent).component),
+  };
+}
+
+export function getErrorPayload(event: GenericCCCEvent): Record<string, unknown> {
+  const error = (event as ErrorEvent).error;
+  const errorName = error?.name;
+
+  return {
+    ...getEnrichEventProps(event),
+    component: getComponentProps(error?.component),
+    error: errorName || DEFAULT_VALUE,
+  };
+}
+
+export function processEvent(event: GenericCCCEvent) {
+  // Stop processing the event if we should ignore it
+  if (options.shouldIgnoreEventCb && options.shouldIgnoreEventCb(event)) {
+    return;
+  }
+
+  if (!metricsClient) {
+    console.warn("CCC Couldn't process event: ClientMetrics not initialised");
+    return;
+  }
+
+  const eventType = EVENT_TYPES[event.type];
+  if (!eventType) {
+    console.warn('CCC event.type not registered');
+    return;
+  }
+
+  metricsClient.recordEvent(eventType.namespace, eventType.payloadFn(event));
+}
+
+export function onEventReceived(_event: Event) {
+  // The Event object dispatched from the CCC has extra custom props
+  const event = _event as GenericCCCEvent
+
+  if (metricsClient) {
+    processEvent(event);
+  } else {
+    pendingEvents.push({ event: event, time: Date.now() });
+    // keep only the last MAX_PENDING_EVENTS events (FIFO)
+    pendingEvents.splice(0, pendingEvents.length - MAX_PENDING_EVENTS);
+  }
+}
+
+/**
+ * Sends all pending events waiting to be processed
+ *
+ * Notes:
+ * 1. All these events will be registered in RUM with the same time
+ * (at this moment the MetricsClient API doesn't allow to override it)
+ * 2. It's safe to process them in bulk since ClientMetrics will send them in bulk
+ * (all in 1 request)
+ */
+export function sendPendingEvents() {
+  pendingEvents.forEach(({ event }) => processEvent(event));
+  pendingEvents.length = 0;
+}
+
+export function getPendingEventsQueue() {
+  return pendingEvents;
+}