Update dependencies and configuration files to support the use OpenReply to do Session replay

.env

@@ -1,2 +1,3 @@
 VITE_APP_API_URL=http://localhost:2021
 VITE_IS_LANDING_DEFAULT=false
+VITE_OPENREPLAY_PROJECT_KEY=

package-lock.json

@@ -1,18 +1,19 @@
 {
-  "name": "fe-template",
-  "version": "0.1.61",
+  "name": "donetick",
+  "version": "0.1.72",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "fe-template",
-      "version": "0.1.61",
+      "name": "donetick",
+      "version": "0.1.72",
       "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.15.2",
         "@mui/joy": "^5.0.0-beta.20",
         "@mui/material": "^5.15.2",
+        "@openreplay/tracker": "^14.0.4",
         "@tanstack/react-query": "^5.17.0",
         "aos": "^2.3.4",
         "dotenv": "^16.4.5",
@@ -2481,6 +2482,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@medv/finder": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@medv/finder/-/finder-3.2.0.tgz",
+      "integrity": "sha512-JmU7JIBwyL8RAzefvzALT4sP2M0biGk8i2invAgpQmma/QgfsaqoHIvJ7S0YC8n9hUVG8X3Leul2nGa06PvhbQ==",
+      "license": "MIT"
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.29",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.29.tgz",
@@ -2839,6 +2846,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@openreplay/tracker": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@openreplay/tracker/-/tracker-14.0.4.tgz",
+      "integrity": "sha512-Mz+MPw9EYbH6tpZ3d1u2yLJsY+MaoBmJX0gQt4HtvGlwJnd7xJvF37xHY8/e3N1Tc7zENsrf7xcpiZXabNKoVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@medv/finder": "^3.2.0",
+        "error-stack-parser": "^2.0.6",
+        "fflate": "^0.8.2"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -4747,6 +4768,15 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.22.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
@@ -5327,6 +5357,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8064,6 +8100,12 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
+      "license": "MIT"
+    },
     "node_modules/streamx": {
       "version": "2.18.0",
       "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.18.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "donetick",
   "private": true,
-  "version": "0.1.71",
+  "version": "0.1.72",
   "type": "module",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -25,6 +25,7 @@
     "@mui/icons-material": "^5.15.2",
     "@mui/joy": "^5.0.0-beta.20",
     "@mui/material": "^5.15.2",
+    "@openreplay/tracker": "^14.0.4",
     "@tanstack/react-query": "^5.17.0",
     "aos": "^2.3.4",
     "dotenv": "^16.4.5",

src/App.jsx

@@ -1,5 +1,6 @@
 import NavBar from '@/views/components/NavBar'
 import { Button, Snackbar, Typography, useColorScheme } from '@mui/joy'
+import Tracker from '@openreplay/tracker'
 import { useEffect, useState } from 'react'
 import { Outlet } from 'react-router-dom'
 import { useRegisterSW } from 'virtual:pwa-register/react'
@@ -19,6 +20,8 @@ const remove = className => {
 const intervalMS = 5 * 60 * 1000 // 5 minutes
 
 function App() {
+  startOpenReplay()
+
   const { mode, systemMode } = useColorScheme()
   const [userProfile, setUserProfile] = useState(null)
   const [showUpdateSnackbar, setShowUpdateSnackbar] = useState(true)
@@ -115,4 +118,11 @@ function App() {
   )
 }
 
+const startOpenReplay = () => {
+  if (!import.meta.env.VITE_OPENREPLAY_PROJECT_KEY) return
+  const tracker = new Tracker({
+    projectKey: import.meta.env.VITE_OPENREPLAY_PROJECT_KEY,
+  })
+  tracker.start()
+}
 export default App