From 0541167cc541b08e905a107e5540483c36e6ee43 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Fri, 20 Aug 2021 14:38:33 -0700 Subject: [PATCH] Addition of Open Replay Tracker --- client/package.json | 4 ++ client/src/App/App.container.jsx | 20 ++++++++ client/src/redux/store.js | 2 +- client/src/redux/user/user.sagas.js | 4 ++ client/yarn.lock | 78 ++++++++++++++++++++++++++++- 5 files changed, 106 insertions(+), 2 deletions(-) diff --git a/client/package.json b/client/package.json index 566061ad2..0d29b64f0 100644 --- a/client/package.json +++ b/client/package.json @@ -8,6 +8,10 @@ "@craco/craco": "^6.2.0", "@fingerprintjs/fingerprintjs": "^3.2.0", "@lourenci/react-kanban": "^2.1.0", + "@openreplay/tracker": "^3.2.1", + "@openreplay/tracker-assist": "^3.0.3", + "@openreplay/tracker-graphql": "^3.0.0", + "@openreplay/tracker-redux": "^3.0.0", "@sentry/react": "^6.10.0", "@sentry/tracing": "^6.10.0", "@stripe/react-stripe-js": "^1.4.0", diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index e960e2143..653f11941 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -8,8 +8,28 @@ import { useTranslation } from "react-i18next"; import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component"; import client from "../utils/GraphQLClient"; import App from "./App"; +import trackerGraphQL from "@openreplay/tracker-graphql"; +//import trackerRedux from "@openreplay/tracker-redux"; +import Tracker from "@openreplay/tracker"; +import trackerAssist from "@openreplay/tracker-assist"; moment.locale("en-US"); +export const tracker = new Tracker({ + projectKey: "FPjeYIbwJyvhrVVTTLHo", + ingestPoint: "https://replay.bodyshop.app/ingest", + // ...(process.env.NODE_ENV === null || process.env.NODE_ENV === "development" + // ? { __DISABLE_SECURE_MODE: true } + // : {}), + // beaconSize: 10485760, + onStart: ({ sessionID }) => + console.log( + "******** OpenReplay tracker started with session: ", + sessionID + ), +}); +tracker.use(trackerAssist({ confirmText: "Confimr hep" })); // check the list of available options below +export const recordGraphQL = tracker.use(trackerGraphQL()); +tracker.start(); if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp"); export default function AppContainer() { diff --git a/client/src/redux/store.js b/client/src/redux/store.js index c60519c05..e5aa4d5ed 100644 --- a/client/src/redux/store.js +++ b/client/src/redux/store.js @@ -27,7 +27,7 @@ const middlewares = [ if (process.env.NODE_ENV === "development") { middlewares.push(createLogger({ collapsed: true, diff: true })); } - +//middlewares.push(Tracker.use(trackerRedux())); const composeEnhancers = typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ diff --git a/client/src/redux/user/user.sagas.js b/client/src/redux/user/user.sagas.js index 598be0e24..4a53b3f9d 100644 --- a/client/src/redux/user/user.sagas.js +++ b/client/src/redux/user/user.sagas.js @@ -29,6 +29,7 @@ import { } from "./user.actions"; import UserActionTypes from "./user.types"; import * as Sentry from "@sentry/browser"; +import { tracker } from "../../App/App.container"; export function* onEmailSignInStart() { yield takeLatest(UserActionTypes.EMAIL_SIGN_IN_START, signInWithEmail); @@ -68,6 +69,7 @@ export function* isUserAuthenticated() { } LogRocket.identify(user.email); + tracker.setUserID(user.email); yield put( signInSuccess({ uid: user.uid, @@ -169,6 +171,8 @@ export function* onSignInSuccess() { export function* signInSuccessSaga({ payload }) { LogRocket.identify(payload.email); + tracker.setUserID(payload.email); + try { // window.$crisp.push(["set", "user:email", [payload.email]]); console.log("$crisp set nickname", [payload.displayName || payload.email]); diff --git a/client/yarn.lock b/client/yarn.lock index 3dc52f699..3bb88df30 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1839,6 +1839,11 @@ dependencies: react-beautiful-dnd "^13.0.0" +"@medv/finder@^2.0.0": + version "2.0.0" + resolved "https://registry.npmjs.org/@medv/finder/-/finder-2.0.0.tgz" + integrity sha512-gV4jOsGpiWNDGd8Dw7tod1Fc9Gc7StaOT4oZ/6srHRWtsHU+HYWzmkYsa3Qy/z0e9tY1WpJ9wWdBFGskfbzoug== + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz" @@ -1868,6 +1873,32 @@ mkdirp "^1.0.4" rimraf "^3.0.2" +"@openreplay/tracker-assist@^3.0.3": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@openreplay/tracker-assist/-/tracker-assist-3.0.3.tgz#61db01e155608bb856c3b3ac4b08ed6adf0d0b53" + integrity sha512-uWxh0MI4ekWb/214CB4LgtXcJRHIg8uKokbkWvB1hTtIduPgqkPPpi6GeuMqyzbg3swdRaT0S47TvqmAAMW9yA== + dependencies: + npm-dragndrop "^1.2.0" + peerjs "^1.3.2" + +"@openreplay/tracker-graphql@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@openreplay/tracker-graphql/-/tracker-graphql-3.0.0.tgz#0941fd01d49c6de75a49357fbfd2251bbfdcd071" + integrity sha512-5FIKHVFLjzbLsgJxEG298uF6rUAgKf80M13jimp5y2So9iEG19mIaApz0oyRDaKMKLSMWkWtQIe2SmRTC29gmw== + +"@openreplay/tracker-redux@^3.0.0": + version "3.0.0" + resolved "https://registry.npmjs.org/@openreplay/tracker-redux/-/tracker-redux-3.0.0.tgz" + integrity sha512-ctybOquoDj8QNj82pETftgXjEoAzwEoKSxIhwstJaUv5xUkBVv0rDIjMBgCSys8cB/vbRkI/QhvksDaFr9hY0g== + +"@openreplay/tracker@^3.2.1": + version "3.2.1" + resolved "https://registry.npmjs.org/@openreplay/tracker/-/tracker-3.2.1.tgz" + integrity sha512-50j0KZJ+HVsQ3ffadm725poKlpZIWbmRdkcus8EP5Srt+KsCNNLvEPiM6IL9XmcPaX8epM7o200Fz0F/jG3Oew== + dependencies: + "@medv/finder" "^2.0.0" + error-stack-parser "^2.0.6" + "@pmmmwh/react-refresh-webpack-plugin@0.4.3": version "0.4.3" resolved "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz" @@ -2426,6 +2457,11 @@ resolved "https://registry.npmjs.org/@types/node/-/node-15.12.2.tgz" integrity sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww== +"@types/node@^10.14.33": + version "10.17.60" + resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b" + integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw== + "@types/normalize-package-data@^2.4.0": version "2.4.0" resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz" @@ -5797,7 +5833,7 @@ etag@~1.8.1: resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= -eventemitter3@^3.1.0: +eventemitter3@^3.1.0, eventemitter3@^3.1.2: version "3.1.2" resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz" integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== @@ -8961,6 +8997,11 @@ normalize-url@^3.0.0: resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz" integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg== +npm-dragndrop@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/npm-dragndrop/-/npm-dragndrop-1.2.0.tgz#6e052400fed86b2f1e3f472c53810f923711bbb5" + integrity sha1-bgUkAP7Yay8eP0csU4EPkjcRu7U= + npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz" @@ -9467,6 +9508,21 @@ pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" +peerjs-js-binarypack@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/peerjs-js-binarypack/-/peerjs-js-binarypack-1.0.1.tgz#80fa2b61c794a6b16d64253700405e476ada29be" + integrity sha512-N6aeia3NhdpV7kiGxJV5xQiZZCVEEVjRz2T2C6UZQiBkHWHzUv/oWA4myQLcwBwO8LUoR1KWW5oStvwVesmfCg== + +peerjs@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/peerjs/-/peerjs-1.3.2.tgz#25cf5e8e7c143b41c2a5760a3d6ec0bb0bbb94d9" + integrity sha512-+PHfmsC7QGUU8Ye3OLi6tKQZGPCNy7QatUVNw4JtE8alkguF3+DdO5W0bzepqP2OtE9FqH/ltXt37qyvHw2CqA== + dependencies: + "@types/node" "^10.14.33" + eventemitter3 "^3.1.2" + peerjs-js-binarypack "1.0.1" + webrtc-adapter "^7.7.1" + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz" @@ -11839,6 +11895,13 @@ rsvp@^4.8.4: resolved "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz" integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA== +rtcpeerconnection-shim@^1.2.15: + version "1.2.15" + resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243" + integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw== + dependencies: + sdp "^2.6.0" + rtl-css-js@^1.14.0: version "1.14.1" resolved "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.1.tgz" @@ -11979,6 +12042,11 @@ scroll-into-view-if-needed@^2.2.25: dependencies: compute-scroll-into-view "^1.0.17" +sdp@^2.12.0, sdp@^2.6.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22" + integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw== + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz" @@ -13711,6 +13779,14 @@ webpack@4.44.2: watchpack "^1.7.4" webpack-sources "^1.4.1" +webrtc-adapter@^7.7.1: + version "7.7.1" + resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz#b2c227a6144983b35057df67bd984a7d4bfd17f1" + integrity sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A== + dependencies: + rtcpeerconnection-shim "^1.2.15" + sdp "^2.12.0" + websocket-driver@>=0.5.1, websocket-driver@^0.7.4: version "0.7.4" resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz"