[editor] Starting Point for Telemetry

rebased version of #804 onto main

python/src/aiconfig/editor/client/package.json

@@ -23,6 +23,7 @@
  ]
  },
  "dependencies": {
+ "@datadog/browser-logs": "^5.6.0",
  "@emotion/react": "^11.11.1",
  "@mantine/carousel": "^6.0.7",
  "@mantine/core": "^6.0.7",

python/src/aiconfig/editor/client/src/LocalEditor.tsx

@@ -16,6 +16,8 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { ufetch } from "ufetch";
 import { ROUTE_TABLE } from "./utils/api";
 import { streamingApiChain } from "./utils/oboeHelpers";
+import { datadogLogs } from "@datadog/browser-logs";
+import { LogEvent, LogEventData } from "./shared/types";
 
 export default function Editor() {
  const [aiconfig, setAiConfig] = useState<AIConfig | undefined>();
@@ -171,6 +173,14 @@ export default function Editor() {
  return await ufetch.get(ROUTE_TABLE.SERVER_STATUS);
  }, []);
 
+ const logEvent = useCallback((event: LogEvent, data?: LogEventData) => {
+ try {
+ datadogLogs.logger.info(event, data);
+ } catch (e) {
+ // Ignore logger errors for now
+ }
+ }, []);
+
  const callbacks: AIConfigCallbacks = useMemo(
  () => ({
  addPrompt,
@@ -179,6 +189,7 @@ export default function Editor() {
  deletePrompt,
  getModels,
  getServerStatus,
+ logEvent,
  runPrompt,
  save,
  setConfigDescription,
@@ -194,6 +205,7 @@ export default function Editor() {
  deletePrompt,
  getModels,
  getServerStatus,
+ logEvent,
  runPrompt,
  save,
  setConfigDescription,

python/src/aiconfig/editor/client/src/components/AIConfigContext.tsx

@@ -1,12 +1,13 @@
 import { createContext } from "react";
-import { ClientAIConfig } from "../shared/types";
+import { ClientAIConfig, LogEvent, LogEventData } from "../shared/types";
 
 /**
  * Context for overall editor config state. This context should
  * be memoized to prevent unnecessary re-renders
  */
 const AIConfigContext = createContext<{
  getState: () => ClientAIConfig;
+ logEvent?: (event: LogEvent, data?: LogEventData) => void;
 }>({
  getState: () => ({ prompts: [], _ui: { isDirty: false } }),
 });

python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx

@@ -31,6 +31,8 @@ import { v4 as uuidv4 } from "uuid";
 import aiconfigReducer, { AIConfigReducerAction } from "./aiconfigReducer";
 import {
  ClientPrompt,
+ LogEvent,
+ LogEventData,
  aiConfigToClientConfig,
  clientConfigToAIConfig,
  clientPromptToAIConfigPrompt,
@@ -98,6 +100,7 @@ export type AIConfigCallbacks = {
  deletePrompt: (promptName: string) => Promise<void>;
  getModels: (search: string) => Promise<string[]>;
  getServerStatus?: () => Promise<{ status: "OK" | "ERROR" }>;
+ logEvent?: (event: LogEvent, data?: LogEventData) => void;
  runPrompt: (
  promptName: string,
  onStream: RunPromptStreamCallback,
@@ -167,6 +170,8 @@ export default function EditorContainer({
  const stateRef = useRef(aiconfigState);
  stateRef.current = aiconfigState;
 
+ const logEvent = callbacks.logEvent;
+
  const saveCallback = callbacks.save;
  const onSave = useCallback(async () => {
  setIsSaving(true);
@@ -515,6 +520,7 @@ export default function EditorContainer({
  };
 
  dispatch(action);
+ logEvent?.("ADD_PROMPT", { model, promptIndex });
 
  try {
  const serverConfigRes = await addPromptCallback(
@@ -536,7 +542,7 @@ export default function EditorContainer({
  });
  }
  },
- [addPromptCallback, dispatch]
+ [addPromptCallback, logEvent]
  );
 
  const deletePromptCallback = callbacks.deletePrompt;
@@ -761,8 +767,9 @@ export default function EditorContainer({
  const contextValue = useMemo(
  () => ({
  getState,
+ logEvent,
  }),
- [getState]
+ [getState, logEvent]
  );
 
  const isDirty = aiconfigState._ui.isDirty !== false;
@@ -870,7 +877,10 @@ export default function EditorContainer({
  <Button
  leftIcon={<IconDeviceFloppy />}
  loading={isSaving}
- onClick={onSave}
+ onClick={() => {
+ onSave();
+ logEvent?.("SAVE_BUTTON_CLICKED");
+ }}
  disabled={!isDirty}
  size="xs"
  variant="gradient"

python/src/aiconfig/editor/client/src/index.tsx

@@ -2,6 +2,17 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import LocalEditor from "./LocalEditor";
 
+import { datadogLogs } from "@datadog/browser-logs";
+
+datadogLogs.init({
+ clientToken: "pub356987caf022337989e492681d1944a8",
+ env: process.env.NODE_ENV ?? "development",
+ service: "aiconfig-editor",
+ site: "us5.datadoghq.com",
+ forwardErrorsToLogs: true,
+ sessionSampleRate: 100,
+});
+
 const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
 );

python/src/aiconfig/editor/client/src/shared/types.ts

@@ -1,4 +1,4 @@
-import { AIConfig, Prompt } from "aiconfig";
+import { AIConfig, JSONObject, Prompt } from "aiconfig";
 import { uniqueId } from "lodash";
 
 export type EditorFile = {
@@ -62,3 +62,6 @@ export function aiConfigToClientConfig(aiconfig: AIConfig): ClientAIConfig {
  },
  };
 }
+
+export type LogEvent = "ADD_PROMPT" | "SAVE_BUTTON_CLICKED";
+export type LogEventData = JSONObject;

python/src/aiconfig/editor/client/yarn.lock

@@ -1289,6 +1289,18 @@
  enabled "2.0.x"
  kuler "^2.0.0"
 
+"@datadog/browser-core@5.6.0":
+ version "5.6.0"
+ resolved "https://registry.yarnpkg.com/@datadog/browser-core/-/browser-core-5.6.0.tgz#f7a0d809afede4520bb4786886b4648c0e1b890d"
+ integrity sha512-z6CvlJyEFbYNw2ZawY9fDHQjdl71yp0OcchvB/S4SGKdQVLPUd48Y528gv132VDnY2g0UipE9JK59wnAamyS9w==
+
+"@datadog/browser-logs@^5.6.0":
+ version "5.6.0"
+ resolved "https://registry.yarnpkg.com/@datadog/browser-logs/-/browser-logs-5.6.0.tgz#2b4b62d87a315560e87d46f84504012f7b7bdecd"
+ integrity sha512-NyqkG+UfAgz86CbEbSrAlDR5GvjJHAUwaI38xo9JR+9O5KJkwMgRnvQBtmdmpjjm723yyWeDcTd+ZIdvgIP61g==
+ dependencies:
+ "@datadog/browser-core" "5.6.0"
+
 "@emotion/babel-plugin@^11.11.0":
  version "11.11.0"
  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"