chore: add grafana faro sdk (CE)

.github/workflows/client-build.yml

@@ -81,8 +81,8 @@ jobs:
         env:
           ALL_CHANGED_FILES: ${{ steps.changed-files-specific.outputs.all_changed_files }}
         run: |
-         echo "One or more files in the server folder has changed."
-         echo "List all the files that have changed: $ALL_CHANGED_FILES"
+          echo "One or more files in the server folder has changed."
+          echo "List all the files that have changed: $ALL_CHANGED_FILES"
 
       - name: Check compliance
         if: inputs.pr != 0 && steps.changed-files-specific.outputs.any_changed == 'true'
@@ -166,6 +166,11 @@ jobs:
             export REACT_APP_SEGMENT_CE_KEY="${{ secrets.APPSMITH_SEGMENT_CE_KEY_RELEASE }}"
           fi
           REACT_APP_ENVIRONMENT=${{steps.vars.outputs.REACT_APP_ENVIRONMENT}} \
+          REACT_APP_FARO_APP_ID=${{ secrets.REACT_APP_FARO_APP_ID }} \
+          REACT_APP_FARO_APP_NAME=${{ secrets.REACT_APP_FARO_APP_NAME }} \
+          REACT_APP_FARO_SOURCEMAP_UPLOAD_API_KEY=${{ secrets.REACT_APP_FARO_SOURCEMAP_UPLOAD_API_KEY }} \
+          REACT_APP_FARO_SOURCEMAP_UPLOAD_ENDPOINT=${{ secrets.REACT_APP_FARO_SOURCEMAP_UPLOAD_ENDPOINT }} \
+          REACT_APP_FARO_STACK_ID=${{ secrets.REACT_APP_FARO_STACK_ID }} \
             REACT_APP_FUSIONCHARTS_LICENSE_KEY=${{ secrets.APPSMITH_FUSIONCHARTS_LICENSE_KEY }} \
             SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} \
             REACT_APP_VERSION_EDITION="Community" \

app/client/craco.build.config.js

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const SentryWebpackPlugin = require("@sentry/webpack-plugin");
 const { merge } = require("webpack-merge");
 const common = require("./craco.common.config.js");
 const WorkboxPlugin = require("workbox-webpack-plugin");
 const CompressionPlugin = require("compression-webpack-plugin");
 const { RetryChunkLoadPlugin } = require("webpack-retry-chunk-load-plugin");
+const FaroSourceMapUploaderPlugin = require("@grafana/faro-webpack-plugin");
 const path = require("path");
 
 const env = process.env.REACT_APP_ENVIRONMENT;
@@ -39,26 +39,20 @@ plugins.push(
 );
 
 if (env === "PRODUCTION" || env === "STAGING") {
-  if (
-    process.env.SENTRY_AUTH_TOKEN != null &&
-    process.env.SENTRY_AUTH_TOKEN !== ""
-  ) {
-    plugins.push(
-      new SentryWebpackPlugin({
-        include: "build",
-        ignore: ["node_modules", "webpack.config.js"],
-        release: process.env.REACT_APP_SENTRY_RELEASE,
-        deploy: {
-          env: process.env.REACT_APP_SENTRY_ENVIRONMENT,
-        },
-      }),
-    );
-  } else {
-    console.log(
-      "Sentry configuration missing in process environment. Sentry will be disabled.",
-    );
-  }
+  plugins.push(
+    new FaroSourceMapUploaderPlugin({
+      appId: process.env.REACT_APP_FARO_APP_ID,
+      appName: process.env.REACT_APP_FARO_APP_NAME,
+      endpoint: process.env.REACT_APP_FARO_SOURCEMAP_UPLOAD_ENDPOINT,
+      stackId: process.env.REACT_APP_FARO_STACK_ID,
+      // instructions on how to obtain your API key are in the documentation
+      // https://grafana.com/docs/grafana-cloud/monitor-applications/frontend-observability/sourcemap-upload-plugins/#obtain-an-api-key
+      apiKey: process.env.REACT_APP_FARO_SOURCEMAP_UPLOAD_API_KEY,
+      gzipContents: true,
+    }),
+  );
 }
