@capillarytech/creatives-library 8.0.168 → 8.0.170-beta.1

package/app.js

@@ -26,6 +26,10 @@ import './styles/main.scss';
 import pathConfig from './config/path';
 import ignoredErrorMessages from './utils/ignoredErrorMessages';
 import App from './containers/App';
+import { setupNewrelicWebVitals } from './utils/commonUtils';
+
+// Setup New Relic WebVitals tracking
+setupNewrelicWebVitals();
 
 // const browserHistory = useRouterHistory(createHistory)({
 //   basename: pathConfig.publicPath,

package/containers/App/constants.js

@@ -1,3 +1,5 @@
+export const HOSTNAME_PATTERN = /^(?:([^.]+)\.)?(?:([^.]+)\.)?intouch\.capillarytech\.com$/;
+
 export const GET_SIDEBAR_REQUEST = 'app/App/GET_SIDEBAR_REQUEST';
 export const GET_SIDEBAR_SUCCESS = 'app/App/GET_SIDEBAR_SUCCESS';
 export const GET_SIDEBAR_FAILURE = 'app/App/GET_SIDEBAR_FAILURE';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.168",
+  "version": "8.0.170-beta.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -18,6 +18,7 @@
     "@bugsnag/plugin-react": "7.2.1",
     "@capillarytech/cap-ui-utils": "3.0.4",
     "@capillarytech/vulcan-react-sdk": "^2.3.5",
+    "@newrelic/browser-agent": "^1.293.0",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "^2.4.2",

package/utils/commonUtils.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
 import { convert } from "html-to-text";
