chore: update frontend monitoring docs

[amlannandy]

• Update the other frontend monitoring docs to follow the same conventions that were discussed in chore: update web vitals monitoring doc #1796
• Update the doc to ensure that users using different frameworks (next, nuxt angular) can use the docs reliably. Our docs for sending logs, traces, metric are already framework agnostic. Just added another section in the end to handle special cases for Nextjs and Nuxt. Added code examples for all popular frameworks
• All docs using ES2020 code snippets

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
signoz-web	Ready	Preview	Comment	Nov 11, 2025 4:47pm

[makeavish]

@gemini-cli /review

[github-actions]

🤖 Hi @makeavish, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[makeavish]

@claude /review

[claude]

Claude finished @makeavish's task —— View job

---

Review Summary

I've reviewed the frontend monitoring documentation updates against the guidelines in CONTRIBUTING.md. Overall, the PR successfully achieves its goals of making the docs framework-agnostic and updating to ES2020 syntax. Here's my assessment:

✅ Strengths

1. Framework-agnostic approach: Excellent addition of framework-specific tabs (React, Next.js, Nuxt, Angular, Vue, Svelte) that make the docs accessible to developers across different ecosystems.

2. Comprehensive coverage: All three docs (logs, metrics, traces) follow a consistent structure with clear prerequisites, setup steps, and validation sections.

3. Modern code examples: Successfully updated to ES2020 with proper import/export syntax and modern JavaScript features.

4. Good cross-linking: Includes links to relevant SigNoz docs (ingestion endpoints, keys, explorers).

5. Metadata compliance: All three files have proper frontmatter with date, id, title, description, and tags.

⚠️ Issues Found

I've created inline comments for the following issues:

1. Placeholder formatting (all 3 files): The <<INGESTION_KEY>> placeholder should be wrapped in quotes to match string format requirements. Affects:

   • sending-logs.mdx: lines 73, 109
   • sending-metrics.mdx: lines 74, 116
   • sending-traces.mdx: lines 84, 135

2. Code syntax errors:

   • sending-logs.mdx line 451: Missing async keyword on function that uses await
   • sending-traces.mdx line 636: Manual instrumentation example missing imports and has syntax issues

3. Inconsistency:

   • sending-traces.mdx line 169: Placeholder <<SIGNOZ_COLLECTOR_URL>> appears only in JavaScript version, not TypeScript

📋 PR Checklist Assessment

Based on CONTRIBUTING.md guidelines:

• ✅ Frontmatter complete with required fields
• ✅ SEO considerations addressed
• ✅ Framework-specific guidance provided (excellent tab implementation)
• ✅ Commands and code snippets include context
• ⚠️ Code snippets have minor syntax errors (see inline comments)
• ✅ Validation sections included
• ⚠️ Missing comprehensive troubleshooting sections - None of the three docs include a ## Troubleshooting section with common issues/fixes (required per guidelines)
• ✅ Demo applications linked
• ✅ Images use WebP format
• ✅ Cross-linking to SigNoz docs present

🔧 Recommendations

1. Fix the inline comment issues to ensure code examples are copy-paste ready
2. Add Troubleshooting sections to all three docs covering:
   • "Logs/Metrics/Traces not appearing in SigNoz"
   • CORS issues with self-hosted setups
   • Common ingestion key/endpoint errors
   • Framework-specific issues (e.g., Next.js SSR considerations)
3. Consider adding Cloud vs Self-Host admonition using the drop-in snippet from CONTRIBUTING.md since these are currently Cloud-focused guides

Overall Assessment

This is a solid improvement to the frontend monitoring docs. The framework-agnostic approach is exactly what users need. Once the code syntax issues are fixed and troubleshooting sections are added, this will meet all the requirements from CONTRIBUTING.md.

---

[github-actions]

📋 Docs Review Summary

