feat(logrocket): add logrocket integration

.env

@@ -2,6 +2,7 @@ AWS_BUCKET=sputnik-dao
 AWS_REGION=eu-central-1
 AWS_IDENTITY_POOL_ID=eu-central-1:5887fd21-7b40-4871-a6cb-21097fe079a2
 GOOGLE_ANALYTICS_KEY=G-2SWGMFRYJ8
+LOG_ROCKET_APP_ID=mp/astrodao
 RELEASE_NOTES=https://github.com/near-daos/astro-ui/releases/latest
 I18_RELOAD_ON_PRERENDER=false
 STATS_API_URL=https://mainnet.api.daostats.io

.github/actions/helm-build-deploy/action.yaml

@@ -16,5 +16,6 @@ runs:
           --set environment.near_contract_name=${NEAR_CONTRACT_NAME} \
           --set environment.api_url=${API_URL}
           --set environment.google_analytics_key=${GOOGLE_ANALYTICS_KEY}
+          --set environment.log_rocket_app_id=${LOG_ROCKET_APP_ID}
           --set environment.near_env=${NEAR_ENV}
           --set ingress.host=${K8S_INGRESS_HOST}

.github/env.develop

@@ -7,3 +7,4 @@ STATS_API_URL=https://dev.api.astrostats.magicpowered.io
 APP_DOMAIN=dev.app.astrodao.com
 GOOGLE_ANALYTICS_KEY=G-0Q54E4Q8XL
 NEAR_CONTRACT_NAME=sputnikv2.testnet
+LOG_ROCKET_APP_ID=mp/astrodao

.github/env.production

@@ -8,3 +8,4 @@ STATS_API_URL=https://api.astrostats.magicpowered.io
 APP_DOMAIN=app.astrodao.com
 GOOGLE_ANALYTICS_KEY=G-1CTWBGD32Z
 NEAR_CONTRACT_NAME=sputnik-dao.near
+LOG_ROCKET_APP_ID=mp/astrodaoprod

.github/env.test

@@ -8,3 +8,4 @@ STATS_API_URL=https://dev.api.astrostats.magicpowered.io
 APP_DOMAIN=testnet.app.astrodao.com
 NEAR_CONTRACT_NAME=sputnikv2.testnet
 GOOGLE_ANALYTICS_KEY=G-0Q54E4Q8XL
+LOG_ROCKET_APP_ID=mp/astrodao

.github/workflows/build-deploy.yaml

@@ -16,6 +16,7 @@ env:
   AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
   AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
   GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
+  LOG_ROCKET_APP_ID: ${{ secrets.LOG_ROCKET_APP_ID }}
   AWS_ECR_URL: ${{ secrets.AWS_ECR_URL }}
   EKS_CLUSTER_NAME: ${{ secrets.EKS_CLUSTER_NAME }}
   KUBE_CONFIG_DATA:  ${{ secrets.KUBE_CONFIG_DATA }}
@@ -80,6 +81,7 @@ jobs:
             --set environment.near_contract_name=${NEAR_CONTRACT_NAME} \
             --set environment.api_url=${API_URL} \
             --set environment.google_analytics_key=${GOOGLE_ANALYTICS_KEY} \
+            --set environment.log_rocket_app_id=${LOG_ROCKET_APP_ID} \
             --set environment.near_env=${NEAR_ENV} \
             --set environment.stats_api_url=${STATS_API_URL} \
             --set environment.next_public_launchdarkly_id=${NEXT_PUBLIC_LAUNCHDARKLY_ID} \

.github/workflows/deploy.yaml

@@ -13,6 +13,7 @@ env:
   AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
   AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
   GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
+  LOG_ROCKET_APP_ID: ${{ secrets.LOG_ROCKET_APP_ID }}
   AWS_ECR_URL: ${{ secrets.AWS_ECR_URL }}
   EKS_CLUSTER_NAME: ${{ secrets.EKS_CLUSTER_NAME }}
   KUBE_CONFIG_DATA:  ${{ secrets.KUBE_CONFIG_DATA }}
@@ -45,6 +46,7 @@ jobs:
             --set environment.near_contract_name=${NEAR_CONTRACT_NAME} \
             --set environment.api_url=${API_URL} \
             --set environment.google_analytics_key=${GOOGLE_ANALYTICS_KEY} \
