fix(frontend): Fix environment variable handling in Docker builds for dev/prod deployments (#10859)

<!-- Clearly explain the need for these changes: -->
Sentry was not being enabled in dev/prod deployments because environment
variables were being incorrectly overwritten during the Docker build
process.

### Changes 🏗️

- Fixed Dockerfile environment variable merging logic to prevent
`.env.default` from overwriting `.env.production` values
- Added `NODE_ENV=production` to build stage to ensure Next.js looks for
production env files
- Updated env file merging to only run when not in CI/CD (when
`.env.production` doesn't exist)
- When `.env.production` exists (CI/CD), now merges defaults with
production values properly

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] Verify local Docker builds still work with `docker compose up`
- [ ] Verify dev deployment has `NEXT_PUBLIC_APP_ENV=dev` in built
JavaScript
- [ ] Verify prod deployment has `NEXT_PUBLIC_APP_ENV=prod` in built
JavaScript
- [ ] Verify Sentry is enabled in dev/prod deployments
(`isProdOrDev=true`)

#### For configuration changes:

- [x] `.env.default` is updated or already compatible with my changes
- [x] `docker-compose.yml` is updated or already compatible with my
changes
- [x] I have included a list of my configuration changes in the PR
description (under **Changes**)

### Technical Details

**Root Cause:**
1. CI/CD workflow creates `.env.production` with correct values (e.g.,
`NEXT_PUBLIC_APP_ENV=dev`)
2. Dockerfile's env merging logic always created `.env` from
`.env.default`
3. Next.js loads `.env.production` first, then `.env` second
4. Since `.env` is loaded after `.env.production`, it overwrites the
values
5. `.env.default` has `NEXT_PUBLIC_APP_ENV=local`, causing `getAppEnv()`
to return "local" instead of "dev"/"prod"
6. This made `isProdOrDev` evaluate to `false`, disabling Sentry

**Solution:**
The Dockerfile now checks if `.env.production` exists:
- If yes (CI/CD): Merges `.env.default` + `.env.production` →
`.env.production` (production values take precedence)
- If no (local): Merges `.env.default` + `.env` → `.env` (user values
take precedence)

This ensures production deployments get the correct environment
variables while preserving local development workflow.

🤖 Description generated + Investigation assisted with [Claude
Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Reinier van der Leer <pwuts@agpt.co>

autogpt_platform/frontend/.prettierignore

@@ -4,3 +4,5 @@ pnpm-lock.yaml
 .auth
 build
 public
+Dockerfile
+.prettierignore

autogpt_platform/frontend/Dockerfile

@@ -12,9 +12,16 @@ COPY autogpt_platform/frontend/ .
 # Allow CI to opt-in to Playwright test build-time flags
 ARG NEXT_PUBLIC_PW_TEST="false"
 ENV NEXT_PUBLIC_PW_TEST=$NEXT_PUBLIC_PW_TEST
-RUN if [ -f .env ]; then \
+ENV NODE_ENV="production"
+# Merge env files appropriately based on environment
+RUN if [ -f .env.production ]; then \
+      # In CI/CD: merge defaults with production (production takes precedence)
+      cat .env.default .env.production > .env.merged && mv .env.merged .env.production; \
+    elif [ -f .env ]; then \
+      # Local with custom .env: merge defaults with .env
       cat .env.default .env > .env.merged && mv .env.merged .env; \
     else \
+      # Local without custom .env: use defaults
       cp .env.default .env; \
     fi
 RUN pnpm run generate:api

autogpt_platform/frontend/instrumentation-client.ts

@@ -2,12 +2,16 @@
 // 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 { BehaveAs, getBehaveAs, getEnvironmentStr } from "@/lib/utils";
+import {
+  AppEnv,
+  BehaveAs,
+  getAppEnv,
+  getBehaveAs,
+  getEnvironmentStr,
+} from "@/lib/utils";
 import * as Sentry from "@sentry/nextjs";
 
-const isProdOrDev =
-  process.env.NODE_ENV === "production" ||
-  process.env.NODE_ENV === "development";
+const isProdOrDev = [AppEnv.PROD, AppEnv.DEV].includes(getAppEnv());
 
 const isCloud = getBehaveAs() === BehaveAs.CLOUD;
 const isDisabled = process.env.DISABLE_SENTRY === "true";

autogpt_platform/frontend/sentry.edge.config.ts

@@ -4,11 +4,15 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from "@sentry/nextjs";
-import { BehaveAs, getBehaveAs, getEnvironmentStr } from "./src/lib/utils";
+import {
+  AppEnv,
+  BehaveAs,
+  getAppEnv,
+  getBehaveAs,
+  getEnvironmentStr,
+} from "./src/lib/utils";
 
-const isProdOrDev =
-  process.env.NODE_ENV === "production" ||
-  process.env.NODE_ENV === "development";
+const isProdOrDev = [AppEnv.PROD, AppEnv.DEV].includes(getAppEnv());
 
 const isCloud = getBehaveAs() === BehaveAs.CLOUD;
 const isDisabled = process.env.DISABLE_SENTRY === "true";

autogpt_platform/frontend/sentry.server.config.ts

@@ -2,13 +2,17 @@
 // The config you add here will be used whenever the server handles a request.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import { BehaveAs, getBehaveAs, getEnvironmentStr } from "@/lib/utils";
+import {
+  AppEnv,
+  BehaveAs,
+  getAppEnv,
+  getBehaveAs,
+  getEnvironmentStr,
+} from "@/lib/utils";
 import * as Sentry from "@sentry/nextjs";
 // import { NodeProfilingIntegration } from "@sentry/profiling-node";
 
-const isProdOrDev =
-  process.env.NODE_ENV === "production" ||
-  process.env.NODE_ENV === "development";
+const isProdOrDev = [AppEnv.PROD, AppEnv.DEV].includes(getAppEnv());
 
 const isCloud = getBehaveAs() === BehaveAs.CLOUD;
 const isDisabled = process.env.DISABLE_SENTRY === "true";