LangGraph for React Native

Import names: Sentry.instrumentStateGraph, Sentry.instrumentCreateReactAgent

The OpenTelemetry-based automatic integration available for Node.js does not work in React Native, so manual instrumentation is the only supported path. Two helpers are available, depending on how you build your agent:

• instrumentStateGraph — for graphs you build yourself with StateGraph. Call it on the graph before calling .compile().
• instrumentCreateReactAgent — for LangGraph's prebuilt createReactAgent. Wrap the factory, then use the wrapped version exactly like createReactAgent. This also captures the model and wraps tools, so you get execute_tool spans as well.

Both accept the same input/output recording options.

Usage

import * as Sentry from "@sentry/react-native";
import { ChatOpenAI } from "@langchain/openai";
import {
  StateGraph,
  MessagesAnnotation,
  START,
  END,
} from "@langchain/langgraph";
import { SystemMessage, HumanMessage } from "@langchain/core/messages";

const llm = new ChatOpenAI({
  modelName: "gpt-4o",
  // Warning: API keys included in your app bundle will be visible to anyone who
  // inspects the bundle. Proxy LLM calls through your own backend whenever possible.
  apiKey: "your-api-key",
});

async function callLLM(state) {
  const response = await llm.invoke(state.messages);
  return {
    messages: [...state.messages, response],
  };
}

const agent = new StateGraph(MessagesAnnotation)
  .addNode("agent", callLLM)
  .addEdge(START, "agent")
  .addEdge("agent", END);

// Instrument the graph BEFORE compiling
Sentry.instrumentStateGraph(agent, {
  recordInputs: true,
  recordOutputs: true,
});

const graph = agent.compile({ name: "my_agent" });

const result = await graph.invoke({
  messages: [
    new SystemMessage("You are a helpful assistant."),
    new HumanMessage("Hello!"),
  ],
});

import * as Sentry from "@sentry/react-native";
import { ChatOpenAI } from "@langchain/openai";
import {
  StateGraph,
  MessagesAnnotation,
  START,
  END,
} from "@langchain/langgraph";
import { SystemMessage, HumanMessage } from "@langchain/core/messages";

const llm = new ChatOpenAI({
  modelName: "gpt-4o",
  // Warning: API keys included in your app bundle will be visible to anyone who
  // inspects the bundle. Proxy LLM calls through your own backend whenever possible.
  apiKey: "your-api-key",
});

async function callLLM(state) {
  const response = await llm.invoke(state.messages);
  return {
    messages: [...state.messages, response],
  };
}

const agent = new StateGraph(MessagesAnnotation)
  .addNode("agent", callLLM)
  .addEdge(START, "agent")
  .addEdge("agent", END);

// Instrument the graph BEFORE compiling
Sentry.instrumentStateGraph(agent, {
  recordInputs: true,
  recordOutputs: true,
});

const graph = agent.compile({ name: "my_agent" });

const result = await graph.invoke({
  messages: [
    new SystemMessage("You are a helpful assistant."),
    new HumanMessage("Hello!"),
  ],
});

Or, instrument LangGraph's prebuilt createReactAgent:

import * as Sentry from "@sentry/react-native";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

// Instrument createReactAgent, then use the wrapped version in its place
const instrumentedCreateReactAgent =
  Sentry.instrumentCreateReactAgent(createReactAgent);

const agent = instrumentedCreateReactAgent({ llm, tools });

import * as Sentry from "@sentry/react-native";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

// Instrument createReactAgent, then use the wrapped version in its place
const instrumentedCreateReactAgent =
  Sentry.instrumentCreateReactAgent(createReactAgent);

const agent = instrumentedCreateReactAgent({ llm, tools });

Make sure tracing is enabled for the spans produced by this integration to be captured.

Configuration

Options

The following options control what data is captured from LangGraph operations:

recordInputs

Type: boolean (optional)

Records inputs to LangGraph operations (such as prompts and messages).

Defaults to true if sendDefaultPii is true.

recordOutputs

Type: boolean (optional)

Records outputs from LangGraph operations (such as generated text and responses).

Defaults to true if sendDefaultPii is true.

Supported Operations

By default, tracing support is added to the following LangGraph SDK calls:

• Agent Creation (gen_ai.create_agent) - Captures spans when compiling a StateGraph into an executable agent
• Agent Invocation (gen_ai.invoke_agent) - Captures spans for agent execution via invoke()

Supported Versions

• @langchain/langgraph: >=0.2.0 <2.0.0