feat: Add Betterbugs SDK support

.github/workflows/ad-hoc-docker-image.yml

@@ -121,6 +121,7 @@ jobs:
           platforms: linux/arm64,linux/amd64
           build-args: |
             APPSMITH_SEGMENT_CE_KEY=${{ secrets.APPSMITH_SEGMENT_CE_KEY }}
+            APPSMITH_BETTERBUGS_API_KEY=${{ secrets.APPSMITH_BETTERBUGS_API_KEY }}
             BASE=${{ vars.DOCKER_HUB_ORGANIZATION }}/base-${{ vars.EDITION }}:nightly
           tags: |
             ${{ vars.DOCKER_HUB_ORGANIZATION }}/appsmith-${{ vars.EDITION }}:${{ inputs.tag }}

.github/workflows/github-release.yml

@@ -280,6 +280,7 @@ jobs:
           platforms: linux/arm64,linux/amd64
           build-args: |
             APPSMITH_SEGMENT_CE_KEY=${{ secrets.APPSMITH_SEGMENT_CE_KEY }}
+            APPSMITH_BETTERBUGS_API_KEY=${{ secrets.APPSMITH_BETTERBUGS_API_KEY }}
             BASE=${{ vars.DOCKER_HUB_ORGANIZATION }}/base-${{ vars.EDITION }}:nightly
           tags: |
             ${{ needs.prelude.outputs.docker_tags }}

.github/workflows/on-demand-build-docker-image-deploy-preview.yml

@@ -214,6 +214,7 @@ jobs:
             org.opencontainers.image.version=${{ steps.info_json.outputs.version }}
           build-args: |
             APPSMITH_CLOUD_SERVICES_BASE_URL=https://release-cs.appsmith.com
+            APPSMITH_BETTERBUGS_API_KEY=${{ secrets.APPSMITH_BETTERBUGS_API_KEY }}
             BASE=${{ vars.DOCKER_HUB_ORGANIZATION }}/base-${{ vars.EDITION }}:${{ steps.set_base_tag.outputs.base_tag }}
 
     outputs:
@@ -281,6 +282,7 @@ jobs:
           APPSMITH_CARBON_API_KEY: ${{ secrets.APPSMITH_CARBON_API_KEY }}
           APPSMITH_CARBON_API_BASE_PATH: ${{ secrets.APPSMITH_CARBON_API_BASE_PATH }}
           APPSMITH_AI_SERVER_MANAGED_HOSTING: ${{ secrets.APPSMITH_AI_SERVER_MANAGED_HOSTING }}
+          APPSMITH_BETTERBUGS_API_KEY: ${{ secrets.APPSMITH_BETTERBUGS_API_KEY }}
           IN_DOCKER: ${{ secrets.IN_DOCKER }}
         run: |
           echo "environment variables set to deploy the image" $IMAGE_HASH

.github/workflows/test-build-docker-image.yml

@@ -372,6 +372,7 @@ jobs:
           platforms: linux/arm64,linux/amd64
           build-args: |
             APPSMITH_SEGMENT_CE_KEY=${{ secrets.APPSMITH_SEGMENT_CE_KEY_RELEASE }}
+            APPSMITH_BETTERBUGS_API_KEY=${{ secrets.APPSMITH_BETTERBUGS_API_KEY }}
             APPSMITH_CLOUD_SERVICES_BASE_URL=https://release-cs.appsmith.com
             BASE=${{ vars.DOCKER_HUB_ORGANIZATION }}/base-${{ vars.EDITION }}:release
           tags: |

Dockerfile

@@ -9,6 +9,9 @@ ENV APPSMITH_CLOUD_SERVICES_BASE_URL=${APPSMITH_CLOUD_SERVICES_BASE_URL}
 ARG APPSMITH_SEGMENT_CE_KEY
 ENV APPSMITH_SEGMENT_CE_KEY=${APPSMITH_SEGMENT_CE_KEY}
 
+ARG APPSMITH_BETTERBUGS_API_KEY
+ENV APPSMITH_BETTERBUGS_API_KEY=${APPSMITH_BETTERBUGS_API_KEY}
+
 COPY deploy/docker/fs /
 
 RUN apt-get update && \

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

