feat: Integrate LogRocket (#6494)

* feat: install logrocket

* feat: allow log rocket

* feat: enable vuex log-rocket

* feat: integrate vuex with log rocket

* feat: add log rocket identify

* fix: identify if log rocket is initialized

---------

Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>

.env.example

@@ -169,6 +169,9 @@ USE_INBOX_AVATAR_FOR_BOT=true
 ## Sentry
 # SENTRY_DSN=
 
+## LogRocket
+# LOG_ROCKET_PROJECT_ID=xxxxx/some-project
+
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY

app/javascript/dashboard/helper/scriptHelpers.js

@@ -1,4 +1,5 @@
 import AnalyticsHelper from './AnalyticsHelper';
+import LogRocket from 'logrocket';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 
 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
@@ -10,6 +11,12 @@ export const ANALYTICS_RESET = 'ANALYTICS_RESET';
 export const initializeAnalyticsEvents = () => {
   window.bus.$on(ANALYTICS_IDENTITY, ({ user }) => {
     AnalyticsHelper.identify(user);
+    if (window.logRocketProjectId) {
+      LogRocket.identify(user.id, {
+        email: user.email,
+        name: user.name,
+      });
+    }
   });
   window.bus.$on(ANALYTICS_RESET, () => {});
 };

app/javascript/dashboard/store/index.js

@@ -42,6 +42,25 @@ import teams from './modules/teams';
 import userNotificationSettings from './modules/userNotificationSettings';
 import webhooks from './modules/webhooks';
 
+import LogRocket from 'logrocket';
+import createPlugin from 'logrocket-vuex';
+
+const plugins = [];
+
+if (window.logRocketProjectId) {
+  LogRocket.init(window.logRocketProjectId);
+  const logRocketPlugin = createPlugin(LogRocket, function(mutation) {
+    const eventsToIgnore = ['SET_CURRENT_USER', 'AUTHENTICATE', 'CLEAR_USER'];
+    if (eventsToIgnore.includes(mutation.type)) {
+      return null;
+    }
+
+    return mutation;
+  });
+
+  plugins.push(logRocketPlugin);
+}
+
 Vue.use(Vuex);
 export default new Vuex.Store({
   modules: {
@@ -86,4 +105,5 @@ export default new Vuex.Store({
     userNotificationSettings,
     webhooks,
   },
+  plugins,
 });

app/views/layouts/vueapp.html.erb

@@ -51,6 +51,7 @@
         browser_name: '<%= browser.name %>',
       }
       window.errorLoggingConfig = '<%= ENV.fetch('SENTRY_DSN', '')%>'
+      window.logRocketProjectId = '<%= ENV.fetch('LOG_ROCKET_PROJECT_ID', '')%>'
     </script>
     <% if @global_config['ANALYTICS_TOKEN'].present? %>
     <script>

package.json

@@ -43,6 +43,8 @@
     "highlight.js": "~10.4.1",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",
+    "logrocket": "^3.0.1",
+    "logrocket-vuex": "^0.0.3",
     "marked": "4.0.10",
     "md5": "^2.3.0",
     "ninja-keys": "^1.1.9",

yarn.lock

@@ -11210,6 +11210,16 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
+logrocket-vuex@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/logrocket-vuex/-/logrocket-vuex-0.0.3.tgz#e11d65d384f0c9fdac72f984436cc038adf3db90"
+  integrity sha512-Xnl3pBEkc/bbtZ5JEtFwqNjVuLzVEohlBpyQHP47BlO+/6sFmSM2JcNWojysYUo4cp3IWpmWXcezax2+Cq4RsA==
+
+logrocket@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/logrocket/-/logrocket-3.0.1.tgz#c746e8df3d5fee999b152975e51db1908357a6f0"
+  integrity sha512-jOWG+jEzobKVxGytzZ+4KGm2kiMQMRTHab2uDWQyVZcHfEF38BlCH1yjQVY4LCmuQUwZitP9biMzJZnyUQ0dtQ==
+
 loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"