Skip to content

Commit abe4733

Browse files
fix(gettingStartedDocs): Update LangGraph example to use StateGraph API (#109551)
Update the LangGraph code snippet 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. The fix replaces `createReactAgent` with the lower-level `StateGraph` + `MessagesAnnotation` pattern, which keeps the compile step explicit and accessible.
1 parent 2a61d42 commit abe4733

1 file changed

Lines changed: 11 additions & 3 deletions

File tree

static/app/gettingStartedDocs/javascript/agentMonitoring.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ Sentry.init({
116116
language: 'javascript',
117117
code: `${sentryImport}
118118
import { ChatOpenAI } from "@langchain/openai";
119-
import { createReactAgent } from "@langchain/langgraph/prebuilt";
119+
import { StateGraph, MessagesAnnotation } from "@langchain/langgraph";
120120
import { HumanMessage, SystemMessage } from "@langchain/core/messages";
121121
122122
const llm = new ChatOpenAI({
@@ -125,13 +125,21 @@ const llm = new ChatOpenAI({
125125
apiKey: "OPENAI_API_KEY",
126126
});
127127
128-
const agent = createReactAgent({ llm, tools: [] });
128+
const graph = new StateGraph(MessagesAnnotation)
129+
.addNode("agent", async (state) => {
130+
const response = await llm.invoke(state.messages);
131+
return { messages: [response] };
132+
})
133+
.addEdge("__start__", "agent")
134+
.addEdge("agent", "__end__");
129135
130-
Sentry.instrumentLangGraph(agent, {
136+
Sentry.instrumentLangGraph(graph, {
131137
recordInputs: true,
132138
recordOutputs: true,
133139
});
134140
141+
const agent = graph.compile();
142+
135143
const result = await agent.invoke({
136144
messages: [
137145
new SystemMessage("You are a helpful assistant."),

0 commit comments

Comments
 (0)