From 607fa80e2e51c6ad0a3b8c4d097f65d150779aa0 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Fri, 27 Feb 2026 10:56:00 +0100 Subject: [PATCH 1/2] fix(gettingStartedDocs): Update LangGraph example to use StateGraph API MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace createReactAgent with StateGraph and MessagesAnnotation in the agent monitoring getting started guide. instrumentLangGraph works by wrapping the .compile() method on a StateGraph to intercept the compilation step and inject tracing. This means it must be called before .compile() is invoked. createReactAgent calls .compile() internally and returns the already-compiled graph — there's no hook point between graph construction and compilation. By the time you get the return value, the compile step has already happened, making it too late for instrumentLangGraph to do its job. In short: createReactAgent hides the compile step, but instrumentLangGraph needs to wrap that exact step. They are fundamentally incompatible with the current SDK API. Co-Authored-By: Claude --- .../javascript/agentMonitoring.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx b/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx index 7e581cde3007..8430a1eeaeb9 100644 --- a/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx +++ b/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx @@ -116,7 +116,7 @@ Sentry.init({ language: 'javascript', code: `${sentryImport} import { ChatOpenAI } from "@langchain/openai"; -import { createReactAgent } from "@langchain/langgraph/prebuilt"; +import { StateGraph, MessagesAnnotation } from "@langchain/langgraph"; import { HumanMessage, SystemMessage } from "@langchain/core/messages"; const llm = new ChatOpenAI({ @@ -125,13 +125,20 @@ const llm = new ChatOpenAI({ apiKey: "OPENAI_API_KEY", }); -const agent = createReactAgent({ llm, tools: [] }); +const graph = new StateGraph(MessagesAnnotation) + .addNode("agent", async (state) => { + const response = await llm.invoke(state.messages); + return { messages: [response] }; + }) + .addEdge("__start__", "agent"); -Sentry.instrumentLangGraph(agent, { +Sentry.instrumentLangGraph(graph, { recordInputs: true, recordOutputs: true, }); +const agent = graph.compile(); + const result = await agent.invoke({ messages: [ new SystemMessage("You are a helpful assistant."), From 7d99c296e87bbe2e10d61dfbc3bbb57e9fe23d4c Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Fri, 27 Feb 2026 11:15:10 +0100 Subject: [PATCH 2/2] fix(gettingStartedDocs): Add missing END edge to LangGraph example Without an edge from the agent node to __end__, the StateGraph has no termination path, causing agent.invoke() to fail at runtime. Co-Authored-By: Claude --- static/app/gettingStartedDocs/javascript/agentMonitoring.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx b/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx index 8430a1eeaeb9..bbba98ab7102 100644 --- a/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx +++ b/static/app/gettingStartedDocs/javascript/agentMonitoring.tsx @@ -130,7 +130,8 @@ const graph = new StateGraph(MessagesAnnotation) const response = await llm.invoke(state.messages); return { messages: [response] }; }) - .addEdge("__start__", "agent"); + .addEdge("__start__", "agent") + .addEdge("agent", "__end__"); Sentry.instrumentLangGraph(graph, { recordInputs: true,