feat(agents): Update JavaScript onboarding docs#106361
feat(agents): Update JavaScript onboarding docs#106361priscilawebdev merged 14 commits intomasterfrom
Conversation
github-actions
bot
added
the
Scope: Frontend
|
Example Before/After in Node: Before: 
After: |
|
Example Before/After in React: Before: After: 
|
| ? [ | ||
| {label: 'OpenAI SDK', value: 'openai'}, | ||
| {label: 'OpenAI Agents SDK', value: 'openai_agents'}, | ||
| {label: 'Anthropic SDK', value: 'anthropic'}, | ||
| {label: 'Google Gen AI SDK', value: 'google_genai'}, | ||
| {label: 'LangChain', value: 'langchain'}, | ||
| {label: 'LangGraph', value: 'langgraph'}, | ||
| {label: 'LiteLLM', value: 'litellm'}, | ||
| {label: 'Pydantic AI', value: 'pydantic_ai'}, | ||
| {label: 'Other', value: 'manual'}, | ||
| ] |
There was a problem hiding this comment.
Yes, this change could go to other PR, but this inspired me to create ENUMS and constants, so I just updated everything here too.
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
static/app/views/insights/pages/agents/llmOnboardingInstructions.tsx
Outdated
Show resolved
Hide resolved
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
ArthurKnaus
left a comment
ArthurKnaus
left a comment
There was a problem hiding this comment.
Looks good so far. I am just being a bit defensive as we had so many problems with the onboarding in the past.
| ? tct( | ||
| 'Import and initialize the Sentry SDK - the [integration] will be enabled automatically:', | ||
| { | ||
| integration: | ||
| AGENT_INTEGRATION_LABELS[selected as AgentIntegration] ?? selected, | ||
| } | ||
| ) |
There was a problem hiding this comment.
There are edge cases to this. E.g. for next-js if you use the edge runtime, you have to use do some manual steps as we cannot auto-enable afaik.
cc @RulaKhaled
There was a problem hiding this comment.
Also for meta frameworks the situation is in general a bit more complicated. E.g. we need to tell them to do it in the BE Sentry init call. And some might be browser based, e.g. last time I checked tanstackstart is a SPA per default and would need to be configured like a browser platform.
again @RulaKhaled pls correct me if I am wrong
There was a problem hiding this comment.
There are edge cases to this. E.g. for next-js if you use the edge runtime, you have to use do some manual steps as we cannot auto-enable afaik. cc @RulaKhaled
oh this is true. good catch! I saw this info when restructuring the docs here https://github.com/getsentry/sentry-docs/blob/20087dbc1ac538e977a13076fdce1126a715b2b5/docs/platforms/javascript/common/configuration/integrations/anthropic.mdx (Funny that this was present just for Anthropic). I will address this. thanks
There was a problem hiding this comment.
Also for meta frameworks the situation is in general a bit more complicated. E.g. we need to tell them to do it in the BE Sentry init call. And some might be browser based, e.g. last time I checked tanstackstart is a SPA per default and would need to be configured like a browser platform.
again @RulaKhaled pls correct me if I am wrong
That’s a very good point, and I wasn’t entirely sure why only the server-side is shown in the app onboarding. I assumed it might have been an intentional choice to avoid presenting something too extensive. I’ll think about how we can present this more clearly, and we can likely address it incrementally across multiple PRs.
There was a problem hiding this comment.
yeah, in the past the agent monitoring was only available on the BE
| content: isNodeOrMetaPlatform | ||
| ? nonManualContent | ||
| : [ | ||
| ...nonManualContent, | ||
| ...getBrowserAgentMonitoringOnboardingConfiguration({ | ||
| integration: selected, | ||
| packageName, | ||
| importMode, | ||
| }), | ||
| ], |
There was a problem hiding this comment.
Checking for isNodeOrMetaPlatform all the time and then conditionally show different content all the time requires quite a bit of mental acrobatics. Couldn't we simplify this by splitting it into getNodeAgentMonitoringOnboarding and getBrowserAgentMonitoringOnboarding?
(+ maybe something extra for fullstack / meta?)
There was a problem hiding this comment.
I had a similar concern, but decided to proceed with this approach for now since it’s simpler, and we can improve it in a follow-up. At the moment, the onboarding documentation is misleading, and it’s important that we fix it.
There was a problem hiding this comment.
I will address this in the issue: https://linear.app/getsentry/issue/TET-1759/split-agent-monitoring-onboarding-into-separate-node-and-browser
| export enum AgentIntegration { | ||
| OPENAI = 'openai', | ||
| OPENAI_AGENTS = 'openai_agents', | ||
| ANTHROPIC = 'anthropic', | ||
| GOOGLE_GENAI = 'google_genai', | ||
| LANGCHAIN = 'langchain', | ||
| LANGGRAPH = 'langgraph', | ||
| LITTELLM = 'litellm', | ||
| PYDANTIC_AI = 'pydantic_ai', | ||
| VERCEL_AI = 'vercel_ai', | ||
| MANUAL = 'manual', | ||
| } |
priscilawebdev
deleted the
priscila/feat/update-ai-agent-onboarding-for-javascript-platforms
branch
2 participants
Problem
Node.js–based platforms
The instructions currently tell users to add integrations explicitly. However, these integrations are enabled by default, and manual addition is only required when customization is needed.
Browser-based platforms
The instructions are incorrect because integrations are not exposed in browser environments. To capture AI spans, users must manually instrument their applications—either by creating custom spans or by using Sentry’s helper utilities.
LLM instructions
The instructions are incorrect for the same reasons outlined in points 1 and 2 above.
Solution
This PR updates the documentation to reflect the correct setup and instrumentation requirements for each platform.
Note:
I could, but decided against adding the "Copy for LLm" button to the JavaScript instructions because of the verify section.
closes https://linear.app/getsentry/issue/TET-1698/js-ai-integrations-are-autoenabled