feat(frontend, backend): track sentry environment on frontend + sentry init in app services (#9773)

<!-- Clearly explain the need for these changes: -->
We want to be able to filter errors according to where they occur in
sentry so we need to track and include that data. We also are not
logging everything from app services correctly so fix that up

### Changes 🏗️

<!-- Concisely describe all of the changes made in this pull request:
-->
- Adds env tracking for frontend
- adds sentry init in app service spawn

### 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:
  <!-- Put your test plan here: -->
- [x] Tested by running and making sure all events + logs are inserted
into sentry correctly

autogpt_platform/backend/backend/util/service.py

@@ -25,6 +25,7 @@ from pydantic import BaseModel, TypeAdapter, create_model
 
 from backend.util.exceptions import InsufficientBalanceError
 from backend.util.json import to_dict
+from backend.util.metrics import sentry_init
 from backend.util.process import AppProcess, get_service_name
 from backend.util.retry import conn_retry
 from backend.util.settings import Config
@@ -196,6 +197,7 @@ class AppService(BaseAppService, ABC):
         self.shared_event_loop.run_until_complete(server.serve())
 
     def run(self):
+        sentry_init()
         super().run()
         self.fastapi_app = FastAPI()
 

autogpt_platform/frontend/.env.example

@@ -4,7 +4,7 @@ NEXT_PUBLIC_AGPT_WS_SERVER_URL=ws://localhost:8001/ws
 NEXT_PUBLIC_AGPT_MARKETPLACE_URL=http://localhost:8015/api/v1/market
 NEXT_PUBLIC_LAUNCHDARKLY_ENABLED=false
 NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID=
-NEXT_PUBLIC_APP_ENV=dev
+NEXT_PUBLIC_APP_ENV=local
 
 ## Locale settings
 

autogpt_platform/frontend/instrumentation-client.ts

@@ -2,12 +2,14 @@
 // 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 * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
   dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
 
   enabled: process.env.DISABLE_SENTRY !== "true",
+  environment: getEnvironmentStr(),
 
   // Add optional integrations for additional features
   integrations: [
@@ -28,7 +30,9 @@ Sentry.init({
   // 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/,
   ],
 
   // Define how likely Replay events are sampled.
@@ -48,4 +52,8 @@ Sentry.init({
   // 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,
+  },
 });

autogpt_platform/frontend/sentry.edge.config.ts

@@ -4,15 +4,28 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from "@sentry/nextjs";
+import { getEnvironmentStr } from "./src/lib/utils";
 
 Sentry.init({
   dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
 
   enabled: process.env.NODE_ENV !== "development",
+  environment: getEnvironmentStr(),
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,
+  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,
+
+  _experiments: {
+    // Enable logs to be sent to Sentry.
+    enableLogs: true,
+  },
 });

autogpt_platform/frontend/sentry.server.config.ts

@@ -2,6 +2,7 @@
 // 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 * as Sentry from "@sentry/nextjs";
 // import { NodeProfilingIntegration } from "@sentry/profiling-node";
 
@@ -9,9 +10,16 @@ Sentry.init({
   dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
 
   enabled: process.env.NODE_ENV !== "development",
+  environment: getEnvironmentStr(),
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,
+  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,
@@ -22,4 +30,9 @@ Sentry.init({
     // NodeProfilingIntegration,
     // Sentry.fsIntegration(),
   ],
+
+  _experiments: {
+    // Enable logs to be sent to Sentry.
+    enableLogs: true,
+  },
 });

autogpt_platform/frontend/src/lib/utils.ts

@@ -245,6 +245,25 @@ export function getBehaveAs(): BehaveAs {
     : BehaveAs.LOCAL;
 }
 
+export enum AppEnv {
+  LOCAL = "local",
+  DEV = "dev",
+  PROD = "prod",
+}
+
+export function getAppEnv(): AppEnv {
+  const env = process.env.NEXT_PUBLIC_APP_ENV;
+  if (env === "dev") return AppEnv.DEV;
+  if (env === "prod") return AppEnv.PROD;
+  // Some places use prod and others production
+  if (env === "production") return AppEnv.PROD;
+  return AppEnv.LOCAL;
+}
+
+export function getEnvironmentStr(): string {
+  return `app:${getAppEnv().toLowerCase()}-behave:${getBehaveAs().toLowerCase()}`;
+}
+
 function rectanglesOverlap(
   rect1: { x: number; y: number; width: number; height?: number },
   rect2: { x: number; y: number; width: number; height?: number },