docs: add guide for New Relic integration #5631
Conversation
WalkthroughAdds a New Relic integration guide to the React observability docs, including a sample Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as Developer
participant Server as App Server
participant NR as New Relic Agent
participant Browser as SPA / Browser
participant Collector as New Relic Collector
rect rgb(230,248,255)
Dev->>Server: start server with `node -r newrelic .output/server/index.mjs`
Server->>NR: require('newrelic') -> load `newrelic.js`
end
rect rgb(240,255,230)
Browser->>Server: HTTP request / route
Server->>Server: nrTransactionMiddleware sets transaction name
Server->>NR: NR.setTransactionName(routeId)\nNR.addCustomAttributes({ route, method, user })
Server->>Collector: NR sends traces & events
Collector-->>NR: ingest ack
end
rect rgb(255,248,230)
Browser->>Browser: client-side NR script in `__root.tsx` collects SPA telemetry
Browser->>Collector: browser agent sends telemetry
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 0f1f05b
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
docs/start/framework/react/guide/observability.md (3)
491-506: Add environment variable guidance and file placement instructions.The configuration example hardcodes the license key as a placeholder, but provides no guidance on using environment variables in production or where to place this file. Compare this to the Sentry section, which references environment variables via
import.meta.env.Add a note explaining that:
- The
newrelic.jsfile should be placed at the root of your project- The
license_keyshould be loaded from environment variables in production-// newrelic.js - New Relic agent configuration +// newrelic.js - New Relic agent configuration (place at project root) exports.config = { app_name: ['YourTanStackApp'], // Your application name in New Relic - license_key: 'YOUR_NEW_RELIC_LICENSE_KEY', // Your New Relic license key + license_key: process.env.NEW_RELIC_LICENSE_KEY || 'YOUR_NEW_RELIC_LICENSE_KEY', agent_enabled: true,
538-540: Explain the build output path and provide context for the run command.The command
node -r newrelic .output/server/index.mjsassumes knowledge of the build output structure. Clarify that.output/server/index.mjsis the compiled server entry point after building, and provide the build step if relevant.-```bash -node -r newrelic .output/server/index.mjs -``` +```bash +# Build the app first (adjust command based on your setup) +npm run build + +# Run with New Relic monitoring enabled +# The -r flag requires the newrelic module before app startup +node -r newrelic .output/server/index.mjs +```
491-541: Add resource links and example repository reference for consistency.The Sentry section includes links to documentation and a working example (
[Get started with Sentry →](...) | [View integration example →](...)). The New Relic section should follow the same pattern for consistency and to help users get started quickly.After the bash code block (line 540), add:
+ +[Get started with New Relic →](https://newrelic.com/signup) | [View New Relic Node.js agent docs →](https://docs.newrelic.com/docs/apm/agents/nodejs-agent/)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/start/framework/react/guide/observability.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/react/guide/observability.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/react/guide/observability.md
🔇 Additional comments (1)
docs/start/framework/react/guide/observability.md (1)
508-536: Verify New Relic API methods and clarify import precedence.The
newrelicimport at line 510 is correctly placed first (required for agent setup), and the API callssetControllerName()andaddCustomAttributes()appear valid. However, the example would benefit from a brief comment explaining why this custom handler is needed—to group transactions by route rather than unique URLs.Consider adding a clarifying comment:
const customHandler = defineHandlerCallback(async (ctx) => { - // We do this so that transactions are grouped under the route ID instead of unique URLs + // Group transactions by route ID instead of unique URLs for better organization in New Relic
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
| defineHandlerCallback, | ||
| } from '@tanstack/react-start/server' | ||
|
|
||
| const customHandler = defineHandlerCallback(async (ctx) => { |
There was a problem hiding this comment.
this will only be invoked for SSR then, not for server functions or server routes. this restriction should be documented or better, resolved
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/start/framework/react/guide/observability.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/react/guide/observability.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/framework/react/guide/observability.md
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Preview
| ```bash | ||
| node -r newrelic .output/server/index.mjs | ||
| ``` |
There was a problem hiding this comment.
Clarify or parameterize the build output path.
The CLI command assumes a specific build output structure (.output/server/index.mjs), which may vary depending on project configuration. Consider adding guidance on how to locate the correct server entry point or reference the framework's build configuration documentation.
🤖 Prompt for AI Agents
In docs/start/framework/react/guide/observability.md around lines 548 to 550,
the example command hard-codes the build output path (.output/server/index.mjs)
which may not match every project's build output; update the guidance to show
how to determine or parameterize the server entry point (e.g., explain to locate
the server entry in the project's build output or bundler config and replace the
path, show an example using an environment variable or npm script placeholder
like NODE_SERVER_ENTRY) and add a short note pointing readers to the
framework/build configuration docs for where to find the actual output path.
| id: 'new-relic', | ||
|
|
||
| // either copy/paste your New Relic integration script here | ||
| children: `...`, | ||
|
|
||
| // or you can create it in your public folder and then reference it here | ||
| src: '/newrelic.js', | ||
| }, |
There was a problem hiding this comment.
Provide a complete or clearer example for the New Relic script integration.
Line 597 shows children: \...`` as a placeholder, which doesn't adequately guide users on what content should go there. The comment mentions "copy/paste your New Relic integration script here," but the example is too vague.
Consider either:
- Providing a representative example of what a real New Relic script snippet looks like
- Removing the inline approach and emphasizing the
src: '/newrelic.js'approach as the recommended method - Adding a link to New Relic's documentation on how to obtain the script snippet
🤖 Prompt for AI Agents
In docs/start/framework/react/guide/observability.md around lines 594 to 601,
the New Relic integration example uses a vague placeholder (`children: \`...\``)
that doesn't show what users must paste; replace that placeholder with either a
representative New Relic browser agent script snippet (a short, sanitized
example of the <script> tag and minimal config fields) or remove the inline
script example and clearly recommend using the external file approach (keep
`src: '/newrelic.js'`) while adding a link to New Relic's official docs for
obtaining the exact snippet so users know where to get the authoritative code.
2 participants
Given that Sentry is still not ready for RC, New Relic is pretty much the next best thing.
Added a quick guide on how to have it setup for monitoring.
Summary by CodeRabbit