From 36adbc86f5e84ac3e8f7d6e9fc8d620d0052c7b0 Mon Sep 17 00:00:00 2001 From: Peter Barnett Date: Tue, 17 Sep 2024 17:26:42 -0400 Subject: [PATCH 1/3] chore: add Heap analytics --- src/App.tsx | 16 ++++++-- src/utils/{vwo.ts => analyticsTools.ts} | 53 +++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 3 deletions(-) rename src/utils/{vwo.ts => analyticsTools.ts} (70%) diff --git a/src/App.tsx b/src/App.tsx index 12870e1e25..c3b634c780 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -38,7 +38,7 @@ import {AppState} from 'src/types' // Utils import {isFlagEnabled} from 'src/shared/utils/featureFlag' import {CLOUD} from 'src/shared/constants' -import {executeVWO} from 'src/utils/vwo' +import {executeVWO, executeHeap} from 'src/utils/analyticsTools' // Providers import {UserAccountProvider} from 'src/accounts/context/userAccount' @@ -57,14 +57,14 @@ const App: FC = () => { if (CLOUD && isFlagEnabled('rudderstackReporting')) { try { load(RUDDERSTACK_WRITE_KEY, RUDDERSTACK_DATA_PLANE_URL) - } catch (error) { + } catch (err) { console.error( 'Error loading Rudderstack with wk: ', RUDDERSTACK_WRITE_KEY, ' at: ', RUDDERSTACK_DATA_PLANE_URL ) - reportErrorThroughHoneyBadger(error, { + reportErrorThroughHoneyBadger(err, { name: 'Rudderstack Loading Function', }) } @@ -104,6 +104,16 @@ const App: FC = () => { } } + if (CLOUD && isFlagEnabled('heapAnalytics')) { + try { + executeHeap() + } catch (err) { + reportErrorThroughHoneyBadger(err, { + name: 'Unable to load Heap Analytics', + }) + } + } + setAutoFreeze(false) }, []) diff --git a/src/utils/vwo.ts b/src/utils/analyticsTools.ts similarity index 70% rename from src/utils/vwo.ts rename to src/utils/analyticsTools.ts index 6862953df0..9630b23c8e 100644 --- a/src/utils/vwo.ts +++ b/src/utils/analyticsTools.ts @@ -116,3 +116,56 @@ export const executeVWO = () => { return code })() } + +export const executeHeap = () => { + ;(window.heapReadyCb = window.heapReadyCb || []), + (window.heap = window.heap || []), + (heap.load = function (e, t) { + ;(window.heap.envId = e), + (window.heap.clientConfig = t = t || {}), + (window.heap.clientConfig.shouldFetchServerConfig = !1) + var a = document.createElement('script') + ;(a.type = 'text/javascript'), + (a.async = !0), + (a.src = 'https://cdn.us.heap-api.com/config/' + e + '/heap_config.js') + var r = document.getElementsByTagName('script')[0] + r.parentNode.insertBefore(a, r) + var n = [ + 'init', + 'startTracking', + 'stopTracking', + 'track', + 'resetIdentity', + 'identify', + 'getSessionId', + 'getUserId', + 'getIdentity', + 'addUserProperties', + 'addEventProperties', + 'removeEventProperty', + 'clearEventProperties', + 'addAccountProperties', + 'addAdapter', + 'addTransformer', + 'addTransformerFn', + 'onReady', + 'addPageviewProperties', + 'removePageviewProperty', + 'clearPageviewProperties', + 'trackPageview', + ], + i = function (e) { + return function () { + var t = Array.prototype.slice.call(arguments, 0) + window.heapReadyCb.push({ + name: e, + fn: function () { + heap[e] && heap[e].apply(heap, t) + }, + }) + } + } + for (var p = 0; p < n.length; p++) heap[n[p]] = i(n[p]) + }) + heap.load('1919519062') +} From 839106980acb4cb3ee8c2822a01c51b0e644d231 Mon Sep 17 00:00:00 2001 From: Bill OConnell Date: Tue, 1 Oct 2024 17:26:49 -0400 Subject: [PATCH 2/3] feat: unload analytics script on fail, use id appropriate to environment --- src/App.tsx | 3 ++- src/utils/analyticsTools.ts | 44 +++++++++++++++++++++++++++++++++---- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c3b634c780..f515d0e99a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -38,7 +38,7 @@ import {AppState} from 'src/types' // Utils import {isFlagEnabled} from 'src/shared/utils/featureFlag' import {CLOUD} from 'src/shared/constants' -import {executeVWO, executeHeap} from 'src/utils/analyticsTools' +import {executeVWO, executeHeap, unloadHeap} from 'src/utils/analyticsTools' // Providers import {UserAccountProvider} from 'src/accounts/context/userAccount' @@ -108,6 +108,7 @@ const App: FC = () => { try { executeHeap() } catch (err) { + unloadHeap() reportErrorThroughHoneyBadger(err, { name: 'Unable to load Heap Analytics', }) diff --git a/src/utils/analyticsTools.ts b/src/utils/analyticsTools.ts index 9630b23c8e..2c6054c287 100644 --- a/src/utils/analyticsTools.ts +++ b/src/utils/analyticsTools.ts @@ -1,8 +1,14 @@ -// this code is related to implementing the A/B testing tool VMO: https://vwo.com/ -// Whenever this script is updated, ensure that any changes are reflected in the -// error handling in App.tsx, especially for any elements that change opacity of the page. /* eslint-disable */ // @ts-nocheck + +import {getFlagValue} from 'src/shared/utils/featureFlag' + +/* This file is exclusively for third-party analytics tools used by the Cloud2 UI. */ + +/* This code implements the A/B testing tool VWO: https://vwo.com/ + The copy is largely copy-pasted from VWO instructions and is not maintained by InfluxData. + Whenever this script is updated, ensure that any changes are reflected in the + error handling in App.tsx, especially for any elements that change opacity of the page. */ export const executeVWO = () => { window._vwo_code = window._vwo_code || @@ -117,7 +123,23 @@ export const executeVWO = () => { })() } +const HEAP_API_SCRIPT_SRC = 'heap-api.com' + +/* + The JS code in this function is copied from the installation instructions + at https://developers.heap.io/docs/web and is not maintained by InfluxData. + + Semicolons have been added to avoid ASI issues because this script uses IIFEs. + // Example: https://circleci.com/blog/ci-cd-for-js-iifes/ +*/ export const executeHeap = () => { + // Retrieve the heap analytics id appropriate to the environment from ConfigCat. + const heapId = getFlagValue('heapAnalyticsId') + if (!heapId) { + return + } + + // This block is imported from Heap. ;(window.heapReadyCb = window.heapReadyCb || []), (window.heap = window.heap || []), (heap.load = function (e, t) { @@ -167,5 +189,19 @@ export const executeHeap = () => { } for (var p = 0; p < n.length; p++) heap[n[p]] = i(n[p]) }) - heap.load('1919519062') + + heap.load(heapId.toString()) +} + +// This unloads all artifacts from the Heap script if an error is encountered. +export const unloadHeap = () => { + delete window.heap + delete window.heapReadyCb + + const scripts = document.getElementsByTagName('script') + for (let s of scripts) { + if (s.src.includes(HEAP_API_SCRIPT_SRC)) { + s.remove() + } + } } From 98d6da2668c4ad73429f8877283c95ffa4564fde Mon Sep 17 00:00:00 2001 From: Bill OConnell Date: Tue, 22 Oct 2024 12:40:13 -0400 Subject: [PATCH 3/3] fix: correct capitalization of heapanalyticsid --- src/utils/analyticsTools.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/analyticsTools.ts b/src/utils/analyticsTools.ts index 2c6054c287..57b5567976 100644 --- a/src/utils/analyticsTools.ts +++ b/src/utils/analyticsTools.ts @@ -134,7 +134,7 @@ const HEAP_API_SCRIPT_SRC = 'heap-api.com' */ export const executeHeap = () => { // Retrieve the heap analytics id appropriate to the environment from ConfigCat. - const heapId = getFlagValue('heapAnalyticsId') + const heapId = getFlagValue('heapanalyticsid') if (!heapId) { return }