Backend support (#100)

Author: bryce-fitzsimons

README.md

@@ -64,6 +64,13 @@ Some notes
 
 ## Changelog
 
+*1.2.0* (2025-04-07)
+- Support for backend SDK debugging (overrides, logs)
+- Feature and Experiment views now show both simulated and live evaluations when available
+- Ability to inject a "debugging SDK" onto pages with no front-end SDKs
+- UI updates
+- Bug fixes
+
 *1.1.2* (2025-03-25)
 - Persist feature and experiment search filter
 - Bug fix: Improve association of debug logs to feature rules

devtools.d.ts

@@ -1,8 +1,8 @@
-import type {
+import {
   Experiment,
   FeatureDefinition,
   ExperimentOverride,
-  StickyAssignmentsDocument, FeatureApiResponse,
+  StickyAssignmentsDocument, FeatureApiResponse, Attributes,
 } from "@growthbook/growthbook";
 import {
   FetchVisualChangesetPayload,
@@ -78,6 +78,16 @@ export type RequestRefreshMessage = {
   type: "GB_REQUEST_REFRESH";
 };
 
+export type InjectSdkMessage = {
+  type: "GB_INJECT_SDK";
+  clientKey: string;
+  apiHost: string;
+  autoInject: boolean;
+};
+export type ClearInjectedSdkMessage = {
+  type: "GB_CLEAR_INJECTED_SDK";
+};
+
 export type SetOverridesMessage = {
   type: "GB_SET_OVERRIDES";
   variations: Record<string, number>;
@@ -200,6 +210,8 @@ export type Message =
   | PullOverrides
   | SetPayload
   | PatchPayload
+  | InjectSdkMessage
+  | ClearInjectedSdkMessage
   | CopyToClipboard;
 
 export type BGLoadVisualChangsetMessage = {
@@ -226,14 +238,25 @@ export type BGTransformCopyMessage = {
   };
 };
 
-type SDKHealthCheckResult = {
+export type ExternalSdkInfo = {
+  apiHost: string;
+  clientKey: string;
+  version?: string;
+  payload?: FeatureApiResponse;
+  attributes?: Attributes;
+};
+
+export type SDKHealthCheckResult = {
   canConnect: boolean;
   hasPayload: boolean;
   hasClientKey?: boolean;
   errorMessage?: string;
   version?: string;
   hasWindowConfig?: boolean;
   sdkFound?: boolean;
+  sdkInjected?: boolean;
+  sdkAutoInjected?: boolean;
+  externalSdks?: Record<string, ExternalSdkInfo>;
   clientKey?: string;
   isLoading?: boolean;
   payload?: Record<string, any>;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gb-devtools",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "webpack --config webpack/webpack.dev.js --watch",

public/manifest.chrome.json

@@ -3,7 +3,7 @@
 
   "name": "GrowthBook DevTools",
   "description": "GrowthBook DevTools helps you debug feature flags and experiments and design A/B tests visually — all from your browser.",
-  "version": "1.1.2",
+  "version": "1.2.0",
 
   "content_scripts": [
     {

public/manifest.firefox.json

@@ -3,7 +3,7 @@
 
   "name": "GrowthBook DevTools",
   "description": "GrowthBook DevTools helps you debug feature flags and experiments and design A/B tests visually — all from your browser.",
-  "version": "1.1.2",
+  "version": "1.2.0",
 
   "browser_specific_settings": {
     "gecko": {

src/app/components/DebugLogger.tsx

@@ -36,9 +36,7 @@ export default function DebugLogger({
             size={12}
           />
           Debug log
-          {showCount ? (<>
-            {" "}({logs?.length || 0})
-          </>) : null}
+          {showCount ? <> ({logs?.length || 0})</> : null}
         </Link>
       </div>
       {!collapsed && (

src/app/components/EditableValueField.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import ValueField, { ValueType } from "./ValueField";
 import { Button, RadioGroup, Link, DropdownMenu } from "@radix-ui/themes";
 import TextareaAutosize from "react-textarea-autosize";
-import { PiCaretDownFill, PiPencilSimple } from "react-icons/pi";
+import { PiCaretDownFill } from "react-icons/pi";
 
 export default function EditableValueField({
   value,

src/app/components/ExperimentDetail.tsx

@@ -11,8 +11,9 @@ import {
   PiArrowSquareOut,
   PiCaretRightFill,
   PiFlagFill,
+  PiInfo,
   PiLinkBold,
-  PiMonitorBold,
+  PiDesktopFill,
   PiXBold,
 } from "react-icons/pi";
 import ValueField from "@/app/components/ValueField";
@@ -22,7 +23,7 @@ import {
   getVariationColor,
 } from "@/app/components/Rule";
 import * as Accordion from "@radix-ui/react-accordion";
-import React, { CSSProperties, useEffect, useState } from "react";
+import React, { CSSProperties, useEffect, useMemo, useState } from "react";
 import {
   ExperimentWithFeatures,
   HEADER_H,
@@ -36,8 +37,11 @@ import { AutoExperimentVariation, isURLTargeted } from "@growthbook/growthbook";
 import clsx from "clsx";
 import DebugLogger, { DebugLogAccordion } from "@/app/components/DebugLogger";
 import { TbEyeSearch } from "react-icons/tb";
-import useApi from "@/app/hooks/useApi";
-import { SDKAttribute } from "@/app/gbTypes";
+import {
+  Evaluation,
+  EvaluationSourceViewer,
+} from "@/app/components/FeatureDetail";
+import { LogUnionWithSource } from "@/app/utils/logs";
 
 export default function ExperimentDetail({
   selectedEid,
@@ -82,6 +86,58 @@ export default function ExperimentDetail({
     setOverrideExperiment(false);
   };
 
+  const [logEvents] = useTabState<LogUnionWithSource[] | undefined>(
+    "logEvents",
+    undefined,
+  );
+
+  const [viewEvaluationSource, setViewEvaluationSource] = useState<
+    string | undefined
+  >(undefined);
+  const evaluations = useMemo(() => {
+    if (!selectedFid) return [];
+    const evaluationsMap: Record<string, Evaluation> = {};
+    let logs = [...(logEvents || [])]
+      .filter(
+        (log) =>
+          log.logType === "experiment" && log.experiment.key === selectedEid,
+      )
+      .sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+    logs.forEach((log) => {
+      const key = (log.source || "local") + "__" + (log.clientKey || "");
+      if (!(key in evaluationsMap) && "result" in log) {
+        evaluationsMap[key] = {
+          result: log.result,
+          context: {
+            source: log.source || "front-end",
+            clientKey: log.clientKey,
+            timestamp: log.timestamp,
+          },
+        };
+      }
+    });
+    return Object.entries(evaluationsMap).sort((a, b) => {
+      if (a[0] === "local") return 1;
+      return a[0].localeCompare(b[0]);
+    });
+  }, [logEvents, selectedEid]);
+
+  useEffect(() => {
+    if (!selectedEid || !evaluations.length) {
+      setViewEvaluationSource(undefined);
+    }
+    if (viewEvaluationSource === undefined && evaluations.length) {
+      setViewEvaluationSource(evaluations?.[0]?.[0]);
+    }
+    if (
+      viewEvaluationSource !== undefined &&
+      evaluations.length &&
+      !evaluations.find((e) => e[0] === viewEvaluationSource)
+    ) {
+      setViewEvaluationSource(evaluations?.[0]?.[0]);
+    }
+  }, [selectedEid, viewEvaluationSource, evaluations]);
+
   const { types } = selectedExperiment || {};
 
   const { variations, weights, hashAttribute, coverage, namespace } =
@@ -211,7 +267,23 @@ export default function ExperimentDetail({
 
             <div className="flex items-center justify-between my-2">
               <div className="label font-semibold">
-                {overrideExperiment ? "Forced variation" : "Current variation"}
+                <Tooltip
+                  content={
+                    !overrideExperiment
+                      ? "Value is simulated by DevTools"
+                      : "Value is overridden and is applied to live SDK(s)"
+                  }
+                >
+                  <span>
+                    {overrideExperiment
+                      ? "Forced variation"
+                      : "Current variation"}
+                    <PiInfo
+                      size={12}
+                      className="text-indigo-9 inline-block ml-1"
+                    />
+                  </span>
+                </Tooltip>
               </div>
               {overrideExperiment && (
                 <Button
@@ -257,7 +329,7 @@ export default function ExperimentDetail({
                         <Link
                           size="2"
                           role="button"
-                          className="hover:underline"
+                          className="hover:underline decoration-violet-a6"
                         >
                           <PiCaretRightFill
                             className="caret mr-0.5"
@@ -294,6 +366,15 @@ export default function ExperimentDetail({
             customPrismOuterStyle={{ marginTop: 4 }}
           />
 
+          {evaluations.length ? (
+            <EvaluationSourceViewer
+              evaluations={evaluations}
+              viewEvaluationSource={viewEvaluationSource}
+              setViewEvaluationSource={setViewEvaluationSource}
+              isExperiment={true}
+            />
+          ) : null}
+
           <div className="mt-4 mb-1 text-md font-semibold">
             Implementation
             {(types?.redirect ? 1 : 0) +
@@ -312,7 +393,7 @@ export default function ExperimentDetail({
             ) : null}
             {types?.visual ? (
               <div className="text-sm">
-                <PiMonitorBold className="inline-block mr-1" />
+                <PiDesktopFill className="inline-block mr-1" />
                 Visual Editor
               </div>
             ) : null}
@@ -402,7 +483,11 @@ export default function ExperimentDetail({
               >
                 <Accordion.Item value="feature-definition">
                   <Accordion.Trigger className="trigger mb-0.5">
-                    <Link size="2" role="button" className="hover:underline">
+                    <Link
+                      size="2"
+                      role="button"
+                      className="hover:underline decoration-violet-a6"
+                    >
                       <PiCaretRightFill className="caret mr-0.5" size={12} />
                       Full experiment definition
                     </Link>

src/app/components/ExperimentsTab.tsx

@@ -3,7 +3,6 @@ import {
   AutoExperiment,
   Experiment,
   FeatureDefinition,
-  LogUnion,
 } from "@growthbook/growthbook";
 import useTabState from "../hooks/useTabState";
 import useGBSandboxEval, {
@@ -24,6 +23,7 @@ import { ValueType } from "@/app/components/ValueField";
 import FeatureExperimentStatusIcon from "@/app/components/FeatureExperimentStatusIcon";
 import { useResponsiveContext } from "../hooks/useResponsive";
 import { TbEyeSearch } from "react-icons/tb";
+import { LogUnionWithSource } from "@/app/utils/logs";
 
 export type ExperimentWithFeatures = (AutoExperiment | Experiment<any>) & {
   features?: string[];
@@ -93,7 +93,7 @@ export default function ExperimentsTab() {
 
   const { evaluatedExperiments } = useGBSandboxEval();
 
-  const [logEvents] = useTabState<LogUnion[] | undefined>(
+  const [logEvents] = useTabState<LogUnionWithSource[] | undefined>(
     "logEvents",
     undefined,
   );
@@ -109,7 +109,7 @@ export default function ExperimentsTab() {
 
   const [searchValue, setSearchValue] = useTabState<string>(
     "experimentsSearchValue",
-    ""
+    "",
   );
 
   const {