@superblocksteam/sdk 2.0.3-next.174 → 2.0.3-next.176

package/dist/vite-plugin-inject-sb-ids-transform.mjs

@@ -0,0 +1,86 @@
+import path from "node:path";
+import babelGenerate from "@babel/generator";
+import { parse } from "@babel/parser";
+import { supplementElementIds, generateRootSource, } from "@superblocksteam/vite-plugin-file-sync";
+import { yellow, red } from "colorette";
+import fs from "fs-extra";
+import { createLogger } from "vite";
+import { getLogger } from "./dev-utils/dev-logger.mjs";
+const routesFileBaseName = "routes.json";
+/**
+ * Creates a Vite plugin that injects Superblocks IDs into the application.
+ * This will primarily be used during builds, as the dev server leverages the
+ * file sync manager to inject and keep the IDs up to date.
+ *
+ * Features:
+ * - Injects the root component with the routes data
+ * - Injects Superblocks IDs into all components
+ *
+ * @param root - The root directory of the application
+ * @returns A Vite plugin that injects Superblocks IDs into the application's components
+ */
+export async function injectSuperblocksIdsPlugin(root) {
+    const viteLogger = createLogger();
+    const logger = getLogger();
+    viteLogger.info = logger.info;
+    viteLogger.warn = (msg) => {
+        logger.warn(yellow(msg));
+    };
+    viteLogger.warnOnce = (msg) => {
+        logger.warn(yellow(msg));
+    };
+    viteLogger.error = (msg) => {
+        logger.error(red(msg));
+    };
+    viteLogger.clearScreen = () => { };
+    const routes = await getRoutes(root, viteLogger);
+    return {
+        name: "sb-inject-superblocks-ids",
+        enforce: "pre",
+        transform(code, id) {
+            const relativePath = path.relative(root, id);
+            if (relativePath === "root.tsx") {
+                const source = generateRootSource(code, routes);
+                return {
+                    code: source,
+                    map: null,
+                };
+            }
+            else if (id.endsWith(".tsx")) {
+                const ast = parse(code, {
+                    sourceType: "module",
+                    sourceFilename: id,
+                    plugins: ["jsx"],
+                });
+                supplementElementIds({
+                    fileName: id,
+                    ast,
+                    shouldModifyAst: true,
+                });
+                const result = babelGenerate.default(ast);
+                return result.code;
+            }
+            return code;
+        },
+    };
+}
+async function getRoutes(root, logger) {
+    const routesFile = path.join(root, routesFileBaseName);
+    if (!(await fs.pathExists(routesFile))) {
+        logger.warn(`routes file not found at expected location: ${routesFile}`);
+        return [];
+    }
+    try {
+        const routesData = await fs.readFile(routesFile, "utf-8");
+        const routes = JSON.parse(routesData);
+        return Object.entries(routes).map(([path, { file }]) => ({
+            path,
+            component: file,
+        }));
+    }
+    catch (err) {
+        logger.error(`error reading routes file: ${routesFile}. error=[${JSON.stringify(err)}]`);
+    }
+    return [];
+}
+//# sourceMappingURL=vite-plugin-inject-sb-ids-transform.mjs.map

