Make integrations toggle-able during build

care.config.ts

@@ -90,10 +90,8 @@ const careConfig = {
   },
 
   sentry: {
-    dsn:
-      env.REACT_SENTRY_DSN ||
-      "https://[email protected]/5183632",
-    environment: env.REACT_SENTRY_ENVIRONMENT || "staging",
+    dsn: env.REACT_SENTRY_DSN,
+    environment: env.REACT_SENTRY_ENVIRONMENT || "unknown",
   },
 
   hcx: {

src/App.tsx

@@ -26,7 +26,6 @@ const App = () => {
             </AuthUserProvider>
 
             {/* Integrations */}
-            <Integrations.Sentry disabled={!import.meta.env.PROD} />
             <Integrations.Plausible />
           </HistoryAPIProvider>
           <Toaster />

src/Integrations/Plausible-disabled.tsx

@@ -0,0 +1,5 @@
+export default function Plausible() {
+  return null;
+}
+
+export const triggerGoal = (_: string, __: object): void => {};

src/Integrations/Sentry-disabled.tsx

@@ -0,0 +1,3 @@
+export function initSentry(): void {}
+
+export function captureException(_: any): void {}

src/Integrations/Sentry.tsx

@@ -1,23 +1,21 @@
 import careConfig from "@careConfig";
-import { useEffect } from "react";
+import * as Sentry from "@sentry/browser";
 
-interface Props {
-  disabled?: boolean;
+export function initSentry() {
+  if (!careConfig.sentry.dsn || !careConfig.sentry.environment) {
+    console.error(
+      "Sentry is not configured correctly. Please check your environment variables.",
+    );
+    return;
+  }
+  Sentry.init(careConfig.sentry);
 }
 
-export default function Sentry({ disabled }: Props) {
-  useEffect(() => {
-    if (disabled || !careConfig.sentry.dsn || !careConfig.sentry.environment) {
-      console.error(
-        "Sentry is not configured correctly. Please check your environment variables.",
-      );
-      return;
-    }
-
-    import("@sentry/browser").then((Sentry) => {
-      Sentry.init(careConfig.sentry);
-    });
-  }, [disabled]);
-
-  return null;
+/**
+ * Captures an exception and sends it to Sentry for monitoring and logging.
+ *
+ * @param {any} error - The error object that needs to be captured and sent to Sentry.
+ */
+export function captureException(error: any) {
+  Sentry.captureException(error);
 }

src/Integrations/index.tsx

@@ -1,6 +1,5 @@
 import Plausible from "@/Integrations/Plausible";
-import Sentry from "@/Integrations/Sentry";
 
-const Integrations = { Sentry, Plausible };
+const Integrations = { Plausible };
 
 export default Integrations;

src/Integrations/types.d.ts

@@ -0,0 +1,9 @@
+declare module "@/Integrations/Sentry" {
+  export function initSentry(): void;
+  export function captureException(error: any): void;
+}
+
+declare module "@/Integrations/Plausible" {
+  export default function Plausible(): JSX.Element | null;
+  export function triggerGoal(goal: string, props: object): void;
+}

src/components/Notifications/NotificationsList.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/browser";
 import { navigate } from "raviger";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,6 +18,7 @@ import useAuthUser from "@/hooks/useAuthUser";
 
 import { NOTIFICATION_EVENTS } from "@/common/constants";
 
+import { captureException } from "@/Integrations/Sentry";
 import { Error, Success, Warn } from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
@@ -238,7 +238,7 @@ export default function NotificationsList({
         setIsSubscribed("SubscribedOnAnotherDevice");
       }
     } catch (error) {
-      Sentry.captureException(error);
+      captureException(error);
     }
   };
 
@@ -325,7 +325,7 @@ export default function NotificationsList({
           });
       })
       .catch(function (_e) {
-        Sentry.captureException(_e);
+        captureException(_e);
       });
   };
 

src/hooks/useNotificationSubscriptionState.ts

@@ -1,8 +1,8 @@
-import * as Sentry from "@sentry/browser";
 import { useEffect, useState } from "react";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
+import { captureException } from "@/Integrations/Sentry";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 
@@ -45,7 +45,7 @@ export default function useNotificationSubscriptionState(
       }
     } catch (error) {
       setSubscriptionState("error");
-      Sentry.captureException(error);
+      captureException(error);
     }
   };
 

src/index.tsx

@@ -1,20 +1,17 @@
-import * as Sentry from "@sentry/browser";
 import { createRoot } from "react-dom/client";
 import { registerSW } from "virtual:pwa-register";
 
 import App from "@/App";
+import { initSentry } from "@/Integrations/Sentry";
 import "@/i18n";
 import "@/style/index.css";
 
-if ("serviceWorker" in navigator) {
-  registerSW({ immediate: false });
+if (import.meta.env.PROD) {
+  initSentry();
 }
 
-if (import.meta.env.PROD) {
-  Sentry.init({
-    environment: import.meta.env.MODE,
-    dsn: "https://[email protected]/5183632",
-  });
+if ("serviceWorker" in navigator) {
+  registerSW({ immediate: false });
 }
 
 const root = createRoot(document.getElementById("root") as HTMLElement);

src/vite-env.d.ts

@@ -34,8 +34,10 @@ interface ImportMetaEnv {
   readonly REACT_ENABLED_APPS?: string;
 
   // Plugins related envs...
+  readonly REACT_PLAUSIBLE_ENABLED?: string;
   readonly REACT_PLAUSIBLE_SERVER_URL?: string;
   readonly REACT_PLAUSIBLE_SITE_DOMAIN?: string;
+  readonly REACT_SENTRY_ENABLED?: string;
   readonly REACT_SENTRY_DSN?: string;
   readonly REACT_SENTRY_ENVIRONMENT?: string;
   readonly REACT_ENABLE_HCX?: string;

vite.config.mts

@@ -59,6 +59,27 @@ function getPluginAliases() {
   return aliases;
 }
 
+function getIntegrationsAlias(env: Record<string, string>) {
+  const integrationsImportAlias = "@/Integrations";
+  const integrationsImportPath = "./src/Integrations";
+  const integrations = {
+    Sentry: env.REACT_SENTRY_ENABLED === "true",
+    Plausible: env.REACT_PLAUSIBLE_ENABLED === "true",
+  };
+  const importMap: Record<string, string> = {};
+
+  Object.entries(integrations).forEach(([name, enabled]) => {
+    importMap[`${integrationsImportAlias}/${name}`] = path.resolve(
+      __dirname,
+      enabled
+        ? `${integrationsImportPath}/${name}`
+        : `${integrationsImportPath}/${name}-disabled`,
+    );
+  });
+
+  return importMap;
+}
+
 function getPluginDependencies(): string[] {
   const pluginsDir = path.resolve(__dirname, "apps");
   // Make sure the `apps` folder exists
@@ -181,6 +202,7 @@ export default defineConfig(({ mode }) => {
     ],
     resolve: {
       alias: {
+        ...getIntegrationsAlias(env),
         ...getPluginAliases(),
         "@": path.resolve(__dirname, "./src"),
         "@careConfig": path.resolve(__dirname, "./care.config.ts"),