fix(frontend): avoid Sentry initialisation and warnings on local dev (#10125)

## Changes 🏗️ We were getting the following warnings in the console when running the local server: ``` ⚠ ./node_modules/.pnpm/@sentry+node@9.26.0/node_modules/@sentry/node/build/cjs/sdk Package import-in-the-middle can't be external The request import-in-the-middle matches serverExternalPackages (or the default list). The request could not be resolved by Node.js from the project directory. Packages that should be external need to be installed in the project directory, so they can be resolved from the output files. Try to install it into the project directory by running npm install import-in-the-middle from the project directory. ``` ### Why were the warnings happening? The Sentry SDK for Next.js tries to hook into Node.js internals using packages like `import-in-the-middle` and `require-in-the-middle`. When Sentry is imported at the top level on a file (even if not enabled), it tries to load these dependencies... If they are not installed, then we get these warnings... ### Why does installing the packages fix it? By installing `import-in-the-middle` and `require-in-the-middle` as dev dependencies, Sentry finds them and the warnings disappear. This is a safe workaround for local/dev, and does not affect production. ### Loading Sentry conditionally One way to avoid these warnings ⚠️ is by loading Sentry conditionally. That is the approach I took in an earlier PR. However I realised that it would have to apply to any file importing Sentry: ```ts import * as Sentry from "@sentry/nextjs"; ``` which would end quite messy and affecting a lot of files. I realised installing the packages is just simpler ( _they won't in the bundle or affect page load_ ) and using `enabled` in the Sentry initialisation is also cleaner. ## Checklist 📋 ### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] There are not Sentry warnings when running the local dev server ( with or without `--turbo` ) - [x] Sentry still reports issues in production or staging ( _but not locally_ )
2026-01-09 15:17:59 -05:00 · 2025-06-10 14:20:32 +04:00
parent 4a03e5cbaf
commit 2f16511f24
5 changed files with 70 additions and 49 deletions
--- a/autogpt_platform/frontend/instrumentation-client.ts
+++ b/autogpt_platform/frontend/instrumentation-client.ts
@@ -2,61 +2,64 @@
 // The config you add here will be used whenever a users loads a page in their browser.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/

-import { getEnvironmentStr } from "@/lib/utils";
+import { BehaveAs, getBehaveAs, getEnvironmentStr } from "@/lib/utils";
 import * as Sentry from "@sentry/nextjs";

-if (process.env.NODE_ENV === "production") {
-  Sentry.init({
-    dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
+const isProductionCloud =
+  process.env.NODE_ENV === "production" && getBehaveAs() === BehaveAs.CLOUD;

-    environment: getEnvironmentStr(),
+Sentry.init({
+  dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",

-    // Add optional integrations for additional features
-    integrations: [
-      Sentry.replayIntegration(),
-      Sentry.httpClientIntegration(),
-      Sentry.replayCanvasIntegration(),
-      Sentry.reportingObserverIntegration(),
-      Sentry.browserProfilingIntegration(),
-      // Sentry.feedbackIntegration({
-      //   // Additional SDK configuration goes in here, for example:
-      //   colorScheme: "system",
-      // }),
-    ],
+  environment: getEnvironmentStr(),

-    // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-    tracesSampleRate: 1,
+  enabled: isProductionCloud,

-    // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
-    tracePropagationTargets: [
-      "localhost",
-      "localhost:8006",
-      /^https:\/\/dev\-builder\.agpt\.co\/api/,
-      /^https:\/\/.*\.agpt\.co\/api/,
-    ],
+  // Add optional integrations for additional features
+  integrations: [
+    Sentry.replayIntegration(),
+    Sentry.httpClientIntegration(),
+    Sentry.replayCanvasIntegration(),
+    Sentry.reportingObserverIntegration(),
+    Sentry.browserProfilingIntegration(),
+    // Sentry.feedbackIntegration({
+    //   // Additional SDK configuration goes in here, for example:
+    //   colorScheme: "system",
+    // }),
+  ],

-    // Define how likely Replay events are sampled.
-    // This sets the sample rate to be 10%. You may want this to be 100% while
-    // in development and sample at a lower rate in production
-    replaysSessionSampleRate: 0.1,
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,

-    // Define how likely Replay events are sampled when an error occurs.
-    replaysOnErrorSampleRate: 1.0,
+  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
+  tracePropagationTargets: [
+    "localhost",
+    "localhost:8006",
+    /^https:\/\/dev\-builder\.agpt\.co\/api/,
+    /^https:\/\/.*\.agpt\.co\/api/,
+  ],

-    // Setting this option to true will print useful information to the console while you're setting up Sentry.
-    debug: false,
+  // Define how likely Replay events are sampled.
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,

-    // Set profilesSampleRate to 1.0 to profile every transaction.
-    // Since profilesSampleRate is relative to tracesSampleRate,
-    // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
-    // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
-    // result in 25% of transactions being profiled (0.5*0.5=0.25)
-    profilesSampleRate: 1.0,
-    _experiments: {
-      // Enable logs to be sent to Sentry.
-      enableLogs: true,
-    },
-  });
-}
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  // Set profilesSampleRate to 1.0 to profile every transaction.
+  // Since profilesSampleRate is relative to tracesSampleRate,
+  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
+  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
+  // result in 25% of transactions being profiled (0.5*0.5=0.25)
+  profilesSampleRate: 1.0,
+  _experiments: {
+    // Enable logs to be sent to Sentry.
+    enableLogs: true,
+  },
+});

 export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
--- a/autogpt_platform/frontend/package.json
+++ b/autogpt_platform/frontend/package.json
@@ -114,11 +114,13 @@
    "eslint": "8.57.1",
    "eslint-config-next": "15.3.3",
    "eslint-plugin-storybook": "0.12.0",
+    "import-in-the-middle": "1.14.0",
    "msw": "2.9.0",
    "msw-storybook-addon": "2.0.4",
    "postcss": "8.5.4",
    "prettier": "3.5.3",
    "prettier-plugin-tailwindcss": "0.6.12",
+    "require-in-the-middle": "7.5.2",
    "storybook": "8.6.14",
    "tailwindcss": "3.4.17",
    "typescript": "5.8.3"
--- a/autogpt_platform/frontend/pnpm-lock.yaml
+++ b/autogpt_platform/frontend/pnpm-lock.yaml
@@ -273,6 +273,9 @@ importers:
      eslint-plugin-storybook:
        specifier: 0.12.0
        version: 0.12.0(eslint@8.57.1)(typescript@5.8.3)
+      import-in-the-middle:
+        specifier: 1.14.0
+        version: 1.14.0
      msw:
        specifier: 2.9.0
        version: 2.9.0(@types/node@22.15.29)(typescript@5.8.3)
@@ -288,6 +291,9 @@ importers:
      prettier-plugin-tailwindcss:
        specifier: 0.6.12
        version: 0.6.12(prettier@3.5.3)
+      require-in-the-middle:
+        specifier: 7.5.2
+        version: 7.5.2
      storybook:
        specifier: 8.6.14
        version: 8.6.14(prettier@3.5.3)
@@ -15281,7 +15287,7 @@ snapshots:
    dependencies:
      debug: 4.4.1
      module-details-from-path: 1.0.4
-      resolve: 1.22.8
+      resolve: 1.22.10
    transitivePeerDependencies:
      - supports-color

--- a/autogpt_platform/frontend/sentry.edge.config.ts
+++ b/autogpt_platform/frontend/sentry.edge.config.ts
@@ -4,13 +4,18 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/

 import * as Sentry from "@sentry/nextjs";
-import { getEnvironmentStr } from "./src/lib/utils";
+import { BehaveAs, getBehaveAs, getEnvironmentStr } from "./src/lib/utils";
+
+const isProductionCloud =
+  process.env.NODE_ENV === "production" && getBehaveAs() === BehaveAs.CLOUD;

 Sentry.init({
  dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",

  environment: getEnvironmentStr(),

+  enabled: isProductionCloud,
+
  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,
  tracePropagationTargets: [
--- a/autogpt_platform/frontend/sentry.server.config.ts
+++ b/autogpt_platform/frontend/sentry.server.config.ts
@@ -2,15 +2,20 @@
 // The config you add here will be used whenever the server handles a request.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/

-import { getEnvironmentStr } from "@/lib/utils";
+import { BehaveAs, getBehaveAs, getEnvironmentStr } from "@/lib/utils";
 import * as Sentry from "@sentry/nextjs";
 // import { NodeProfilingIntegration } from "@sentry/profiling-node";

+const isProductionCloud =
+  process.env.NODE_ENV === "production" && getBehaveAs() === BehaveAs.CLOUD;
+
 Sentry.init({
  dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",

  environment: getEnvironmentStr(),

+  enabled: isProductionCloud,
+
  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,
  tracePropagationTargets: [