+
 plugins.push(new CompressionPlugin());
 
 plugins.push(

app/client/docker/templates/nginx-app.conf.template

@@ -42,15 +42,10 @@ server {
         sub_filter __APPSMITH_ZIPY_SDK_KEY__ '${APPSMITH_ZIPY_SDK_KEY}';
         sub_filter __APPSMITH_HIDE_WATERMARK__ '${APPSMITH_HIDE_WATERMARK}';
         sub_filter __APPSMITH_DISABLE_IFRAME_WIDGET_SANDBOX__ '${APPSMITH_DISABLE_IFRAME_WIDGET_SANDBOX}';
-        sub_filter __APPSMITH_NEW_RELIC_ACCOUNT_ID__ '${APPSMITH_NEW_RELIC_ACCOUNT_ID}';
-        sub_filter __APPSMITH_NEW_RELIC_APPLICATION_ID__ '${APPSMITH_NEW_RELIC_APPLICATION_ID}';
-        sub_filter __APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__ '${APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY}';
-        sub_filter __APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT__ '${APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT}';
-        sub_filter __APPSMITH_NEW_RELIC_ACCOUNT_ENABLE__ '${APPSMITH_NEW_RELIC_ACCOUNT_ENABLE}';
+
         sub_filter __APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY__ '${APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY}';
-        sub_filter __APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME__ '${APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME}';
         sub_filter __APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT__ '${APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT}';
-
+        sub_filter __APPSMITH_FRONTEND_TRACING_URL__ '${APPSMITH_FRONTEND_TRACING_URL}';
     }
 
 

app/client/jest.config.js

@@ -86,27 +86,10 @@ module.exports = {
         apiKey: parseConfig("__APPSMITH_SEGMENT_KEY__"),
         ceKey: parseConfig("__APPSMITH_SEGMENT_CE_KEY__"),
       },
-      newRelic: {
-        enableNewRelic: parseConfig("__APPSMITH_NEW_RELIC_ACCOUNT_ENABLE__"),
-        accountId: parseConfig("__APPSMITH_NEW_RELIC_ACCOUNT_ID__"),
-        applicationId: parseConfig("__APPSMITH_NEW_RELIC_APPLICATION_ID__"),
-        browserAgentlicenseKey: parseConfig(
-          "__APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__",
-        ),
-        browserAgentEndpoint: parseConfig(
-          "__APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT__",
-        ),
-        otlpLicenseKey: parseConfig("__APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY__"),
-        otlpServiceName: parseConfig(
-          "__APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME__",
-        ),
-        otlpEndpoint: parseConfig(
-          "__APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT__",
-        ),
-      },
       observability: {
         deploymentName: "jest-run",
         serviceInstanceId: "appsmith-0",
+        tracingUrl: "",
       },
       fusioncharts: {
         licenseKey: parseConfig("__APPSMITH_FUSIONCHARTS_LICENSE_KEY__"),

app/client/knip.json

@@ -35,7 +35,6 @@
     "postcss-url",
     "@types/dom-view-transitions",
     "@types/jest",
-    "@sentry/webpack-plugin",
     "compression-webpack-plugin",
     "webpack-retry-chunk-load-plugin",
     "lint-staged",
@@ -47,6 +46,7 @@
     "@aws-sdk/lib-storage",
     "@octokit/rest",
     "@faker-js/faker",
+    "@grafana/faro-webpack-plugin",
     "pg",
     "factory.ts"
   ]

app/client/package.json

@@ -68,6 +68,8 @@
     "@github/g-emoji-element": "^1.1.5",
     "@googlemaps/markerclusterer": "^2.0.14",
     "@googlemaps/react-wrapper": "^1.1.35",
+    "@grafana/faro-react": "^1.12.2",
+    "@grafana/faro-web-tracing": "^1.12.2",
     "@manaflair/redux-batch": "^1.0.0",
     "@mantine/hooks": "^5.10.1",
     "@newrelic/browser-agent": "^1.255.0",
@@ -251,9 +253,9 @@
     "@craco/craco": "^7.0.0",
     "@cypress/grep": "^4.0.1",
     "@faker-js/faker": "^7.4.0",
+    "@grafana/faro-webpack-plugin": "^0.1.1",
     "@octokit/rest": "^20.0.1",
     "@peculiar/webcrypto": "^1.4.3",
-    "@sentry/webpack-plugin": "^1.18.9",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",

app/client/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -17,31 +17,31 @@
         transition: all ease-in 0.3s;
       }
     </style>
-      <script>
-        // '' (empty strings), 'false' are falsy
-        // could return either boolean or string based on value
-        const parseConfig = (config) => {
-          if (
-            (config.startsWith("{") && config.startsWith("}")) ||
-            config.indexOf("__") === 0 ||
-            config.indexOf("$") === 0 ||
-            config.indexOf("%") === 0
-          )
-            return "";
+    <script>
+      // '' (empty strings), 'false' are falsy
+      // could return either boolean or string based on value
+      const parseConfig = (config) => {
+        if (
+          (config.startsWith("{") && config.startsWith("}")) ||
+          config.indexOf("__") === 0 ||
+          config.indexOf("$") === 0 ||
+          config.indexOf("%") === 0
+        )
+          return "";
 
-          const result = config.trim();
-          if (result.toLowerCase() === "false" || result === "") {
-            return false;
-          } else if (result.toLowerCase() === "true") {
-            return true;
-          }
+        const result = config.trim();
+        if (result.toLowerCase() === "false" || result === "") {
+          return false;
+        } else if (result.toLowerCase() === "true") {
+          return true;
+        }
 
-          return result;
-        };
-        const CLOUD_HOSTING = parseConfig('{{env "APPSMITH_CLOUD_HOSTING"}}');
-        const AIRGAPPED = parseConfig('{{env "APPSMITH_AIRGAP_ENABLED"}}');
-        const REO_CLIENT_ID = parseConfig('{{env "APPSMITH_REO_CLIENT_ID"}}');
-      </script>
+        return result;
+      };
+      const CLOUD_HOSTING = parseConfig('{{env "APPSMITH_CLOUD_HOSTING"}}');
+      const AIRGAPPED = parseConfig('{{env "APPSMITH_AIRGAP_ENABLED"}}');
+      const REO_CLIENT_ID = parseConfig('{{env "APPSMITH_REO_CLIENT_ID"}}');
+    </script>
     <script>
         window.__APPSMITH_CHUNKS_TO_PRELOAD =
       <%=
