Skip to content

Commit 7eb8649

Browse files
priscilawebdevpriscilawebdev
authored
ref(docs): Restructure Anthropic integration documentation (#16047)
- Separate server-side and browser-side usage sections for clarity - Document anthropicAIIntegration for Node.js platforms (auto-enabled by default) - Document instrumentAnthropicAiClient for browser and edge runtimes - Add special handling for Cloudflare Workers edge runtime - Simplify code examples by omitting import statements - Move configuration and supported versions to shared sections - Improve platform-specific visibility using PlatformSection components closes https://linear.app/getsentry/issue/TET-1738/anthropic-ai-integration-restructure-and-improve-docs
1 parent 17abd61 commit 7eb8649

1 file changed

Lines changed: 88 additions & 79 deletions

File tree

  • docs/platforms/javascript/common/configuration/integrations

‎docs/platforms/javascript/common/configuration/integrations/anthropic.mdx‎

Lines changed: 88 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Anthropic
3-
description: "Adds instrumentation for Anthropic API."
3+
description: "Adds instrumentation for the Anthropic SDK."
44
supported:
55
- javascript.node
66
- javascript.aws-lambda
@@ -25,67 +25,75 @@ supported:
2525
- javascript.tanstackstart-react
2626
- javascript.cloudflare
2727
- javascript
28+
- javascript.react
29+
- javascript.angular
30+
- javascript.vue
31+
- javascript.svelte
32+
- javascript.solid
33+
- javascript.ember
34+
- javascript.gatsby
2835
---
2936

37+
<PlatformSection notSupported={["javascript", "javascript.react", "javascript.angular", "javascript.vue", "javascript.svelte", "javascript.solid", "javascript.ember", "javascript.gatsby"]}>
38+
39+
## Server-Side Usage
40+
41+
_Import name: `Sentry.anthropicAIIntegration`_
42+
43+
The `anthropicAIIntegration` adds instrumentation for the [`@anthropic-ai/sdk`](https://www.npmjs.com/package/@anthropic-ai/sdk) API to capture spans by wrapping Anthropic SDK calls and recording LLM interactions.
44+
45+
46+
<PlatformSection notSupported={["javascript.nextjs", "javascript.nuxt", "javascript.solidstart", "javascript.sveltekit", "javascript.react-router", "javascript.remix", "javascript.astro", "javascript.tanstackstart-react", "javascript.bun", "javascript.cloudflare"]}>
47+
3048
<Alert>
3149

32-
This integration works in the Node.js, Cloudflare Workers, Vercel Edge Functions, and browser runtimes. It requires SDK version `10.12.0` or higher.
50+
Enabled by default and automatically captures spans for Anthropic SDK calls. Requires Sentry SDK version `10.28.0` or higher.
3351

3452
</Alert>
3553

36-
_Import name: `Sentry.anthropicAIIntegration`_
54+
</PlatformSection>
3755

38-
The `anthropicAIIntegration` adds instrumentation for the `@anthropic-ai/sdk` to capture spans by automatically wrapping Anthropic client calls and recording LLM interactions with configurable input/output recording.
56+
<PlatformSection supported={["javascript.nextjs", "javascript.nuxt", "javascript.solidstart", "javascript.sveltekit", "javascript.react-router", "javascript.remix", "javascript.astro", "javascript.tanstackstart-react", "javascript.bun", "javascript.cloudflare"]}>
3957

40-
<PlatformSection notSupported={["javascript.cloudflare", "javascript.nextjs", "javascript"]}>
41-
It is enabled by default and will automatically capture spans for Anthropic API method calls. You can opt-in to capture inputs and outputs by setting `recordInputs` and `recordOutputs` in the integration config:
58+
<Alert>
4259

43-
```javascript
44-
Sentry.init({
45-
dsn: "____PUBLIC_DSN____",
46-
tracesSampleRate: 1.0,
47-
integrations: [
48-
Sentry.anthropicAIIntegration({
49-
recordInputs: true,
50-
recordOutputs: true,
51-
}),
52-
],
53-
});
54-
```
60+
Enabled by default and automatically captures spans for Anthropic SDK calls. Requires Sentry SDK version `10.28.0` or higher.
61+
62+
For other runtimes, like the Browser, the instrumentation needs to be manually enabled. See the [setup instructions below](#browser-side-usage).
63+
64+
</Alert>
65+
66+
</PlatformSection>
67+
68+
To customize what data is captured (such as inputs and outputs), see the [Options](#options) in the Configuration section.
5569

5670
</PlatformSection>
5771

72+
<PlatformSection supported={["javascript", "javascript.react", "javascript.angular", "javascript.vue", "javascript.svelte", "javascript.solid", "javascript.ember", "javascript.gatsby", "javascript.nextjs", "javascript.nuxt", "javascript.solidstart", "javascript.sveltekit", "javascript.react-router", "javascript.remix", "javascript.astro", "javascript.tanstackstart-react", "javascript.electron", "javascript.cloudflare"]}>
73+
74+
## Browser-Side Usage
75+
76+
_Import name: `Sentry.instrumentAnthropicAiClient`_
77+
5878
<PlatformSection supported={["javascript.cloudflare"]}>
59-
For Cloudflare Workers, you need to manually instrument the Anthropic client using the `instrumentAnthropicAiClient` helper:
6079

61-
```javascript
62-
import * as Sentry from "@sentry/cloudflare";
63-
import Anthropic from "@anthropic-ai/sdk";
80+
<Alert>
6481

65-
const anthropic = new Anthropic();
66-
const client = Sentry.instrumentAnthropicAiClient(anthropic, {
67-
recordInputs: true,
68-
recordOutputs: true,
69-
});
82+
For Cloudflare Workers, manual instrumentation is required using `instrumentAnthropicAiClient`.
7083

71-
// Use the wrapped client instead of the original anthropic instance
72-
const response = await client.messages.create({
73-
model: "claude-3-5-sonnet-20241022",
74-
max_tokens: 1024,
75-
messages: [{ role: "user", content: "Hello!" }],
76-
});
77-
```
84+
</Alert>
7885

7986
</PlatformSection>
8087

81-
<PlatformSection supported={["javascript"]}>
82-
For browser applications, you need to manually instrument the Anthropic client using the `instrumentAnthropicAiClient` helper:
88+
The `instrumentAnthropicAiClient` helper adds instrumentation for the [`@anthropic-ai/sdk`](https://www.npmjs.com/package/@anthropic-ai/sdk) API to capture spans by wrapping Anthropic SDK calls and recording LLM interactions with configurable input/output recording. You need to manually wrap your Anthropic client instance with this helper. See example below:
8389

8490
```javascript
85-
import * as Sentry from "@sentry/browser";
8691
import Anthropic from "@anthropic-ai/sdk";
8792

88-
const anthropic = new Anthropic();
93+
const anthropic = new Anthropic({
94+
apiKey: "your-api-key", // Warning: API key will be exposed in browser!
95+
});
96+
8997
const client = Sentry.instrumentAnthropicAiClient(anthropic, {
9098
recordInputs: true,
9199
recordOutputs: true,
@@ -99,41 +107,68 @@ const response = await client.messages.create({
99107
});
100108
```
101109

110+
To customize what data is captured (such as inputs and outputs), see the [Options](#options) in the Configuration section.
111+
102112
</PlatformSection>
103113

104-
## Options
114+
## Configuration
115+
116+
### Options
117+
118+
The following options control what data is captured from Anthropic SDK calls:
119+
120+
#### `recordInputs`
121+
122+
_Type: `boolean` (optional)_
123+
124+
Records inputs to Anthropic SDK calls (such as prompts and messages).
105125

106-
### `recordInputs`
126+
Defaults to `true` if `sendDefaultPii` is `true`.
127+
128+
#### `recordOutputs`
107129

108-
_Type: `boolean`_
130+
_Type: `boolean` (optional)_
109131

110-
Records inputs to Anthropic API method calls (such as prompts and messages).
132+
Records outputs from Anthropic SDK calls (such as generated text and responses).
111133

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

136+
**Usage**
137+
138+
<PlatformSection notSupported={["javascript", "javascript.react", "javascript.angular", "javascript.vue", "javascript.svelte", "javascript.solid", "javascript.ember", "javascript.gatsby"]}>
139+
140+
Using the `anthropicAIIntegration` integration:
141+
114142
```javascript
115143
Sentry.init({
116-
integrations: [Sentry.anthropicAIIntegration({ recordInputs: true })],
144+
dsn: "____PUBLIC_DSN____",
145+
// Tracing must be enabled for agent monitoring to work
146+
tracesSampleRate: 1.0,
147+
integrations: [
148+
Sentry.anthropicAIIntegration({
149+
// your options here
150+
}),
151+
],
117152
});
118153
```
119154

120-
### `recordOutputs`
155+
</PlatformSection>
121156

122-
_Type: `boolean`_
157+
<PlatformSection supported={["javascript", "javascript.react", "javascript.angular", "javascript.vue", "javascript.svelte", "javascript.solid", "javascript.ember", "javascript.gatsby", "javascript.nextjs", "javascript.nuxt", "javascript.solidstart", "javascript.sveltekit", "javascript.react-router", "javascript.remix", "javascript.astro", "javascript.tanstackstart-react", "javascript.electron", "javascript.cloudflare"]}>
123158

124-
Records outputs from Anthropic API method calls (such as generated text and responses).
125-
126-
Defaults to `true` if `sendDefaultPii` is `true`.
159+
Using the `instrumentAnthropicAiClient` helper:
127160

128161
```javascript
129-
Sentry.init({
130-
integrations: [Sentry.anthropicAIIntegration({ recordOutputs: true })],
162+
const client = Sentry.instrumentAnthropicAiClient(anthropic, {
163+
// your options here
131164
});
132165
```
133166

134-
## Configuration
167+
</PlatformSection>
135168

136-
By default this integration adds tracing support to Anthropic API method calls including:
169+
## Supported Operations
170+
171+
By default, tracing support is added to the following Anthropic SDK calls:
137172

138173
- `messages.create()` - Create messages with Claude models
139174
- `messages.stream()` - Stream messages with Claude models
@@ -143,33 +178,7 @@ By default this integration adds tracing support to Anthropic API method calls i
143178
- `models.retrieve()` - Retrieve model details
144179
- `beta.messages.create()` - Beta messages API
145180

146-
The integration will automatically detect streaming vs non-streaming requests and handle them appropriately.
147-
148-
<PlatformSection supported={['javascript.nextjs']}>
149-
150-
## Edge runtime
151-
152-
This integration is automatically instrumented in the Node.js runtime. For Next.js applications using the Edge runtime, you need to manually instrument the Anthropic client:
153-
154-
```javascript
155-
import * as Sentry from "@sentry/nextjs";
156-
import Anthropic from "@anthropic-ai/sdk";
157-
158-
const anthropic = new Anthropic();
159-
const client = Sentry.instrumentAnthropicAiClient(anthropic, {
160-
recordInputs: true,
161-
recordOutputs: true,
162-
});
163-
164-
// Use the wrapped client instead of the original anthropic instance
165-
const response = await client.messages.create({
166-
model: "claude-3-5-sonnet-20241022",
167-
max_tokens: 1024,
168-
messages: [{ role: "user", content: "Hello!" }],
169-
});
170-
```
171-
172-
</PlatformSection>
181+
Streaming and non-streaming requests are automatically detected and handled appropriately.
173182

174183
## Supported Versions
175184

0 commit comments

Comments
 (0)