From 2cbd0cca1c2d5effe49b6917200b62118db2b68f Mon Sep 17 00:00:00 2001
From: Nina Ceban Ciocanu <ninaceban@users.noreply.github.com>
Date: Mon, 19 Aug 2024 20:09:16 +0300
Subject: [PATCH] Adding personalization monitors to Web SDK (#1142)

---
 bundlesize.json                               | 14 ++--
 sandbox/public/index.html                     |  8 ++
 .../Personalization/createFetchDataHandler.js | 38 ++++++++-
 .../createViewChangeHandler.js                | 13 +++-
 .../Personalization/flicker/index.js          | 77 +++++++++++--------
 .../handlers/createProcessPropositions.js     | 33 ++++++--
 .../handlers/createProcessRedirect.js         |  9 +++
 .../handlers/injectCreateProposition.js       |  3 -
 src/components/Personalization/index.js       |  7 +-
 src/core/createLogger.js                      | 13 ++++
 .../createFetchDataHandler.spec.js            |  4 +-
 .../createViewChangeHandler.spec.js           |  5 +-
 .../createProcessPropositions.spec.js         | 14 +++-
 .../handlers/createProcessRedirect.spec.js    |  5 +-
 .../Personalization/topLevel/buildAlloy.js    |  2 +
 .../Personalization/topLevel/buildMocks.js    |  6 ++
 16 files changed, 197 insertions(+), 54 deletions(-)

diff --git a/bundlesize.json b/bundlesize.json
index a77b9b509..a34a27a74 100644
--- a/bundlesize.json
+++ b/bundlesize.json
@@ -5,13 +5,13 @@
     "brotiliSize": 133
   },
   "dist/alloy.js": {
-    "uncompressedSize": 578928,
-    "gzippedSize": 88244,
-    "brotiliSize": 68739
+    "uncompressedSize": 583092,
+    "gzippedSize": 89038,
+    "brotiliSize": 69312
   },
   "dist/alloy.min.js": {
-    "uncompressedSize": 119915,
-    "gzippedSize": 39760,
-    "brotiliSize": 34596
+    "uncompressedSize": 122217,
+    "gzippedSize": 40474,
+    "brotiliSize": 35152
   }