+            --set environment.log_rocket_app_id=${LOG_ROCKET_APP_ID} \
             --set environment.near_env=${NEAR_ENV} \
             --set environment.stats_api_url=${STATS_API_URL} \
             --set environment.next_public_launchdarkly_id=${NEXT_PUBLIC_LAUNCHDARKLY_ID} \

astro_2.0/features/AppMonitoring/AppMonitoring.tsx

@@ -1,14 +1,30 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import Script from 'next/script';
 import { gtag, gtagScript } from 'constants/googleTagManager';
 import { configService } from 'services/ConfigService';
 import { CookieService } from 'services/CookieService';
 import { ACCOUNT_COOKIE } from 'constants/cookies';
 
+// you can import these packages anywhere
+import LogRocket from 'logrocket';
+import setupLogRocketReact from 'logrocket-react';
+
 export const AppMonitoring: FC = () => {
   const { appConfig } = configService.get();
   const accountId = CookieService.get(ACCOUNT_COOKIE);
 
+  useEffect(() => {
+    // only initialize when in the browser
+    if (typeof window !== 'undefined' && appConfig.LOG_ROCKET_APP_ID) {
+      LogRocket.init(appConfig.LOG_ROCKET_APP_ID);
+      // plugins should also only be initialized when in the browser
+      setupLogRocketReact(LogRocket);
+
+      // This is an example script - don't forget to change it!
+      LogRocket.identify(CookieService.get(ACCOUNT_COOKIE));
+    }
+  }, [appConfig.LOG_ROCKET_APP_ID]);
+
   if (appConfig?.GOOGLE_ANALYTICS_KEY) {
     return (
       <>

bitbucket-pipelines.yml

@@ -79,6 +79,7 @@ definitions:
             --set environment.near_contract_name=$NEAR_CONTRACT_NAME
             --set environment.api_url=$API_URL
             --set environment.google_analytics_key=$GOOGLE_ANALYTICS_KEY
+            --set environment.log_rocket_app_id=$LOG_ROCKET_APP_ID
             --set ingress.host=$K8S_INGRESS_HOST
             > $APP_NAME-manifest.yml
 
@@ -198,6 +199,7 @@ pipelines:
             - echo export NEAR_ENV=$NEAR_ENV_STAGING >> environment.sh
             - echo export API_URL=$API_URL_STAGING >> environment.sh
             - echo export GOOGLE_ANALYTICS_KEY=$GOOGLE_ANALYTICS_KEY_STAGING >> environment.sh
+            - echo export LOG_ROCKET_APP_ID=$LOG_ROCKET_APP_ID_STAGING >> environment.sh
 
       - step: *build
 
@@ -218,6 +220,7 @@ pipelines:
             - echo export NEAR_ENV=$NEAR_ENV_PROD >> environment.sh
             - echo export API_URL=$API_URL_PROD >> environment.sh
             - echo export GOOGLE_ANALYTICS_KEY=$GOOGLE_ANALYTICS_KEY_PROD >> environment.sh
+            - echo export LOG_ROCKET_APP_ID=$LOG_ROCKET_APP_ID_PROD >> environment.sh
 
       - step: *build
 

config/index.ts

@@ -17,6 +17,7 @@ export const appConfig = {
   AWS_BUCKET: '',
   AWS_REGION: '',
   GOOGLE_ANALYTICS_KEY: process.env.GOOGLE_ANALYTICS_KEY,
+  LOG_ROCKET_APP_ID: process.env.LOG_ROCKET_APP_ID,
   RELEASE_NOTES: process.env.RELEASE_NOTES,
   I18_RELOAD_ON_PRERENDER: false,
   TOASTS_NOTIFICATIONS_TIMEOUT: 0,

deployment/app-chart/templates/astro-ui-configmap.yaml

@@ -10,6 +10,7 @@ data:
   AWS_REGION: "{{ .Values.environment.aws_region }}"
   AWS_IDENTITY_POOL_ID: "{{ .Values.environment.aws_identity_pool_id }}"
   GOOGLE_ANALYTICS_KEY: "{{ .Values.environment.google_analytics_key }}"
+  LOG_ROCKET_APP_ID: "{{ .Values.environment.log_rocket_app_id }}"
   STATS_API_URL: "{{ .Values.environment.stats_api_url }}"
   NEXT_PUBLIC_LAUNCHDARKLY_ID: "{{ .Values.environment.next_public_launchdarkly_id }}"
   APP_DOMAIN: "{{ .Values.environment.app_domain }}"

env.d.ts

@@ -6,6 +6,7 @@ declare global {
       AWS_REGION: string;
       AWS_IDENTITY_POOL_ID: string;
       GOOGLE_ANALYTICS_KEY: string;
+      LOG_ROCKET_APP_ID: string;
 
       APP_VERSION: string;
       CHANGELOG_URL: string;

package.json

@@ -54,6 +54,8 @@
     "launchdarkly-react-client-sdk": "^2.25.0",
     "little-state-machine": "^4.2.3",
     "lodash": "^4.17.21",
+    "logrocket": "^3.0.0",
+    "logrocket-react": "^5.0.1",
     "mark.js": "^8.11.1",
     "nanoid": "^3.1.23",
     "near-api-js": "^0.44.2",
@@ -143,6 +145,7 @@
     "@types/extract-domain": "^2.3.1",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.172",
+    "@types/logrocket-react": "^3.0.0",
     "@types/mark.js": "^8.11.6",
     "@types/react": "17.0.14",
     "@types/react-dom": "^17.0.9",

pages/api/config.ts

@@ -10,6 +10,7 @@ export default function handler(
     AWS_BUCKET: process.env.AWS_BUCKET,
     AWS_REGION: process.env.AWS_REGION,
     GOOGLE_ANALYTICS_KEY: process.env.GOOGLE_ANALYTICS_KEY,
+    LOG_ROCKET_APP_ID: process.env.LOG_ROCKET_APP_ID,
     RELEASE_NOTES: process.env.RELEASE_NOTES,
     I18_RELOAD_ON_PRERENDER: process.env.I18_RELOAD_ON_PRERENDER,
     LOCAL_WALLET_REDIRECT: process.env.LOCAL_WALLET_REDIRECT,

types/config.ts

@@ -2,6 +2,7 @@ export type Config = {
   AWS_BUCKET: string;
   AWS_REGION: string;
   GOOGLE_ANALYTICS_KEY: string;
+  LOG_ROCKET_APP_ID: string;
   RELEASE_NOTES: string;
   I18_RELOAD_ON_PRERENDER: boolean;
   API_URL: string;

yarn.lock

@@ -4066,6 +4066,13 @@
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz"
   integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==
 
+"@types/logrocket-react@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/logrocket-react/-/logrocket-react-3.0.0.tgz#88278ec2fe093ff55496d66aea9056fe1061ecea"
+  integrity sha512-bQ7LUwqwt2RNpRoco3vt8QBHy78nOQFF+KfFRol1PgKq8S1nIiLYA6Y0ZUAzqGw1viA0lyjAHlPQeTI+wl4wnw==
+  dependencies:
+    logrocket "1.0.1"
+
 "@types/long@^4.0.1":
   version "4.0.1"
   resolved "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz"
@@ -11956,6 +11963,21 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+logrocket-react@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/logrocket-react/-/logrocket-react-5.0.1.tgz#f71a1cfa539bafe581576a7a6b92dfc6104c5a7b"
+  integrity sha512-d5RAi1giur9Yv7/lDK/c2S1hviopN5K1XMMpfpSFRDG3Rr/j5RmGuvNHdXNTJUwGuxTVrpnKUOB43ceQMJfO1Q==
+
+logrocket@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/logrocket/-/logrocket-1.0.1.tgz#0555ec619d2db54a7b345c4e8df09baea835b176"
+  integrity sha512-oPA0c5GzMKsWp/6p19OaujZQMzttluqVOI+989uHeciPAljPZvGEpZRbNO3Rr+jC/8jVLJdlMP9IHuyhKsASGA==
+
+logrocket@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/logrocket/-/logrocket-3.0.0.tgz#d97ca1a57fab7543811a08d2b9c435369f3585d9"
+  integrity sha512-RDbF28Np+XsBIb6egJiPPQmRupdrmXURESPpxUo4awH3h7Mk0s9iZVF+AMy64GixznlWevgm01+uuAq8NYfvMw==
+
 long@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/long/-/long-4.0.0.tgz"