@@ -67,7 +67,18 @@
     <!-- Start of Reo Javascript -->
     <script type="text/javascript">
       if (CLOUD_HOSTING && REO_CLIENT_ID) {
-        !function(){var e,t,n;e=REO_CLIENT_ID,t=function(){Reo.init({clientID:REO_CLIENT_ID})},(n=document.createElement("script")).src="https://static.reo.dev/"+e+"/reo.js",n.async=!0,n.onload=t,document.head.appendChild(n)}();
+        !(function () {
+          var e, t, n;
+          (e = REO_CLIENT_ID),
+            (t = function () {
+              Reo.init({ clientID: REO_CLIENT_ID });
+            }),
+            ((n = document.createElement("script")).src =
+              "https://static.reo.dev/" + e + "/reo.js"),
+            (n.async = !0),
+            (n.onload = t),
+            document.head.appendChild(n);
+        })();
       }
     </script>
     <!-- End of Reo Javascript -->
@@ -159,7 +170,9 @@
       const INTERCOM_APP_ID =
         parseConfig("%REACT_APP_INTERCOM_APP_ID%") ||
         parseConfig('{{env "APPSMITH_INTERCOM_APP_ID"}}');
-      const DISABLE_INTERCOM = parseConfig('{{env "APPSMITH_DISABLE_INTERCOM"}}');
+      const DISABLE_INTERCOM = parseConfig(
+        '{{env "APPSMITH_DISABLE_INTERCOM"}}',
+      );
 
       // Initialize the Intercom library
       if (INTERCOM_APP_ID.length && !DISABLE_INTERCOM) {
@@ -213,23 +226,17 @@
           ceKey: parseConfig('{{env "APPSMITH_SEGMENT_CE_KEY"}}'),
         },
         observability: {
-          deploymentName: parseConfig('{{env "APPSMITH_DEPLOYMENT_NAME"}}') || "self-hosted",
-          serviceInstanceId: parseConfig('{{env "HOSTNAME"}}') || "appsmith-0",
-        },
-        newRelic:{
-          enableNewRelic: parseConfig('{{env "APPSMITH_NEW_RELIC_ACCOUNT_ENABLE"}}'),
-          accountId: parseConfig('{{env "APPSMITH_NEW_RELIC_ACCOUNT_ID"}}'),
-          applicationId: parseConfig('{{env "APPSMITH_NEW_RELIC_APPLICATION_ID"}}'),
-          browserAgentlicenseKey: parseConfig('{{env "APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY"}}'),
-          browserAgentEndpoint: parseConfig('{{env "APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT"}}'),
-          otlpLicenseKey: parseConfig('{{env "APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY"}}'),
-          //OTLP following the naming convention of Sdk initialisation
-          otlpServiceName: parseConfig('{{env "APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME"}}'),
-          otlpEndpoint:parseConfig('{{env "APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT"}}'),
-
+          deploymentName:
+            parseConfig('{{env "APPSMITH_DEPLOYMENT_NAME"}}') || "self-hosted",
+          serviceInstanceId:
+            parseConfig('{{env "APPSMITH_HOSTNAME"}}') || "appsmith-0",
+          tracingUrl:
+            parseConfig('{{env "APPSMITH_FRONTEND_TRACING_URL"}}') || "",
         },
         fusioncharts: {
-          licenseKey: parseConfig('{{env "APPSMITH_FUSIONCHARTS_LICENSE_KEY"}}'),
+          licenseKey: parseConfig(
+            '{{env "APPSMITH_FUSIONCHARTS_LICENSE_KEY"}}',
+          ),
         },
         mixpanel: {
           enabled: parseConfig('{{env "APPSMITH_SEGMENT_KEY"}}'),
@@ -247,7 +254,9 @@
         },
         intercomAppID: INTERCOM_APP_ID,
         mailEnabled: parseConfig('{{env "APPSMITH_MAIL_ENABLED"}}'),
-        googleRecaptchaSiteKey: parseConfig('{{env "APPSMITH_RECAPTCHA_SITE_KEY"}}'),
+        googleRecaptchaSiteKey: parseConfig(
+          '{{env "APPSMITH_RECAPTCHA_SITE_KEY"}}',
+        ),
         hideWatermark: parseConfig('{{env "APPSMITH_HIDE_WATERMARK"}}'),
         disableIframeWidgetSandbox: parseConfig(
           '{{env "APPSMITH_DISABLE_IFRAME_WIDGET_SANDBOX"}}',