package/dist/vite-plugin-inject-sb-ids-transform.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin-inject-sb-ids-transform.mjs","sourceRoot":"","sources":["../src/vite-plugin-inject-sb-ids-transform.mts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAIvD,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAEzC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,KAAK,UAAU,0BAA0B,CAAC,IAAY;IAC3D,MAAM,UAAU,GAAG,YAAY,EAAE,CAAC;IAClC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IAC9B,UAAU,CAAC,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE;QAChC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,UAAU,CAAC,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,UAAU,CAAC,KAAK,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,UAAU,CAAC,WAAW,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IAElC,MAAM,MAAM,GAAoB,MAAM,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAElE,OAAO;QACL,IAAI,EAAE,2BAA2B;QACjC,OAAO,EAAE,KAAK;QAEd,SAAS,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAE7C,IAAI,YAAY,KAAK,UAAU,EAAE,CAAC;gBAChC,MAAM,MAAM,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBAChD,OAAO;oBACL,IAAI,EAAE,MAAM;oBACZ,GAAG,EAAE,IAAI;iBACV,CAAC;YACJ,CAAC;iBAAM,IAAI,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC/B,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE;oBACtB,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,EAAE;oBAClB,OAAO,EAAE,CAAC,KAAK,CAAC;iBACjB,CAAC,CAAC;gBAEH,oBAAoB,CAAC;oBACnB,QAAQ,EAAE,EAAE;oBACZ,GAAG;oBACH,eAAe,EAAE,IAAI;iBACtB,CAAC,CAAC;gBAEH,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;gBAC1C,OAAO,MAAM,CAAC,IAAI,CAAC;YACrB,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC;KACQ,CAAC;AACd,CAAC;AAED,KAAK,UAAU,SAAS,CAAC,IAAY,EAAE,MAAc;IACnD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;IACvD,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC;QACvC,MAAM,CAAC,IAAI,CAAC,+CAA+C,UAAU,EAAE,CAAC,CAAC;QACzE,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAqC,CAAC;QAE1E,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,IAAI;YACJ,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC,CAAC;IACN,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,MAAM,CAAC,KAAK,CACV,8BAA8B,UAAU,YAAY,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAC3E,CAAC;IACJ,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/sdk",
-  "version": "2.0.3-next.174",
+  "version": "2.0.3-next.176",
   "type": "module",
   "description": "Superblocks JS SDK",
   "homepage": "https://www.superblocks.com",