• Scope: documentation-only review. Non-docs changes were ignored.
• The PR updates the frontend monitoring docs to make them framework-agnostic and align them with the latest conventions. The changes are well-structured and provide clear instructions for different frameworks.

✅ PR Checklist Reference (from CONTRIBUTING.md)

• The PR follows most of the guidelines from the CONTRIBUTING.md file.
• I have suggested some minor changes to align the PR with the contribution guidelines.

🔍 General Feedback

• The use of placeholders is inconsistent with the CONTRIBUTING.md file. I have added comments to fix this.
• Some code snippets are missing semicolons at the end of lines. I have added comments to fix this.
• The files do not end with a newline. I have added comments to fix this.

[github-actions]

🤖 Hi @amlannandy, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[claude]

Claude finished @amlannandy's task —— View job

---

Documentation Review Complete

I've reviewed the frontend monitoring documentation updates against CONTRIBUTING.md guidelines and created inline comments for specific issues.

Todo List:

• Read CONTRIBUTING.md for documentation standards
• Review sending-logs.mdx for compliance and previous feedback
• Review sending-metrics.mdx for compliance and previous feedback
• Review sending-traces.mdx for compliance and previous feedback
• Create inline comments for specific issues
• Post final review summary

---

Summary

The PR successfully achieves its main goals of making the docs framework-agnostic with excellent tab implementations for React, Next.js, Nuxt, Angular, Vue, and Svelte. The structure is consistent across all three files with good code examples using ES2020 syntax.

Issues Identified

I've created 6 inline comments on specific code issues. Here's the breakdown:

Critical Issues (Block Merge):

1. Placeholder Format Violation - All 3 files

   • CONTRIBUTING.md line 87 specifies: "Use angle-bracket placeholders like <service-name>, <region>, <SIGNOZ_INGESTION_KEY>"
   • Current code uses <<INGESTION_KEY>> instead of <INGESTION_KEY>
   • Also affects: <<SERVICE_NAME>>, <<INGESTION_REGION>>, <<SIGNOZ_COLLECTOR_URL>>, <<YOUR_FRONTEND_URL>>, <<span-name>>, <<api-endpoint>>
   • These need quotes when used as string values: 'signoz-ingestion-key': '<INGESTION_KEY>'
   • Inline comments created on sending-logs.mdx:73, sending-metrics.mdx:74, sending-traces.mdx:84

2. Missing Troubleshooting Sections - All 3 files

   • CONTRIBUTING.md lines 271-273 require: "Add a ## Troubleshooting section with symptoms, causes, exact fixes, and verification"
   • None of the three docs include troubleshooting sections
   • Should cover common issues like:
     • Data not appearing in SigNoz
     • CORS issues with self-hosted setups
     • Authentication/ingestion key errors
     • Framework-specific issues (e.g., Next.js SSR considerations)
   • Note: I couldn't create inline comments at the end of files, but this applies to all three docs

Code Issues:

3. Missing async keyword - sending-logs.mdx:452

   • Inline comment created with fix

4. Inconsistent placeholder - sending-traces.mdx:169

   • Line 169 mentions <<SIGNOZ_COLLECTOR_URL>> only in JavaScript version, not TypeScript version
   • Inline comment created

5. Incomplete manual instrumentation example - sending-traces.mdx:636

   • Missing imports for tracer, context, trace
   • Code won't work as copy-paste without proper imports
   • Inline comment created with complete example

PR Checklist Assessment

Based on CONTRIBUTING.md "Docs PR Checklist" (lines 315-332):

• ✅ Frontmatter complete with required fields
• ✅ SEO: keywords in title, description, URL, first paragraph
• ✅ Framework-specific tabs implemented excellently
• ✅ Commands explained with context
• ⚠️ Code snippets have syntax/formatting errors (issues 3, 5)
• ✅ Validation sections included
• ❌ Missing comprehensive troubleshooting sections (all 3 files)
• ✅ Demo applications linked
• ✅ Images use WebP format
• ✅ Cross-linking present

