---
title: "LangGraph"
description: "Manually instrument LangGraph in React Native to capture spans for agent compilation and invocation."
url: https://docs.sentry.io/platforms/react-native/integrations/langgraph/
---

# 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](https://docs.sentry.io/platforms/react-native/integrations/langgraph.md#usage)

```javascript
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`:

```javascript
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](https://docs.sentry.io/platforms/react-native/tracing.md) for the spans produced by this integration to be captured.

## [Configuration](https://docs.sentry.io/platforms/react-native/integrations/langgraph.md#configuration)

### [Options](https://docs.sentry.io/platforms/react-native/integrations/langgraph.md#options)

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

#### [`recordInputs`](https://docs.sentry.io/platforms/react-native/integrations/langgraph.md#recordinputs)

*Type: `boolean` (optional)*

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

Defaults to `true` if `sendDefaultPii` is `true`.

#### [`recordOutputs`](https://docs.sentry.io/platforms/react-native/integrations/langgraph.md#recordoutputs)

*Type: `boolean` (optional)*

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

Defaults to `true` if `sendDefaultPii` is `true`.

## [Supported Operations](https://docs.sentry.io/platforms/react-native/integrations/langgraph.md#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](https://docs.sentry.io/platforms/react-native/integrations/langgraph.md#supported-versions)

* `@langchain/langgraph`: `>=0.2.0 <2.0.0`