-}
\ No newline at end of file
+}
diff --git a/sandbox/public/index.html b/sandbox/public/index.html
index 0b711f48b..bd725cbe5 100755
--- a/sandbox/public/index.html
+++ b/sandbox/public/index.html
@@ -15,6 +15,14 @@
     <script>
       window.__alloyMonitors = window.__alloyMonitors || [];
       window.__alloyMonitors.push({
+        onContentRendering(data) {
+          console.log("Alloy Content Rendering");
+          console.log("data", data.status, data);
+        },
+        onContentHiding(data) {
+          console.log("Alloy Content Hiding");
+          console.log("data", data.status);
+        },
         onInstanceCreated(data) {
           console.log("Alloy Instance Created");
           console.log(data.instanceName);
diff --git a/src/components/Personalization/createFetchDataHandler.js b/src/components/Personalization/createFetchDataHandler.js
index c4e074784..dfef58a46 100644
--- a/src/components/Personalization/createFetchDataHandler.js
+++ b/src/components/Personalization/createFetchDataHandler.js
@@ -9,11 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { groupBy } from "../../utils/index.js";
+import {groupBy, isNonEmptyArray} from "../../utils/index.js";
+import PAGE_WIDE_SCOPE from "../../constants/pageWideScope.js";
 
 const DECISIONS_HANDLE = "personalization:decisions";
 
 export default ({
+  logger,
   prehidingStyle,
   showContainers,
   hideContainers,
@@ -44,6 +46,16 @@ export default ({
 
     onResponse(({ response }) => {
       const handles = response.getPayloadsByType(DECISIONS_HANDLE);
+      if(!isNonEmptyArray(handles)){
+        logger.logOnContentRendering({
+          status: "no-offers",
+          message: "No offers were returned.",
+          logLevel: "info",
+          detail: {
+            query: personalizationDetails.createQueryDetails()
+          }
+        });
+      }
       const propositions = handles.map((handle) => createProposition(handle));
       const {
         page: pagePropositions = [],
@@ -63,6 +75,30 @@ export default ({
             [...pagePropositions, ...currentViewPropositions],
             nonRenderedPropositions,
           ));
+        if (isNonEmptyArray(pagePropositions)) {
+          logger.logOnContentRendering({
+            status: "rendering-started",
+            message: "Started rendering propositions for page-wide scope.",
+            logLevel: "info",
+            detail: {
+              scope: PAGE_WIDE_SCOPE,
+              propositions: pagePropositions.map(proposition => proposition.toJSON())
+            },
+          });
+        }
+
+        if (isNonEmptyArray(currentViewPropositions)) {
+          logger.logOnContentRendering({
+            status: "rendering-started",
+            message: `Rendering propositions started for view scope - ${personalizationDetails.getViewName()}.`,
+            logLevel: "info",
+            detail: {
+              scope: personalizationDetails.getViewName(),
+              propositions: currentViewPropositions.map(proposition => proposition.toJSON())
+            },
+          });
+        }
+
         render().then(handleNotifications);
 
         // Render could take a long time especially if one of the renders
diff --git a/src/components/Personalization/createViewChangeHandler.js b/src/components/Personalization/createViewChangeHandler.js
index 3aef2b555..10dad9e7f 100644
--- a/src/components/Personalization/createViewChangeHandler.js
+++ b/src/components/Personalization/createViewChangeHandler.js
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export default ({ processPropositions, viewCache }) => {
+export default ({ processPropositions, viewCache, logger }) => {
   return ({ personalizationDetails, onResponse }) => {
     let returnedPropositions;
     let returnedDecisions;
@@ -28,6 +28,17 @@ export default ({ processPropositions, viewCache }) => {
       if (personalizationDetails.isRenderDecisions()) {
         ({ render, returnedPropositions, returnedDecisions } =
           processPropositions(propositions));
+
+        logger.logOnContentRendering({
+          status: "rendering-started",
+          message: `Started rendering propositions for view scope - ${viewName}.`,
+          logLevel: "info",
+          detail: {
+            scope: viewName,
+            propositions: propositions.map(proposition => proposition.toJSON())
+          },
+        });
+
         return render();
       }
       ({ returnedPropositions, returnedDecisions } = processPropositions(
diff --git a/src/components/Personalization/flicker/index.js b/src/components/Personalization/flicker/index.js
index cbf283664..3caf6985e 100644
--- a/src/components/Personalization/flicker/index.js
+++ b/src/components/Personalization/flicker/index.js
@@ -56,36 +56,51 @@ export const showElements = (prehidingSelector) => {
   }
 };
 
-export const hideContainers = (prehidingStyle) => {
-  if (!prehidingStyle) {
-    return;
-  }
-
-  // If containers prehiding style has been added
-  // by customer's prehiding snippet we don't
-  // want to add the same node
-  const node = getElementById(PREHIDING_ID);
-
-  if (node) {
-    return;
-  }
-
-  const nonce = getNonce();
-  const attrs = { id: PREHIDING_ID, ...(nonce && { nonce }) };
-  const props = { textContent: prehidingStyle };
-  const styleNode = createNode(STYLE, attrs, props);
-
-  appendNode(document.head, styleNode);
-};
-
-export const showContainers = () => {
-  // If containers prehiding style exists
-  // we will remove it
-  const node = getElementById(PREHIDING_ID);
-
-  if (!node) {
-    return;
+export const createHideContainers = ( logger ) => {
+  return ( prehidingStyle ) => {
+    if (!prehidingStyle) {
+      return;
+    }
+
+    // If containers prehiding style has been added
+    // by customer's prehiding snippet we don't
+    // want to add the same node
+    const node = getElementById(PREHIDING_ID);
+
+    if (node) {
+      return;
+    }
+
+    const nonce = getNonce();
+    const attrs = { id: PREHIDING_ID, ...(nonce && { nonce }) };
+    const props = { textContent: prehidingStyle };
+    const styleNode = createNode(STYLE, attrs, props);
+
+    logger.logOnContentHiding({
+      status: "hide-containers",
+      message: "Prehiding style applied to hide containers.",
+      logLevel: "info",
+    });
+
+    appendNode(document.head, styleNode);
+  };
+}
+
+export const createShowContainers = ( logger ) => {
+  return () => {
+    // If containers prehiding style exists
+    // we will remove it
+    const node = getElementById(PREHIDING_ID);
+
+    if (!node) {
+      return;
+    }
+
+    logger.logOnContentHiding({
+      status: "show-containers",
+      message: "Prehiding style removed to show containers.",
+      logLevel: "info",
+    });
+    removeNode(node);
   }
-
-  removeNode(node);
 };
diff --git a/src/components/Personalization/handlers/createProcessPropositions.js b/src/components/Personalization/handlers/createProcessPropositions.js
index f2b757838..25435cfed 100644
--- a/src/components/Personalization/handlers/createProcessPropositions.js
+++ b/src/components/Personalization/handlers/createProcessPropositions.js
@@ -10,6 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import {groupBy} from "../../../utils/index.js";
+
 export default ({ schemaProcessors, logger }) => {
   const wrapRenderWithLogging = (render, item) => () => {
     return Promise.resolve()
@@ -21,11 +23,19 @@ export default ({ schemaProcessors, logger }) => {
         return true;
       })
       .catch((error) => {
-        if (logger.enabled) {
-          const { message, stack } = error;
-          const warning = `Failed to execute action ${item.toString()}. ${message} ${stack}`;
-          logger.warn(warning);
-        }
+        const { message, stack } = error;
+        const warning = `Failed to execute action ${item.toString()}. ${message} ${stack}`;
+        logger.logOnContentRendering({
+          status: "rendering-failed",
+          detail: {
+            propositionDetails: item.getProposition().getNotification(),
+            item: item.toJSON()
+          },
+          error,
+          message: warning,
+          logLevel: "warn",
+        });
+
         return false;
       });
   };
@@ -186,7 +196,18 @@ export default ({ schemaProcessors, logger }) => {
     });
     const render = () => {
       return Promise.all(renderers.map((renderer) => renderer())).then(
-        (metas) => metas.filter((meta) => meta),
+        (metas) => {
+          const renderedPropositions = metas.filter((meta) => meta);
+          const propsByScope = groupBy(renderedPropositions, (p) => p.scope);
+          logger.logOnContentRendering({
+            status: "rendering-succeeded",
+            detail: {...propsByScope},
+            message: `Scopes: ${propsByScope} successfully executed.`,
+            logLevel: "info",
+          });
+
+          return renderedPropositions;
+        },
       );
     };
     return { returnedPropositions, returnedDecisions, render };
diff --git a/src/components/Personalization/handlers/createProcessRedirect.js b/src/components/Personalization/handlers/createProcessRedirect.js
index 3ea48cd38..7077d47ed 100644
--- a/src/components/Personalization/handlers/createProcessRedirect.js
+++ b/src/components/Personalization/handlers/createProcessRedirect.js
@@ -23,6 +23,15 @@ export default ({ logger, executeRedirect, collect }) =>
         decisionsMeta: [item.getProposition().getNotification()],
         documentMayUnload: true,
       }).then(() => {
+        logger.logOnContentRendering({
+          status: "rendering-redirect",
+          detail: {
+            propositionDetails: item.getProposition().getNotification(),
+            redirect: content,
+          },
+          message: `Redirect action ${item.toString()} executed.`,
+          logLevel: "info",
+        });
         return executeRedirect(content);
         // Execute redirect will never resolve. If there are bottom of page events that are waiting
         // for display notifications from this request, they will never run because this promise will
diff --git a/src/components/Personalization/handlers/injectCreateProposition.js b/src/components/Personalization/handlers/injectCreateProposition.js
index 428bba45a..fdc2b85f5 100644
--- a/src/components/Personalization/handlers/injectCreateProposition.js
+++ b/src/components/Personalization/handlers/injectCreateProposition.js
@@ -62,9 +62,6 @@ export default ({ preprocess, isPageWideSurface }) => {
 
     return {
       getScope() {
-        if (!scope) {
-          return scope;
-        }
         return scope;
       },
       getScopeType() {
diff --git a/src/components/Personalization/index.js b/src/components/Personalization/index.js
index 58c14542f..c5c15a7ca 100644
--- a/src/components/Personalization/index.js
+++ b/src/components/Personalization/index.js
@@ -20,7 +20,7 @@ import {
 import createComponent from "./createComponent.js";
 import { initDomActionsModules } from "./dom-actions/index.js";
 import createCollect from "../../utils/createCollect.js";
-import { hideContainers, showContainers } from "./flicker/index.js";
+import { createHideContainers, createShowContainers } from "./flicker/index.js";
 import createFetchDataHandler from "./createFetchDataHandler.js";
 import collectClicks from "./dom-actions/clicks/collectClicks.js";
 import isAuthoringModeEnabled from "./utils/isAuthoringModeEnabled.js";
@@ -70,6 +70,9 @@ const createPersonalization = ({ config, logger, eventManager, consent }) => {
   } = config;
   const collect = createCollect({ eventManager, mergeDecisionsMeta });
 
+  const showContainers = createShowContainers(logger);
+  const hideContainers = createHideContainers(logger);
+
   const { storeInteractionMeta, getInteractionMetas } =
     createInteractionStorage();
 
@@ -133,6 +136,7 @@ const createPersonalization = ({ config, logger, eventManager, consent }) => {
     createProposition,
     notificationHandler,
     consent,
+    logger,
   });
 
   const onClickHandler = createOnClickHandler({
@@ -148,6 +152,7 @@ const createPersonalization = ({ config, logger, eventManager, consent }) => {
   const viewChangeHandler = createViewChangeHandler({
     processPropositions,
     viewCache,
+    logger,
   });
   const applyPropositions = createApplyPropositions({
     processPropositions,
diff --git a/src/core/createLogger.js b/src/core/createLogger.js
index 4e3e48086..f7d231c57 100644
--- a/src/core/createLogger.js
+++ b/src/core/createLogger.js
@@ -89,6 +89,19 @@ export default ({ getDebugEnabled, console, getMonitors, context }) => {
         data.error,
       );
     },
+    logOnContentHiding(data) {
+      notifyMonitors("onContentHiding", {
+        status: data.status,
+      });
+      log(data.logLevel, data.message);
+    },
+    logOnContentRendering(data) {
+      notifyMonitors("onContentRendering", {
+        status: data.status,
+        payload: data.detail,
+      });
+      log(data.logLevel, data.message);
+    },
     /**
      * Outputs informational message to the web console. In some
      * browsers a small "i" icon is displayed next to these items
diff --git a/test/unit/specs/components/Personalization/createFetchDataHandler.spec.js b/test/unit/specs/components/Personalization/createFetchDataHandler.spec.js
index a114e582d..594be012c 100644
--- a/test/unit/specs/components/Personalization/createFetchDataHandler.spec.js
+++ b/test/unit/specs/components/Personalization/createFetchDataHandler.spec.js
@@ -27,7 +27,7 @@ describe("Personalization::createFetchDataHandler", () => {
   let renderedPropositions;
   let notificationHandler;
   let consent;
-
+  let logger;
   let cacheUpdate;
   let personalizationDetails;
   let event;
@@ -36,6 +36,7 @@ describe("Personalization::createFetchDataHandler", () => {
   let response;
 
   beforeEach(() => {
+    logger = jasmine.createSpyObj("logger", ["logOnContentRendering"]);
     prehidingStyle = "myprehidingstyle";
     showContainers = jasmine.createSpy("showContainers");
     hideContainers = jasmine.createSpy("hideContainers");
@@ -80,6 +81,7 @@ describe("Personalization::createFetchDataHandler", () => {
       createProposition,
       notificationHandler,
       consent,
+      logger,
     });
     fetchDataHandler({
       cacheUpdate,
diff --git a/test/unit/specs/components/Personalization/createViewChangeHandler.spec.js b/test/unit/specs/components/Personalization/createViewChangeHandler.spec.js
index 3c74e6f47..b06cc1347 100644
--- a/test/unit/specs/components/Personalization/createViewChangeHandler.spec.js
+++ b/test/unit/specs/components/Personalization/createViewChangeHandler.spec.js
@@ -21,10 +21,11 @@ describe("Personalization::createViewChangeHandler", () => {
   let personalizationDetails;
   let event;
   let onResponse;
-
+  let logger;
   let createProposition;
 
   beforeEach(() => {
+    logger = jasmine.createSpyObj("logger", ["logOnContentRendering"]);
     processPropositions = jasmine.createSpy("processPropositions");
     viewCache = jasmine.createSpyObj("viewCache", ["getView"]);
 
@@ -43,6 +44,7 @@ describe("Personalization::createViewChangeHandler", () => {
 
   const run = async () => {
     const viewChangeHandler = createViewChangeHandler({
+      logger,
       processPropositions,
       viewCache,
     });
@@ -69,6 +71,7 @@ describe("Personalization::createViewChangeHandler", () => {
 
     const { decisionsMeta, result } = await run();
 
+    expect(logger.logOnContentRendering).toHaveBeenCalledTimes(1);
     expect(processPropositions).toHaveBeenCalledTimes(1);
     expect(decisionsMeta).toEqual("decisionMeta");
 
diff --git a/test/unit/specs/components/Personalization/handlers/createProcessPropositions.spec.js b/test/unit/specs/components/Personalization/handlers/createProcessPropositions.spec.js
index 48dd3858d..88183414b 100644
--- a/test/unit/specs/components/Personalization/handlers/createProcessPropositions.spec.js
+++ b/test/unit/specs/components/Personalization/handlers/createProcessPropositions.spec.js
@@ -49,7 +49,11 @@ describe("createProcessPropositions", () => {
     });
 
     schemaProcessors = { always, noNotification, never, noRender, redirect };
-    logger = jasmine.createSpyObj("logger", ["info", "error"]);
+    logger = jasmine.createSpyObj("logger", [
+      "info",
+      "error",
+      "logOnContentRendering",
+    ]);
     processPropositions = createProcessPropositions({
       schemaProcessors,
       logger,
@@ -67,6 +71,7 @@ describe("createProcessPropositions", () => {
       returnedPropositions: [],
       returnedDecisions: [],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([]);
   });
 
@@ -91,6 +96,7 @@ describe("createProcessPropositions", () => {
       ],
       returnedDecisions: [],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     expect(render).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([
       {
@@ -123,6 +129,7 @@ describe("createProcessPropositions", () => {
       ],
       returnedDecisions: [],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     expect(render).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([]);
     expect(render).toHaveBeenCalledWith("mydata");
@@ -156,6 +163,7 @@ describe("createProcessPropositions", () => {
         },
       ],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([]);
     expect(render).not.toHaveBeenCalled();
   });
@@ -181,6 +189,7 @@ describe("createProcessPropositions", () => {
       ],
       returnedDecisions: [],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([
       {
         id: "noRender1",
@@ -212,6 +221,7 @@ describe("createProcessPropositions", () => {
       ],
       returnedDecisions: [],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     expect(render).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([]);
     expect(render).toHaveBeenCalledWith("mydata");
@@ -278,6 +288,7 @@ describe("createProcessPropositions", () => {
         },
       ],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     expect(render).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([]);
     expect(render).toHaveBeenCalledWith("mydata2");
@@ -311,6 +322,7 @@ describe("createProcessPropositions", () => {
         },
       ],
     });
+    await expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     await expectAsync(result.render()).toBeResolvedTo([]);
     expect(render).not.toHaveBeenCalled();
   });
diff --git a/test/unit/specs/components/Personalization/handlers/createProcessRedirect.spec.js b/test/unit/specs/components/Personalization/handlers/createProcessRedirect.spec.js
index 227f0bc0c..31436d704 100644
--- a/test/unit/specs/components/Personalization/handlers/createProcessRedirect.spec.js
+++ b/test/unit/specs/components/Personalization/handlers/createProcessRedirect.spec.js
@@ -26,7 +26,7 @@ describe("createProcessRedirect", () => {
   let processRedirect;
 
   beforeEach(() => {
-    logger = jasmine.createSpyObj("logger", ["warn"]);
+    logger = jasmine.createSpyObj("logger", ["warn", "logOnContentRendering"]);
     executeRedirect = jasmine.createSpy("executeRedirect");
     collectDefer = defer();
     collect = jasmine
@@ -65,6 +65,7 @@ describe("createProcessRedirect", () => {
   it("returns an empty object if the item has no content", () => {
     data = { a: 1 };
     expect(processRedirect(item)).toEqual({});
+    expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     expect(logger.warn).toHaveBeenCalledWith("Invalid Redirect data", { a: 1 });
   });
 
@@ -88,6 +89,7 @@ describe("createProcessRedirect", () => {
     expect(executeRedirect).not.toHaveBeenCalled();
     collectDefer.resolve();
     await flushPromiseChains();
+    expect(logger.logOnContentRendering).toHaveBeenCalledTimes(1);
     expect(executeRedirect).toHaveBeenCalledWith("mycontent");
     expect(await renderPromise).toBeUndefined();
   });
@@ -98,6 +100,7 @@ describe("createProcessRedirect", () => {
     const result = processRedirect(item);
     const renderPromise = result.render();
     collectDefer.reject("myerror");
+    expect(logger.logOnContentRendering).not.toHaveBeenCalled();
     await expectAsync(renderPromise).toBeRejectedWith("myerror");
   });
 });
diff --git a/test/unit/specs/components/Personalization/topLevel/buildAlloy.js b/test/unit/specs/components/Personalization/topLevel/buildAlloy.js
index 59b65a9b5..81a8554b0 100644
--- a/test/unit/specs/components/Personalization/topLevel/buildAlloy.js
+++ b/test/unit/specs/components/Personalization/topLevel/buildAlloy.js
@@ -158,6 +158,7 @@ const buildComponent = ({
   consent.current.and.returnValue({ state: "in", wasSet: false });
 
   const fetchDataHandler = createFetchDataHandler({
+    logger,
     prehidingStyle,
     showContainers,
     hideContainers,
@@ -177,6 +178,7 @@ const buildComponent = ({
   });
 
   const viewChangeHandler = createViewChangeHandler({
+    logger,
     processPropositions,
     viewCache,
   });
diff --git a/test/unit/specs/components/Personalization/topLevel/buildMocks.js b/test/unit/specs/components/Personalization/topLevel/buildMocks.js
index 6d11d3143..0101e85ce 100644
--- a/test/unit/specs/components/Personalization/topLevel/buildMocks.js
+++ b/test/unit/specs/components/Personalization/topLevel/buildMocks.js
@@ -57,6 +57,12 @@ export default (decisions) => {
   const logger = {
     warn: spyOn(console, "warn").and.callThrough(),
     error: spyOn(console, "error").and.callThrough(),
+    logOnContentRendering: jasmine
+      .createSpy("logOnContentRendering")
+      .and.callThrough(),
+    logOnContentHiding: jasmine
+      .createSpy("logOnContentHiding")
+      .and.callThrough(),
   };
   const sendEvent = jasmine.createSpy("sendEvent");
   const eventManager = {