feat: 🔥 added trackjs implementation and bundle analyzer script

.github/workflows/build-and-deploy-production.yml

@@ -50,7 +50,7 @@ jobs:
                   GD_API_KEY: ${{ secrets.GD_API_KEY }}
                   GD_APP_ID: ${{ secrets.GD_APP_ID }}
                   GD_CLIENT_ID: ${{ secrets.GD_CLIENT_ID }}
-
+                  TRACKJS_TOKEN: ${{ secrets.TRACKJS_TOKEN }}
             - name: Run tests for Eslint
               run: npm run test:lint
 

package.json

@@ -16,7 +16,8 @@
         "test:fix": "prettier --log-level silent --write . && eslint --fix \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "test": "jest",
         "coverage": "jest --coverage",
-        "prepare": "husky install"
+        "prepare": "husky install",
+        "build:analyze": "BUNDLE_ANALYZE=true rsbuild build"
     },
     "dependencies": {
         "@deriv-com/analytics": "^1.5.3",
@@ -62,6 +63,7 @@
         "react-virtualized": "^9.22.5",
         "redux": "^5.0.1",
         "redux-thunk": "^3.1.0",
+        "trackjs": "^3.10.4",
         "ua-parser-js": "^1.0.38",
         "usehooks-ts": "^3.1.0",
         "uuid": "^9.0.1",

src/app/app-content.jsx

@@ -9,6 +9,7 @@ import { CONNECTION_STATUS } from '@/external/bot-skeleton/services/api/observab
 import { useApiBase } from '@/hooks/useApiBase';
 import { useStore } from '@/hooks/useStore';
 import useThemeSwitcher from '@/hooks/useThemeSwitcher';
+import useTrackjs from '@/hooks/useTrackjs';
 import { setSmartChartsPublicPath } from '@deriv/deriv-charts';
 import { ThemeProvider } from '@deriv-com/quill-ui';
 import { localize } from '@deriv-com/translations';
@@ -23,6 +24,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import '../components/bot-notification/bot-notification.scss';
 
 const AppContent = observer(() => {
+    const { initTrackJS } = useTrackjs();
     const [is_api_initialized, setIsApiInitialized] = React.useState(false);
     const [is_loading, setIsLoading] = React.useState(true);
     const store = useStore();
@@ -35,6 +37,8 @@ const AppContent = observer(() => {
     const msg_listener = React.useRef(null);
     const { connectionStatus } = useApiBase();
 
+    initTrackJS();
+
     useEffect(() => {
         if (connectionStatus === CONNECTION_STATUS.OPENED) {
             setIsApiInitialized(true);

src/hooks/useTrackjs.ts

@@ -0,0 +1,33 @@
+import { TrackJS } from 'trackjs';
+
+const { TRACKJS_TOKEN } = process.env;
+
+/**
+ * Custom hook to initialize TrackJS.
+ * @returns {Object} An object containing the `init` function.
+ */
+const useTrackjs = () => {
+    const activeLoginid = '';
+    const isProduction = process.env.NODE_ENV === 'production';
+    const initTrackJS = () => {
+        try {
+            if (!TrackJS.isInstalled()) {
+                TrackJS.install({
+                    application: 'standalone-deriv-bot',
+                    dedupe: false,
+                    enabled: isProduction,
+                    token: TRACKJS_TOKEN!,
+                    userId: activeLoginid ?? 'undefined',
+                    version: (document.querySelector('meta[name=version]') as HTMLMetaElement)?.content ?? 'undefined',
+                });
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to initialize TrackJS', error);
+        }
+    };
+
+    return { initTrackJS };
+};
+
+export default useTrackjs;