Recommendations

Must Fix (per CONTRIBUTING.md):

1. ✅ Update all placeholders from <<placeholder>> to <placeholder> format (see inline comments)
2. ✅ Add quotes around placeholder string values in code (see inline comments)
3. ❌ Add ## Troubleshooting sections to all three docs (couldn't create inline comments at file end)
4. ✅ Fix the async function syntax (see inline comment)
5. ✅ Complete the manual instrumentation example with imports (see inline comment)

Nice to Have:

• Consider adding the Cloud vs Self-Host drop-in snippet (CONTRIBUTING.md lines 185-200) since these docs include self-hosted notes but are primarily Cloud-focused
• Add semicolons consistently in code examples (some are missing per previous bot review)
• Ensure all files end with a newline (appears to be fixed in latest commit)

Overall Assessment

This is a significant improvement to the frontend monitoring docs. The framework-agnostic approach with tabs is exactly what users need. However, the placeholder format violations and missing troubleshooting sections need to be addressed before merge as they are explicit requirements in CONTRIBUTING.md.

The inline comments provide specific fixes for code issues. The troubleshooting sections need to be added manually to all three files.

[github-actions]

📋 Docs Review Summary

• Scope: documentation-only review. Non-docs changes were ignored.
• This pull request significantly improves the frontend monitoring documentation by adding framework-specific examples and clarifying the setup process. The changes make the documentation more accessible and easier to follow for a wider range of users. The overall structure is more logical and aligns better with our standards.

✅ PR Checklist Reference (from CONTRIBUTING.md)

• Frontmatter: Pass. The frontmatter now includes a description, which is a great addition for SEO and clarity.
• Placeholders: Needs fixes. The placeholders have been changed from <PLACEHOLDER> to <<PLACEHOLDER>>, which is inconsistent with our CONTRIBUTING.md. I've added a comment to address this. This applies to all three files in this PR.
• Commands: Needs fixes. The npm install and yarn add commands were changed to a single line, which reduces readability. I've added a comment suggesting a return to the multi-line format. This applies to all three files in this PR.
• Content Structure: Pass. The new structure with framework-specific tabs is a major improvement.

🔍 General Feedback

• The use of entityName="plans" in the <Tabs> component is noted. While not explicitly in CONTRIBUTING.md, it appears to be a valid and useful feature for creating distinct tab groups.
• The addition of instrumentation.ts and framework-specific import instructions is a fantastic improvement that will help users get started much more quickly.

[makeavish]

1. CIs are failing please check
2. Note saying This step is only needed when using NextJs 14 and below is unclear. Update it to mention instrumentationHook config in next.config.js only needs to enabled in NextJs versions 14 or below
3. Condition in NextJs section seems to be missing:
4. We should remove example code for backend as it lengthens doc without adding any value. Any code post this line - For the purpose of this guide, we have setup a simple Node.js API with instrumentation.
5. This line - import { SpanProcessor } from '@opentelemetry/sdk-trace-web'; is missing for .js, is it intentional?
6. Zone context manager - #1796 (comment)
7. Will the instrumentation work for Nextjs when someone already is using vercel/otel? - https://signoz-web-git-chore-update-frontend-docs-signoz.vercel.app/docs/instrumentation/opentelemetry-nextjs/
8. Will the instrumetation work for Nuxtjs work for users who have already instrumented following this doc - https://signoz-web-git-chore-update-frontend-docs-signoz.vercel.app/docs/instrumentation/opentelemetry-nuxtjs/

Should we have a single separate doc for Nextjs and Nuxtjs as they are full stack frameworks?

[amlannandy]

@makeavish Addressed points 1-6.

• For no. 5, it's not required in the JS code snippet as it's a type definition only needed in TypeScript
• Tested no. 7 and no. 8, no issues there. User can follow the backend setup doc and then later come to the frontend setup doc and there should be no issues as long as they use the same ingestion key and url