+import { BrowserAgent } from '@newrelic/browser-agent';
 import { EMBEDDED } from "../v2Containers/Whatsapp/constants";
 import {
   EDIT,
@@ -18,6 +19,8 @@ import {
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
 import { checkSupport, extractNames } from "./tagValidations";
 import { SMS_TRAI_VAR } from '../v2Containers/SmsTrai/Edit/constants';
+import appConfig from '../../app-config';
+import { HOSTNAME_PATTERN } from '../containers/App/constants';
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
 );
@@ -429,3 +432,50 @@ export const validateInAppContent = async (formData, options) => {
   // Errors already reported via the 'onError' callback passed to _validatePlatformSpecificContent
   return false;
 };
+
+// New Relic WebVitals tracking setup
+const {
+  newrelic: { enabled = false, environments = {}, licenseKey },
+} = appConfig;
+
+const getNewrelicAppId = () => {
+  const hostname = window.location.hostname;
+  const match = hostname.match(HOSTNAME_PATTERN);
+  const environment = match?.[2] ?? match?.[1] ?? 'nightly';
+  return environments[environment]?.appId;
+};
+
+export const setupNewrelicWebVitals = () => {
+  if (process.env.NODE_ENV === 'production' && enabled) {
+    const options = {
+      info: {
+        applicationID: getNewrelicAppId(),
+        licenseKey: licenseKey,
+      },
+      init: {
+        ajax: { enabled: true },
+        distributed_tracing: {
+          enabled: true,
+          exclude_newrelic_header: true,
+        },
+        generic_events: { enabled: true },
+        jserrors: { enabled: true },
+        logging: { enabled: false },
+        metrics: { enabled: true },
+        page_action: { enabled: true },
+        page_view_timing: { enabled: true },
+        performance: {
+          capture_detail: true,
+        },
+        privacy: { cookies_enabled: true },
+        session_replay: { enabled: false },
+        session_trace: { enabled: true },
+        soft_navigations: { enabled: true },
+        spa: { enabled: true },
+        user_actions: { enabled: true },
+      },
+    };
+    // The agent loader code executes immediately on instantiation.
+    new BrowserAgent(options);
+  }
+};

package/utils/test-utils.js

@@ -7,10 +7,14 @@ import history from './history';
 import { Provider } from 'react-redux';
 import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
 import { initialReducer } from '../initialReducer';
-import initialState from '../initialState';
 
 function Wrapper({ children }) {
-  return <IntlProvider locale="en">{children}</IntlProvider>;
+  const store = configureStore({}, initialReducer, history);
+  return (
+    <Provider store={store}>
+      <IntlProvider locale="en">{children}</IntlProvider>
+    </Provider>
+  );
 }
 Wrapper.propTypes = {
   children: PropTypes.array,

package/utils/tests/newrelic.test.js

@@ -0,0 +1,546 @@
+const { mockBrowserAgent } = require('../../../__mocks__/newRelicMock');
+import { setupNewrelicWebVitals } from '../commonUtils';
+
+describe('commonUtils - New Relic Integration', () => {
+  beforeEach(() => {
+    process.env.NODE_ENV = 'production';
+    mockBrowserAgent.reset();
+    delete window.location;
+  });
+
+  afterAll(() => {
+    process.env.NODE_ENV = 'test';
+  });
+
+  describe('setupNewrelicWebVitals', () => {
+    it('should initialize BrowserAgent with correct options - localhost', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'localhost' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718411553',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - nightly', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'nightly.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718411553',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - staging', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'staging.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413027',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - ushc', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'ushc.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413124',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - apac', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'apac.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413134',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - north-america', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'north-america.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413144',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - apac2', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'apac2.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413155',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - tata', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'tata.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413165',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - sea', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'sea.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413175',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should initialize BrowserAgent with correct options - eu', () => {
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'eu.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).toHaveBeenCalledTimes(1);
+
+      const expectedOptions = {
+        info: {
+          applicationID: '718413185',
+          licenseKey: '082da40fff',
+        },
+        init: {
+          ajax: { enabled: true },
+          distributed_tracing: {
+            enabled: true,
+            exclude_newrelic_header: true,
+          },
+          generic_events: { enabled: true },
+          jserrors: { enabled: true },
+          logging: { enabled: false },
+          metrics: { enabled: true },
+          page_action: { enabled: true },
+          page_view_timing: { enabled: true },
+          performance: {
+            capture_detail: true,
+          },
+          privacy: { cookies_enabled: true },
+          session_replay: { enabled: false },
+          session_trace: { enabled: true },
+          soft_navigations: { enabled: true },
+          spa: { enabled: true },
+          user_actions: { enabled: true },
+        },
+      };
+
+      expect(mockBrowserAgent).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('should not initialize BrowserAgent in development environment', () => {
+      process.env.NODE_ENV = 'development';
+      
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'nightly.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+      
+      setupNewrelicWebVitals();
+
+      expect(mockBrowserAgent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('setupNewrelicWebVitals with disabled config', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      jest.doMock('../../../app-config', () => ({
+        newrelic: {
+          enabled: false,
+          licenseKey: '082da40fff',
+          environments: {
+            nightly: {
+              appId: '718411553',
+            },
+          },
+        },
+      }));
+    });
+
+    afterEach(() => {
+      jest.resetModules();
+    });
+
+    it('should not initialize BrowserAgent when New Relic is disabled in production', () => {
+      process.env.NODE_ENV = 'production';
+      
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'nightly.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+
+      const { setupNewrelicWebVitals: setupWithDisabledConfig } = require('../commonUtils');
+      setupWithDisabledConfig();
+
+      expect(mockBrowserAgent).not.toHaveBeenCalled();
+    });
+
+    it('should not initialize BrowserAgent when New Relic is disabled in development', () => {
+      process.env.NODE_ENV = 'development';
+      
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'nightly.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+
+      const { setupNewrelicWebVitals: setupWithDisabledConfig } = require('../commonUtils');
+      setupWithDisabledConfig();
+
+      expect(mockBrowserAgent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('setupNewrelicWebVitals with default config values', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      jest.doMock('../../../app-config', () => ({
+        newrelic: {
+          licenseKey: '082da40fff',
+        },
+      }));
+    });
+
+    afterEach(() => {
+      jest.resetModules();
+    });
+
+    it('should not initialize BrowserAgent when enabled is missing (defaults to false)', () => {
+      process.env.NODE_ENV = 'production';
+      
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'nightly.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+
+      const { setupNewrelicWebVitals: setupWithDefaults } = require('../commonUtils');
+      setupWithDefaults();
+
+      expect(mockBrowserAgent).not.toHaveBeenCalled();
+    });
+
+    it('should handle missing environments object (defaults to empty object)', () => {
+      process.env.NODE_ENV = 'production';
+      
+      Object.defineProperty(window, 'location', {
+        value: { hostname: 'nightly.intouch.capillarytech.com' },
+        writable: true,
+        configurable: true,
+      });
+
+      const { setupNewrelicWebVitals: setupWithDefaults } = require('../commonUtils');
+      
+      expect(() => setupWithDefaults()).not.toThrow();
+      expect(mockBrowserAgent).not.toHaveBeenCalled();
+    });
+  });
+});