@@ -39,6 +39,7 @@ server {
         sub_filter __APPSMITH_MAIL_ENABLED__ '${APPSMITH_MAIL_ENABLED}';
         sub_filter __APPSMITH_RECAPTCHA_SITE_KEY__ '${APPSMITH_RECAPTCHA_SITE_KEY}';
         sub_filter __APPSMITH_DISABLE_INTERCOM__ '${APPSMITH_DISABLE_INTERCOM}';
+        sub_filter __APPSMITH_DISABLE_BETTERBUGS__ '${APPSMITH_DISABLE_BETTERBUGS}';
         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}';

app/client/jest.config.js

@@ -82,6 +82,9 @@ module.exports = {
       smartLook: {
         id: parseConfig("__APPSMITH_SMART_LOOK_ID__"),
       },
+      betterbugs: {
+        apiKey: parseConfig("__APPSMITH_BETTERBUGS_API_KEY__"),
+      },
       segment: {
         apiKey: parseConfig("__APPSMITH_SEGMENT_KEY__"),
         ceKey: parseConfig("__APPSMITH_SEGMENT_CE_KEY__"),

app/client/package.json

@@ -51,6 +51,7 @@
     "@appsmith/wds-theming": "workspace:^",
     "@aws-sdk/client-s3": "^3.622.0",
     "@aws-sdk/lib-storage": "^3.622.0",
+    "@betterbugs/web-sdk": "^0.0.40",
     "@blueprintjs/core": "^3.43.0",
     "@blueprintjs/datetime": "^3.23.6",
     "@blueprintjs/icons": "3.22.0",

app/client/public/index.html

@@ -160,6 +160,7 @@
         parseConfig("%REACT_APP_INTERCOM_APP_ID%") ||
         parseConfig('{{env "APPSMITH_INTERCOM_APP_ID"}}');
       const DISABLE_INTERCOM = parseConfig('{{env "APPSMITH_DISABLE_INTERCOM"}}');
+      const DISABLE_BETTERBUGS = parseConfig('{{env "APPSMITH_DISABLE_BETTERBUGS"}}');
 
       // Initialize the Intercom library
       if (INTERCOM_APP_ID.length && !DISABLE_INTERCOM) {
@@ -208,6 +209,9 @@
         smartLook: {
           id: parseConfig('{{env "APPSMITH_SMART_LOOK_ID"}}'),
         },
+        betterbugs: {
+          apiKey: DISABLE_BETTERBUGS ? '' : parseConfig('{{env "APPSMITH_BETTERBUGS_API_KEY"}}'),
+        },
         segment: {
           apiKey: parseConfig('{{env "APPSMITH_SEGMENT_KEY"}}'),
           ceKey: parseConfig('{{env "APPSMITH_SEGMENT_CE_KEY"}}'),

app/client/src/RouteChangeListener.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
 import { useLocation } from "react-router";
 import type { AppsmithLocationState } from "utils/history";
+import BetterbugsUtil from "utils/Analytics/betterbugs";
 
 export default function RouteChangeListener() {
   const location = useLocation<AppsmithLocationState>();
@@ -13,6 +14,7 @@ export default function RouteChangeListener() {
     const prevLocation = prevLocationRef;
 
     dispatch(routeChanged(location, prevLocation.current));
+    BetterbugsUtil.updateMetadata();
     prevLocation.current = location;
   }, [location.pathname, location.hash]);
 

app/client/src/ce/configs/index.ts

@@ -9,6 +9,9 @@ export interface INJECTED_CONFIGS {
   smartLook: {
     id: string;
   };
+  betterbugs: {
+    apiKey: string;
+  };
   segment: {
     apiKey: string;
     ceKey: string;
@@ -61,6 +64,9 @@ export const getConfigsFromEnvVars = (): INJECTED_CONFIGS => {
     smartLook: {
       id: process.env.REACT_APP_SMART_LOOK_ID || "",
     },
+    betterbugs: {
+      apiKey: process.env.REACT_APP_BETTERBUGS_API_KEY || "",
+    },
     segment: {
       apiKey: process.env.REACT_APP_SEGMENT_KEY || "",
       ceKey: process.env.REACT_APP_SEGMENT_CE_KEY || "",
@@ -172,6 +178,11 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
     APPSMITH_FEATURE_CONFIGS?.smartLook.id,
   );
 
+  const betterbugs = getConfig(
+    ENV_CONFIG.betterbugs.apiKey,
+    APPSMITH_FEATURE_CONFIGS?.betterbugs?.apiKey,
+  );
+
   const segmentCEKey = getConfig(
     ENV_CONFIG.segment.ceKey,
     APPSMITH_FEATURE_CONFIGS?.segment.ceKey,
@@ -193,6 +204,10 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
       enabled: smartLook.enabled,
       id: smartLook.value,
     },
+    betterbugs: {
+      enabled: betterbugs.enabled,
+      apiKey: betterbugs.value,
+    },
     segment: {
       enabled: segment.enabled,
       apiKey: segment.value,

app/client/src/ce/configs/types.ts

@@ -20,6 +20,10 @@ export interface AppsmithUIConfigs {
     enabled: boolean;
     id: string;
   };
+  betterbugs: {
+    enabled: boolean;
+    apiKey: string;
+  };
   observability: {
     deploymentName: string;
     serviceInstanceId: string;

app/client/src/ce/constants/messages.ts

@@ -899,6 +899,7 @@ export const NAME_YOUR_NEW_BRANCH = () => "Name your new branch";
 export const SWITCH_BRANCHES = () => "Switch branches";
 
 export const DOCUMENTATION = () => "Documentation";
+export const SEND_SUPPORT_INFO = () => "Send support info";
 export const DOCUMENTATION_TOOLTIP = () => "Open docs in new tab";
 export const CONNECT = () => "Connect";
 export const LATEST_DP_TITLE = () => "Latest deployed preview";

app/client/src/pages/Editor/HelpButton.tsx

@@ -39,8 +39,11 @@ import { getInstanceId } from "ee/selectors/organizationSelectors";
 import { updateIntercomConsent, updateUserDetails } from "actions/userActions";
 import { getIsAiAgentApp } from "ee/selectors/aiAgentSelectors";
 import { DOCS_AI_BASE_URL } from "constants/ThirdPartyConstants";
+import BetterbugsUtil from "utils/Analytics/betterbugs";
+import { isAirgapped } from "ee/utils/airgapHelpers";
 
-const { appVersion, cloudHosting, intercomAppID } = getAppsmithConfigs();
+const { appVersion, betterbugs, cloudHosting, intercomAppID } =
+  getAppsmithConfigs();
 
 const HelpFooter = styled.div`
   display: flex;
@@ -87,6 +90,14 @@ let HELP_MENU_ITEMS: HelpItem[] = [
   },
 ];
 
+if (betterbugs.enabled && !isAirgapped()) {
+  HELP_MENU_ITEMS.push({
+    icon: "support",
+    label: "Send support info",
+    id: "betterbugs-trigger",
+  });
+}
+
 if (intercomAppID && window.Intercom) {
   HELP_MENU_ITEMS.push({
     icon: "chat-help",
@@ -292,6 +303,11 @@ function HelpButton() {
                         }
                       }
                     }
+
+                    if (item.id === "betterbugs-trigger") {
+                      e?.preventDefault();
+                      BetterbugsUtil.show(user);
+                    }
                   }}
                   startIcon={item.icon}
                 >

app/client/src/pages/common/SearchBar/HomepageHeaderAction.tsx

@@ -5,6 +5,7 @@ import {
   CHAT_WITH_US,
   DOCUMENTATION,
   HELP,
+  SEND_SUPPORT_INFO,
   WHATS_NEW,
   createMessage,
 } from "ee/constants/messages";
@@ -41,7 +42,9 @@ import { DOCS_AI_BASE_URL, DOCS_BASE_URL } from "constants/ThirdPartyConstants";
 import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
 import styled from "styled-components";
 import { getIsAiAgentInstanceEnabled } from "ee/selectors/aiAgentSelectors";
-const { cloudHosting, intercomAppID } = getAppsmithConfigs();
+import BetterbugsUtil from "utils/Analytics/betterbugs";
+
+const { betterbugs, cloudHosting, intercomAppID } = getAppsmithConfigs();
 
 export const VersionData = styled.div`
   display: flex;
@@ -141,6 +144,16 @@ const HomepageHeaderAction = ({
                 >
                   {createMessage(DOCUMENTATION)}
                 </MenuItem>
+                {betterbugs.enabled && !isAirgapped() && (
+                  <MenuItem
+                    onClick={() => {
+                      BetterbugsUtil.show(user);
+                    }}
+                    startIcon="support"
+                  >
+                    {createMessage(SEND_SUPPORT_INFO)}
+                  </MenuItem>
+                )}
                 {intercomAppID && window.Intercom && !isAirgapped() && (
                   <MenuItem
                     onSelect={(e) => {