fix(langgraph): Call instrumentLangGraph before .compile() (#16611)

Fix the `instrumentLangGraph` example in the Browser-Side Usage section
to call the helper **before** `.compile()`, not after.

`instrumentLangGraph` works by wrapping the `.compile()` method on a
`StateGraph` to intercept the compilation step and inject tracing. It
must be called before `.compile()` is invoked. The previous example
passed the already-compiled graph, meaning the compile step had already
happened and there was no hook point for the SDK to instrument.

Also updates the surrounding description from "wrapping a compiled
LangGraph graph" to "wrapping a StateGraph before compilation" to match
the correct usage.

Author: priscilawebdev

docs/platforms/javascript/common/configuration/integrations/langgraph.mdx

@@ -42,7 +42,7 @@ supported:
 
 <Alert>
 
-For meta-framework applications using all runtimes, you need to manually wrap your compiled graph with `instrumentLangGraph`. See instructions in the [Browser-Side Usage](#browser-side-usage) section.
+For meta-framework applications using all runtimes, you need to manually wrap your graph before compiling with `instrumentLangGraph`. See instructions in the [Browser-Side Usage](#browser-side-usage) section.
 
 </Alert>
 
@@ -52,7 +52,7 @@ For meta-framework applications using all runtimes, you need to manually wrap yo
 
 _Import name: `Sentry.langGraphIntegration`_
 
-The `langGraphIntegration` adds instrumentation for [`@langchain/langgraph`](https://www.npmjs.com/package/@langchain/langgraph) to capture spans by automatically wrapping LangGraph operations and recording AI agent interactions including agent invocations, graph executions, and node operations. 
+The `langGraphIntegration` adds instrumentation for [`@langchain/langgraph`](https://www.npmjs.com/package/@langchain/langgraph) to capture spans by automatically wrapping LangGraph operations and recording AI agent interactions including agent invocations, graph executions, and node operations.
 
 <PlatformSection notSupported={["javascript.bun", "javascript.cloudflare"]}>
 
@@ -98,11 +98,12 @@ For Cloudflare Workers, manual instrumentation is required using `instrumentLang
 
 </PlatformSection>
 
-The `instrumentLangGraph` helper adds instrumentation for [`@langchain/langgraph`](https://www.npmjs.com/package/@langchain/langgraph) to capture spans by wrapping a compiled LangGraph graph and recording AI agent interactions with configurable input/output recording. You need to manually wrap your compiled graph with this helper. See example below:
+The `instrumentLangGraph` helper adds instrumentation for [`@langchain/langgraph`](https://www.npmjs.com/package/@langchain/langgraph) to capture spans by wrapping a `StateGraph` before compilation and recording AI agent interactions with configurable input/output recording. You need to call this helper on the graph **before** calling `.compile()`. See example below:
 
 ```javascript
 import { ChatOpenAI } from "@langchain/openai";
 import { StateGraph, MessagesAnnotation, START, END } from '@langchain/langgraph';
+import { SystemMessage, HumanMessage } from '@langchain/core/messages';
 
 // Create LLM call
 const llm = new ChatOpenAI({
@@ -124,14 +125,14 @@ const agent = new StateGraph(MessagesAnnotation)
   .addEdge(START, 'agent')
   .addEdge('agent', END);
 
-const graph = agent.compile({ name: 'my_agent' });
-
-// Manually instrument the graph
-Sentry.instrumentLangGraph(graph, {
+// Instrument the graph before compiling
+Sentry.instrumentLangGraph(agent, {
   recordInputs: true,
   recordOutputs: true,
 });
 
+const graph = agent.compile({ name: 'my_agent' });
+
 // Invoke the agent
 const result = await graph.invoke({
   messages: [