@@ -16,16 +16,23 @@
     }
   },
   "dependencies": {
+    "@babel/core": "7.24.0",
+    "@babel/generator": "^7.25.7",
+    "@babel/parser": "^7.25.8",
+    "@babel/traverse": "^7.25.7",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^2.0.1",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.55.0",
     "@opentelemetry/instrumentation-express": "^0.45.0",
     "@opentelemetry/instrumentation-http": "^0.55.0",
+    "@opentelemetry/resources": "^1.28.0",
     "@opentelemetry/sdk-node": "^0.55.0",
+    "@opentelemetry/semantic-conventions": "^1.28.0",
     "@rollup/wasm-node": "^4.35.0",
-    "@superblocksteam/bucketeer-sdk": "0.4.1",
-    "@superblocksteam/shared": "0.9122.0",
-    "@superblocksteam/util": "2.0.3-next.174",
-    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.174",
+    "@superblocksteam/bucketeer-sdk": "0.5.0",
+    "@superblocksteam/shared": "0.9160.0",
+    "@superblocksteam/util": "2.0.3-next.176",
+    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.176",
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.4.0",
     "chokidar": "^4.0.3",
@@ -53,7 +60,11 @@
     "yaml": "^2.4.2"
   },
   "devDependencies": {
+    "@babel/types": "^7.25.8",
     "@eslint/js": "^9.16.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.6.8",
+    "@types/babel__traverse": "^7.20.6",
     "@types/chai": "^4",
     "@types/chai-as-promised": "^8.0.2",
     "@types/common-tags": "^1.8.4",

package/src/application-build.mts

@@ -0,0 +1,160 @@
+import path from "node:path";
+import { injectIndexVitePlugin } from "@superblocksteam/vite-plugin-file-sync/inject-index";
+import react from "@vitejs/plugin-react";
+import { yellow, red } from "colorette";
+import fs from "fs-extra";
+import { build, createLogger } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { customComponentsPlugin } from "./dev-utils/custom-build.mjs";
+import { getLogger } from "./dev-utils/dev-logger.mjs";
+import { ddRumPlugin } from "./dev-utils/vite-plugin-dd-rum.mjs";
+import { superblocksCdnPlugin } from "./dev-utils/vite-plugin-sb-cdn.mjs";
+import { injectSuperblocksIdsPlugin } from "./vite-plugin-inject-sb-ids-transform.mjs";
+import type { Plugin } from "vite";
+
+export async function buildApplication({
+  root,
+  dest,
+  mode,
+  libraryUrl,
+  assetsCdnUrl,
+  ddClientToken,
+  ddApplicationId,
+  ddEnv,
+  ddVersion,
+}: {
+  root: string;
+  dest: string;
+  mode: string;
+  libraryUrl: string;
+  assetsCdnUrl?: string;
+  ddClientToken?: string;
+  ddApplicationId?: string;
+  ddEnv?: string;
+  ddVersion?: string;
+}) {
+  const cwd = process.cwd();
+  try {
+    // Ensure the root directory exists and change execution context to it
+    if (!(await fs.pathExists(root))) {
+      throw new Error(`Root directory "${root}" does not exist`);
+    }
+
+    process.chdir(root);
+    await buildWithVite({
+      root: fs.realpathSync(root),
+      dest: fs.realpathSync(dest),
+      mode,
+      libraryUrl,
+      assetsCdnUrl,
+      ddClientToken,
+      ddApplicationId,
+      ddEnv,
+      ddVersion,
+    });
+  } finally {
+    // Restore the original working directory before returning
+    process.chdir(cwd);
+  }
+}
+
+async function buildWithVite({
+  root,
+  dest,
+  mode,
+  libraryUrl,
+  assetsCdnUrl,
+  ddClientToken,
+  ddApplicationId,
+  ddEnv,
+  ddVersion,
+}: {
+  root: string;
+  dest: string;
+  mode: string;
+  libraryUrl: string;
+  assetsCdnUrl?: string;
+  ddClientToken?: string;
+  ddApplicationId?: string;
+  ddEnv?: string;
+  ddVersion?: string;
+}) {
+  const viteLogger = createLogger();
+  const logger = getLogger();
+  viteLogger.info = logger.info;
+  viteLogger.warn = (msg: string) => {
+    logger.warn(yellow(msg));
+  };
+  viteLogger.warnOnce = (msg: string) => {
+    logger.warn(yellow(msg));
+  };
+  viteLogger.error = (msg: string) => {
+    logger.error(red(msg));
+  };
+
+  viteLogger.clearScreen = () => {};
+
+  const customFolder = path.join(root, "custom");
+
+  await build({
+    root,
+    mode,
+    appType: "spa",
+    resolve: {
+      alias: {
+        "react-router": "@superblocksteam/library",
+      },
+    },
+    clearScreen: true,
+    optimizeDeps: {
+      include: ["lodash", "react-is"],
+      exclude: [],
+    },
+    build: {
+      outDir: dest,
+      emptyOutDir: true,
+      write: true,
+      commonjsOptions: {
+        include: ["react-is"],
+        transformMixedEsModules: true,
+      },
+      rollupOptions: {
+        external: [
+          `${customFolder}/**/*`,
+          "react",
+          "react-dom",
+          "react/jsx-runtime",
+          "react/jsx-dev-runtime",
+        ],
+        preserveEntrySignatures: "allow-extension",
+        output: { format: "esm" },
+      },
+    },
+    logLevel: "info",
+    plugins: [
+      tsconfigPaths(),
+      injectIndexVitePlugin({ assetsCdnUrl, logger }) as Plugin,
+      customComponentsPlugin(),
+      injectSuperblocksIdsPlugin(root),
+      superblocksCdnPlugin({
+        imports: {
+          "@superblocksteam/library": `${libraryUrl}/index.js`,
+          "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime.mjs",
+          "react/jsx-dev-runtime":
+            "https://esm.sh/react@18.2.0/jsx-dev-runtime.mjs",
+        },
+        cssImports: {
+          "@superblocksteam/library/index.css": `${libraryUrl}/index.css`,
+        },
+      }),
+      react(),
+
+      ddRumPlugin({
+        clientToken: ddClientToken ?? "",
+        applicationId: ddApplicationId ?? "",
+        env: ddEnv ?? "prod",
+        version: ddVersion ?? "1.0.0",
+      }),
+    ],
+  });
+}

package/src/cli-replacement/automatic-upgrades.ts

@@ -79,7 +79,11 @@ async function getCurrentCliVersion(): Promise<string | undefined> {
     );
     const json = JSON.parse(versionOutput) as Record<string, string>;
     // Extract version from string like "@superblocksteam/cli/2.0.0-next.1" or "@superblocksteam/cli-ephemeral/2.0.0-SNAPSHOT.1749077365"
-    return json.cliVersion?.replace(/@superblocksteam\/cli(-ephemeral)?\//, "");
+    const version = json.cliVersion?.replace(
+      /@superblocksteam\/cli(-ephemeral)?\//,
+      "",
+    );
+    return version;
   } catch (error) {
     if (isNativeError(error)) {
       logger.error(`Error getting CLI version: ${error.message}`);
@@ -258,6 +262,9 @@ export async function checkVersionsAndUpgrade(
   // Get current versions
   const currentCliVersion = await getCurrentCliVersion();
   const currentLibraryInfo = await getCurrentLibraryVersion(pm);
+  logger.info(
+    `@superblocksteam/cli/${currentCliVersion} ${currentLibraryInfo?.alias} ${currentLibraryInfo?.version}`,
+  );
 
   // Skip if we're in local development
   if (
@@ -277,14 +284,28 @@ export async function checkVersionsAndUpgrade(
   const targetVersions = await getRemoteVersions(config);
   if (!targetVersions) return;
 
-  // Check if CLI needs upgrade
-  const cliNeedsUpgrade =
-    targetVersions.cli && gt(targetVersions.cli, currentCliVersion);
-
-  // Check if library needs upgrade
-  const libraryNeedsUpgrade =
-    targetVersions.library &&
-    gt(targetVersions.library, currentLibraryInfo.version);
+  let cliNeedsUpgrade: boolean | string;
+  let libraryNeedsUpgrade: boolean | string;
+  try {
+    // If version is latest, then semver can throw an error
+    // Check if CLI needs upgrade
+    cliNeedsUpgrade =
+      targetVersions.cli && gt(targetVersions.cli, currentCliVersion);
+
+    // Check if library needs upgrade
+    libraryNeedsUpgrade =
+      targetVersions.library &&
+      gt(targetVersions.library, currentLibraryInfo.version);
+  } catch (error) {
+    console.warn(
+      "Error checking versions to upgrade, releasing lock and exiting",
+      error,
+    );
+    await lockService.shutdown({
+      serverInitiated: false,
+    });
+    process.exit(1);
+  }
 
   if (!cliNeedsUpgrade && !libraryNeedsUpgrade) {
     return; // Everything is up to date

package/src/cli-replacement/dev.mts

@@ -2,6 +2,7 @@ import "../dev-utils/dev-tracer.js";
 
 import * as child_process from "node:child_process";
 import * as fsp from "node:fs/promises";
+import path from "node:path";
 import { promisify } from "node:util";
 import { maskUnixSignals } from "@superblocksteam/util";
 import { AiService } from "@superblocksteam/vite-plugin-file-sync/ai-service";
@@ -13,6 +14,7 @@ import { OperationQueue } from "@superblocksteam/vite-plugin-file-sync/operation
 import { SyncService } from "@superblocksteam/vite-plugin-file-sync/sync-service";
 import { green } from "colorette";
 import { diffJson } from "diff";
+import fs from "fs-extra";
 import { resolveCommand } from "package-manager-detector";
 import { detect } from "package-manager-detector/detect";
 
@@ -115,6 +117,13 @@ export async function dev(options: {
     applicationConfig,
   } = options;
 
+  // Add check for node_modules
+  if (!fs.existsSync(path.join(cwd, "node_modules"))) {
+    throw new Error(
+      'node_modules folder is missing. Please run "npm install" first.',
+    );
+  }
+
   if (pidfilePath) {
     await fsp.writeFile(pidfilePath, `${process.pid}\n`);
   }
@@ -198,6 +207,7 @@ export async function dev(options: {
           anthropicApiKey: process.env.ANTHROPIC_API_KEY || "",
           fsOperationQueue,
           draftInterface: syncService! as DraftInterface,
+          tracer,
         });
 
         const isSynced = localContents.hash === serverHash;

package/src/client.ts

@@ -1,4 +1,5 @@
-import * as fs from "fs";
+import * as fs from "node:fs";
+import path from "node:path";
 import { Bucketeer, FileDescriptor } from "@superblocksteam/bucketeer-sdk";
 import { ExportViewMode } from "@superblocksteam/shared";
 import {
@@ -1269,13 +1270,15 @@ export async function uploadApplication({
   scopedJwt,
   url,
   cliVersion,
+  appRoot,
 }: {
   files: string[];
   scopedJwt: string;
   url: string;
   cliVersion: string;
+  appRoot?: string;
 }) {
-  const fds = filesToFileDescriptors(files);
+  const fds = filesToFileDescriptors(files, appRoot);
   const bucketeer = new Bucketeer({
     token: scopedJwt,
     baseUrl: url,
@@ -1285,9 +1288,15 @@ export async function uploadApplication({
   await bucketeer.uploadApplication(fds);
 }
 
-function filesToFileDescriptors(files: string[]) {
+function filesToFileDescriptors(files: string[], appRoot?: string) {
   const fds = files.map((file) => {
-    return new FileDescriptor(file, fs.createReadStream(file));
+    const relativePath = appRoot ? path.relative(appRoot, file) : undefined;
+    return new FileDescriptor(
+      file,
+      fs.createReadStream(file),
+      undefined,
+      relativePath,
+    );
   });
   return fds;
 }

package/src/dev-utils/dev-server.mts

@@ -84,11 +84,23 @@ export async function createDevServer({
     viteReject = reject;
   });
 
-  async function gracefulShutdown(logger: ReturnType<typeof getLogger>) {
+  async function gracefulShutdown({
+    logger,
+    serverInitiated,
+    switchingTo,
+    initiatedByEmail,
+  }: {
+    logger: ReturnType<typeof getLogger>;
+    serverInitiated: boolean;
+    switchingTo?: "local" | "cloud" | "none";
+    initiatedByEmail?: string;
+  }) {
     try {
-      if (lockService?.isLocked) {
-        await lockService.shutdown();
-      }
+      await lockService?.shutdown({
+        serverInitiated,
+        switchingTo,
+        initiatedByEmail,
+      });
       // Cleanup the vite server
       if (viteServer) {
         await viteServer?.close();
@@ -118,6 +130,7 @@ export async function createDevServer({
       credentials: true,
     }),
   );
+  app.use(express.json());
 
   app.use((req, res, next) => {
     res.setHeader("Cache-Control", "no-store, max-age=0");
@@ -174,11 +187,29 @@ export async function createDevServer({
     }, viteReject);
   });
 
+  // TODO(code-mode): remove this soon
   app.get("/_sb_disconnect", async (_req, res) => {
+    console.log("GET /_sb_disconnect");
     // TODO(code-mode): should this include any validation checks, such as getting a token?
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
     res.send("ok");
   });
+  app.post("/_sb_disconnect", async (req, res) => {
+    const { initiatedByEmail, switchingTo } = req.body;
+    // TODO(code-mode): should this include any validation checks, such as getting a token?
+    try {
+      await gracefulShutdown({
+        logger,
+        serverInitiated: true,
+        switchingTo,
+        initiatedByEmail: initiatedByEmail as string | undefined,
+      });
+      res.send("ok");
+    } catch (e) {
+      console.error("Error disconnecting from dev server", e);
+      res.status(500).send("Error disconnecting from dev server");
+    }
+  });
 
   app.get("/_sb_status", async (_req, res) => {
     res.setHeader("Content-Type", "application/json");
@@ -195,17 +226,17 @@ export async function createDevServer({
 
   process.on("SIGINT", async () => {
     logger.info("SIGINT received");
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
   });
 
   process.on("SIGTERM", async () => {
     logger.info("SIGTERM received");
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
   });
 
   process.on("SIGABRT", async () => {
     logger.info("SIGABRT received");
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
   });
 
   httpServer = await app.listen(port);

package/src/dev-utils/dev-tracer.ts

@@ -1,14 +1,48 @@
 import { trace } from "@opentelemetry/api";
 import { AsyncLocalStorageContextManager } from "@opentelemetry/context-async-hooks";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { ExpressInstrumentation } from "@opentelemetry/instrumentation-express";
 import { HttpInstrumentation } from "@opentelemetry/instrumentation-http";
+import { Resource } from "@opentelemetry/resources";
 import { NodeSDK } from "@opentelemetry/sdk-node";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+import { getLocalTokenWithUrl } from "@superblocksteam/util";
 import packageJson from "../../package.json" with { type: "json" };
 import type { Span } from "@opentelemetry/api";
 
+// NOTE: @joeyagreco - this is how the "env" facet is determined in datadog: https://docs.datadoghq.com/opentelemetry/setup/collector_exporter/#3---configure-your-application
+const ATTR_DEPLOYMENT_ENVIRONMENT = "deployment.environment";
+// NOTE: @joeyagreco - this can be used to determine if we are using mock-csb, staging-csb, prod-csb, etc
+const ATTR_SUPERBLOCKS_BASE_URL = "superblocks.base_url";
+const ATTR_SUPERBLOCKS_CLI_TOKEN = "superblocks.cli_token";
+let superblocksTracesUrl = undefined;
+let superblocksHostname = "unknown";
+let token = "unknown";
+try {
+  const tokenWithUrl = await getLocalTokenWithUrl();
+  const superblocksBaseUrl = new URL(tokenWithUrl.superblocksBaseUrl);
+  superblocksTracesUrl = superblocksBaseUrl.origin + "/api/v1/traces";
+  superblocksHostname = superblocksBaseUrl.hostname;
+  if ("token" in tokenWithUrl) {
+    token = tokenWithUrl.token.substring(0, 8);
+  }
+} catch (e) {
+  console.error("[tracing init] could not determine superblocks base url", e);
+}
+
 // Initialize the OpenTelemetry SDK
 const sdk = new NodeSDK({
-  serviceName: "sdk-dev-server",
+  resource: Resource.default().merge(
+    new Resource({
+      [ATTR_SERVICE_NAME]: "sdk-dev-server",
+      [ATTR_DEPLOYMENT_ENVIRONMENT]: process.env.SUPERBLOCKS_CLI_ENV,
+      [ATTR_SUPERBLOCKS_BASE_URL]: superblocksHostname,
+      [ATTR_SUPERBLOCKS_CLI_TOKEN]: token,
+    }),
+  ),
+  traceExporter: new OTLPTraceExporter({
+    url: superblocksTracesUrl, // OTLPTraceExporter defaults to sending traffic to http://localhost:4318/v1/traces
+  }),
   contextManager: new AsyncLocalStorageContextManager(),
   instrumentations: [
     // Configure HTTP instrumentation with custom attributes

package/src/dev-utils/vite-plugin-react-transform.mts

@@ -11,6 +11,7 @@ export function reactTransformPlugin(): Plugin {
   return {
     name: "vite-plugin-react-transform",
     enforce: "pre", // Run before other plugins
+    apply: "serve",
     async transform(code, id) {
       // Check for React modules
       if (id.includes("node_modules/.vite/deps/react.js")) {