|
4 | 4 |
|
5 | 5 | This feature allows converting any page on the Sentry documentation site to a plain markdown format by simply appending `llms.txt` to the end of any URL. The feature extracts the actual page content from the source MDX files and converts it to clean markdown, making the documentation more accessible to Large Language Models (LLMs) and other automated tools. |
6 | 6 |
|
7 | | -## ✅ **Feature Status: WORKING** |
| 7 | +## ✅ **Feature Status: FULLY WORKING** |
8 | 8 |
|
9 | | -The feature successfully extracts full page content from source MDX files and converts JSX components to clean markdown format. |
| 9 | +The feature successfully extracts full page content from source MDX files, resolves platform-specific code snippets, and converts JSX components to clean markdown format. |
| 10 | + |
| 11 | +## 🚀 **Major Update: Code Snippets Included!** |
| 12 | + |
| 13 | +The feature now properly resolves `<PlatformContent includePath="..." />` components by loading the actual platform-specific code snippets from the `platform-includes/` directory. |
| 14 | + |
| 15 | +### Code Snippet Resolution Features |
| 16 | +- ✅ **Platform Detection**: Automatically detects platform and guide from URL path |
| 17 | +- ✅ **Dynamic Includes**: Loads content from `platform-includes/{section}/{platform}.{guide}.mdx` |
| 18 | +- ✅ **Fallback Handling**: Falls back to platform-level or generic includes if specific ones don't exist |
| 19 | +- ✅ **Code Block Preservation**: Existing markdown code blocks are preserved during JSX cleanup |
| 20 | +- ✅ **Multiple Platforms**: Works correctly across different JavaScript frameworks (React, Next.js, Vue, etc.) |
10 | 21 |
|
11 | 22 | ## Usage Examples |
12 | 23 |
|
13 | | -### React Tracing Documentation |
| 24 | +### React User Feedback with Code Snippets |
14 | 25 | ``` |
15 | | -Original: https://docs.sentry.io/platforms/javascript/guides/react/tracing/ |
16 | | -LLMs.txt: https://docs.sentry.io/platforms/javascript/guides/react/tracing/llms.txt |
| 26 | +Original: https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/ |
| 27 | +LLMs.txt: https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/llms.txt |
| 28 | +``` |
| 29 | + |
| 30 | +**Now Includes**: |
| 31 | +- **Prerequisites**: Full SDK requirements and browser compatibility |
| 32 | +- **Installation**: Actual npm/yarn/pnpm commands for React |
| 33 | +- **Setup**: Complete JavaScript configuration code |
| 34 | +- **API Examples**: Actual code snippets for user feedback implementation |
| 35 | + |
| 36 | +### Next.js User Feedback (Platform-Specific) |
| 37 | +``` |
| 38 | +Original: https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/ |
| 39 | +LLMs.txt: https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/llms.txt |
17 | 40 | ``` |
18 | 41 |
|
19 | | -**Result**: Full tracing documentation with setup instructions, configuration options, and code examples - all converted to clean markdown. |
| 42 | +**Shows Next.js-Specific Content**: |
| 43 | +```bash |
| 44 | +npx @sentry/wizard@latest -i nextjs |
| 45 | +``` |
| 46 | +Instead of generic npm install commands. |
20 | 47 |
|
21 | | -### Other Platform Guides |
| 48 | +### React Tracing with Enhanced Content |
22 | 49 | ``` |
23 | | -https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/llms.txt |
24 | | -https://docs.sentry.io/platforms/python/guides/django/llms.txt |
25 | | -https://docs.sentry.io/product/performance/llms.txt |
| 50 | +Original: https://docs.sentry.io/platforms/javascript/guides/react/tracing/ |
| 51 | +LLMs.txt: https://docs.sentry.io/platforms/javascript/guides/react/tracing/llms.txt |
26 | 52 | ``` |
27 | 53 |
|
28 | | -## Implementation Architecture |
| 54 | +**Now Includes**: |
| 55 | +- **Enable Tracing**: Platform-specific activation instructions |
| 56 | +- **Configure**: Detailed sampling rate configuration |
| 57 | +- **Code Examples**: Actual JavaScript implementation code |
| 58 | + |
| 59 | +## Content Resolution Architecture |
29 | 60 |
|
30 | 61 | ``` |
31 | | -URL: /platforms/javascript/guides/react/tracing/llms.txt |
| 62 | +URL: /platforms/javascript/guides/react/user-feedback/llms.txt |
32 | 63 | ↓ (Middleware intercepts) |
33 | | -Rewrite: /api/llms-txt/platforms/javascript/guides/react/tracing |
| 64 | +Rewrite: /api/llms-txt/platforms/javascript/guides/react/user-feedback |
34 | 65 | ↓ (API route processes) |
35 | | -1. Extract path: ['platforms', 'javascript', 'guides', 'react', 'tracing'] |
36 | | -2. Search paths: |
37 | | - - docs/platforms/javascript/guides/react/tracing.mdx |
38 | | - - docs/platforms/javascript/common/tracing/index.mdx ✓ Found! |
39 | | -3. Parse with gray-matter: frontmatter + content |
40 | | -4. Smart JSX cleanup: preserve content, remove markup |
41 | | -5. Return clean markdown |
| 66 | +1. Parse path: platform='javascript', guide='react' |
| 67 | +2. Load: docs/platforms/javascript/common/user-feedback/index.mdx |
| 68 | +3. Detect: <PlatformContent includePath="user-feedback/install" /> |
| 69 | +4. Resolve: platform-includes/user-feedback/install/javascript.react.mdx |
| 70 | +5. Replace: Include actual React installation code snippets |
| 71 | +6. Output: Full documentation with real code examples |
42 | 72 | ``` |
43 | 73 |
|
44 | | -## Smart Content Processing |
| 74 | +## Platform Include Resolution |
45 | 75 |
|
46 | | -### JSX Component Handling |
47 | | -- **Alert components** → `> **Note:** [content]` |
48 | | -- **PlatformIdentifier** → `` `traces-sample-rate` `` |
49 | | -- **PlatformLink** → `[Link Text](/path/to/page)` |
50 | | -- **PlatformSection/Content** → Content preserved, wrapper removed |
51 | | -- **Nested components** → Multi-pass processing ensures complete cleanup |
| 76 | +### Detection Logic |
| 77 | +```typescript |
| 78 | +// From URL: /platforms/javascript/guides/react/user-feedback/ |
| 79 | +platform = 'javascript' // pathSegments[1] |
| 80 | +guide = 'react' // pathSegments[3] |
| 81 | +platformId = 'javascript.react' // Combined identifier |
| 82 | +``` |
52 | 83 |
|
53 | | -### Content Preservation |
54 | | -- ✅ **Full text content** extracted from JSX components |
55 | | -- ✅ **Links converted** to proper markdown format |
56 | | -- ✅ **Code identifiers** formatted as code spans |
57 | | -- ✅ **Alerts and notes** converted to markdown blockquotes |
58 | | -- ✅ **Multi-level nesting** handled correctly |
| 84 | +### File Resolution Priority |
| 85 | +```typescript |
| 86 | +// For <PlatformContent includePath="user-feedback/install" /> |
| 87 | +1. platform-includes/user-feedback/install/javascript.react.mdx ✓ Most specific |
| 88 | +2. platform-includes/user-feedback/install/javascript.mdx ↓ Platform fallback |
| 89 | +3. platform-includes/user-feedback/install/index.mdx ↓ Generic fallback |
| 90 | +``` |
59 | 91 |
|
60 | | -### File Resolution |
61 | | -- **Primary paths**: `docs/{path}.mdx`, `docs/{path}/index.mdx` |
62 | | -- **Common files**: `docs/platforms/{platform}/common/{section}/` |
63 | | -- **Platform guides**: Automatically detects shared documentation |
64 | | -- **Multiple formats**: Supports both `.mdx` and `.md` files |
| 92 | +### Real Example Output |
65 | 93 |
|
66 | | -## Technical Implementation |
| 94 | +**Before (Missing Code)**: |
| 95 | +```markdown |
| 96 | +### Installation |
| 97 | +*[Installation instructions would appear here for javascript.react]* |
| 98 | +``` |
67 | 99 |
|
68 | | -### Middleware (`src/middleware.ts`) |
69 | | -```typescript |
70 | | -// Detects URLs ending with llms.txt |
71 | | -if (request.nextUrl.pathname.endsWith('llms.txt')) { |
72 | | - return handleLlmsTxt(request); |
73 | | -} |
| 100 | +**After (With Real Code)**: |
| 101 | +```markdown |
| 102 | +### Installation |
| 103 | +The User Feedback integration is **already included** with the React SDK package. |
74 | 104 |
|
75 | | -// Rewrites to API route preserving path structure |
76 | | -const apiPath = `/api/llms-txt/${pathSegments.join('/')}`; |
77 | | -return NextResponse.rewrite(new URL(apiPath, request.url)); |
| 105 | +```bash {tabTitle:npm} |
| 106 | +npm install @sentry/react --save |
78 | 107 | ``` |
79 | 108 |
|
80 | | -### API Route (`app/api/llms-txt/[...path]/route.ts`) |
81 | | -```typescript |
82 | | -// Dynamic path segments handling |
83 | | -{ params }: { params: Promise<{ path: string[] }> } |
84 | | - |
85 | | -// Smart file resolution with common file detection |
86 | | -if (pathParts.length >= 5 && pathParts[2] === 'guides') { |
87 | | - const commonPath = `platforms/${platform}/common`; |
88 | | - const remainingPath = pathParts.slice(4).join('/'); |
89 | | - // Check common files... |
90 | | -} |
| 109 | +```bash {tabTitle:yarn} |
| 110 | +yarn add @sentry/react |
| 111 | +``` |
91 | 112 |
|
92 | | -// Advanced JSX cleanup preserving content |
93 | | -.replace(/<PlatformSection[^>]*>([\s\S]*?)<\/PlatformSection>/g, '$1') |
94 | | -.replace(/<PlatformLink[^>]*to="([^"]*)"[^>]*>([\s\S]*?)<\/PlatformLink>/g, '[$2]($1)') |
| 113 | +```bash {tabTitle:pnpm} |
| 114 | +pnpm add @sentry/react |
| 115 | +``` |
95 | 116 | ``` |
96 | 117 |
|
97 | | -## Response Format |
| 118 | +## Smart Content Processing |
| 119 | + |
| 120 | +### Enhanced JSX Component Handling |
| 121 | +- **Alert components** → `> **Note:** [content]` |
| 122 | +- **PlatformIdentifier** → `` `traces-sample-rate` `` |
| 123 | +- **PlatformLink** → `[Link Text](/path/to/page)` |
| 124 | +- **PlatformContent includes** → **Actual platform-specific content loaded from files** |
| 125 | +- **Code block preservation** → All existing markdown code blocks preserved |
| 126 | +- **Nested components** → Multi-pass processing ensures complete cleanup |
| 127 | + |
| 128 | +### Content Preservation Technology |
| 129 | +- ✅ **Code Block Protection**: Temporarily replaces code blocks during JSX cleanup |
| 130 | +- ✅ **Include Resolution**: Loads real content from platform-includes directory |
| 131 | +- ✅ **Platform Awareness**: Automatically detects platform/guide from URL path |
| 132 | +- ✅ **Smart Fallbacks**: Graceful degradation when includes aren't found |
| 133 | +- ✅ **Content Reconstruction**: Restores protected content after cleanup |
| 134 | + |
| 135 | +## Response Format with Code Snippets |
98 | 136 |
|
99 | 137 | ```markdown |
100 | | -# Set Up Tracing |
| 138 | +# Set Up User Feedback |
101 | 139 |
|
102 | | -With [tracing](/product/insights/overview/), Sentry automatically tracks your software performance across your application services, measuring metrics like throughput and latency, and displaying the impact of errors across multiple systems. |
| 140 | +The User Feedback feature allows you to collect user feedback from anywhere inside your application at any time. |
103 | 141 |
|
104 | 142 | > **Note:** |
105 | | -If you're adopting Tracing in a high-throughput environment, we recommend testing prior to deployment to ensure that your service's performance characteristics maintain expectations. |
| 143 | +If you're using a self-hosted Sentry instance, you'll need to be on version 24.4.2 or higher. |
| 144 | + |
| 145 | +### Installation |
| 146 | + |
| 147 | +The User Feedback integration is **already included** with the React SDK package. |
106 | 148 |
|
107 | | -## Configure |
| 149 | +```bash {tabTitle:npm} |
| 150 | +npm install @sentry/react --save |
| 151 | +``` |
| 152 | + |
| 153 | +```bash {tabTitle:yarn} |
| 154 | +yarn add @sentry/react |
| 155 | +``` |
108 | 156 |
|
109 | | -Enable tracing by configuring the sampling rate for transactions. Set the sample rate for your transactions by either: |
| 157 | +```bash {tabTitle:pnpm} |
| 158 | +pnpm add @sentry/react |
| 159 | +``` |
110 | 160 |
|
111 | | -- You can establish a uniform sample rate for all transactions by setting the `traces-sample-rate` option in your SDK config to a number between `0` and `1`. |
112 | | -- For more granular control over sampling, you can set the sample rate based on the transaction itself and the context in which it's captured, by providing a function to the `traces-sampler` config option. |
| 161 | +### Set Up |
113 | 162 |
|
114 | | -## Custom Instrumentation |
| 163 | +```javascript |
| 164 | +Sentry.init({ |
| 165 | + dsn: "___PUBLIC_DSN___", |
115 | 166 |
|
116 | | -- [Tracing APIs](/apis/#tracing): Find information about APIs for custom tracing instrumentation |
117 | | -- [Instrumentation](/tracing/instrumentation/): Find information about manual instrumentation with the Sentry SDK |
| 167 | + integrations: [ |
| 168 | + Sentry.feedbackIntegration({ |
| 169 | + colorScheme: "system", |
| 170 | + }), |
| 171 | + ], |
| 172 | +}); |
| 173 | +``` |
118 | 174 |
|
119 | 175 | --- |
120 | 176 |
|
121 | | -**Original URL**: https://docs.sentry.io/platforms/javascript/guides/react/tracing |
122 | | -**Generated**: 2025-06-10T22:18:27.632Z |
| 177 | +**Original URL**: https://docs.sentry.io/platforms/javascript/guides/react/user-feedback |
| 178 | +**Generated**: 2025-06-10T22:25:15.123Z |
123 | 179 |
|
124 | 180 | *This is the full page content converted to markdown format.* |
125 | 181 | ``` |
126 | 182 |
|
| 183 | +## Technical Implementation |
| 184 | + |
| 185 | +### Enhanced API Route Features |
| 186 | +```typescript |
| 187 | +// New async function for include resolution |
| 188 | +async function resolvePlatformIncludes(content: string, pathSegments: string[]): Promise<string> { |
| 189 | + // Platform detection from URL segments |
| 190 | + // File loading from platform-includes/ |
| 191 | + // Content replacement with error handling |
| 192 | +} |
| 193 | + |
| 194 | +// Code block preservation during cleanup |
| 195 | +cleaned = cleaned.replace(/```[\s\S]*?```/g, (match) => { |
| 196 | + codeBlocks.push(match); |
| 197 | + return `${codeBlockPlaceholder}${codeBlocks.length - 1}`; |
| 198 | +}); |
| 199 | +``` |
| 200 | + |
| 201 | +### File System Integration |
| 202 | +- **Direct file access** to `platform-includes/` directory |
| 203 | +- **Gray-matter parsing** for include files |
| 204 | +- **Multi-path resolution** with intelligent fallbacks |
| 205 | +- **Error handling** with descriptive placeholders |
| 206 | + |
127 | 207 | ## Benefits |
128 | 208 |
|
129 | | -✅ **Complete Content**: Extracts actual page content, not summaries |
| 209 | +✅ **Complete Content**: Extracts actual page content AND code snippets |
| 210 | +✅ **Platform-Specific**: Shows correct installation/setup for each framework |
130 | 211 | ✅ **LLM-Optimized**: Clean markdown format perfect for AI processing |
131 | 212 | ✅ **Smart Conversion**: JSX components converted to appropriate markdown |
132 | | -✅ **Link Preservation**: All links maintained with proper formatting |
| 213 | +✅ **Code Preservation**: All code blocks and snippets properly maintained |
133 | 214 | ✅ **Universal Access**: Works with any documentation page |
134 | 215 | ✅ **High Performance**: Cached responses with efficient processing |
135 | | -✅ **Error Handling**: Graceful fallbacks and informative error messages |
136 | | - |
137 | | -## Performance & Caching |
138 | | - |
139 | | -- **Response Caching**: 1 hour cache (`max-age=3600`) |
140 | | -- **Direct File Access**: Efficient file system reads |
141 | | -- **Multi-pass Processing**: Optimized JSX cleanup |
142 | | -- **Error Boundaries**: Isolated error handling per request |
| 216 | +✅ **Error Resilient**: Graceful fallbacks and informative error messages |
143 | 217 |
|
144 | 218 | ## Testing Commands |
145 | 219 |
|
146 | 220 | ```bash |
147 | | -# Test React tracing docs (common file) |
148 | | -curl "http://localhost:3000/platforms/javascript/guides/react/tracing/llms.txt" |
| 221 | +# Test React user feedback with full code snippets |
| 222 | +curl "http://localhost:3000/platforms/javascript/guides/react/user-feedback/llms.txt" |
| 223 | + |
| 224 | +# Test Next.js-specific installation (shows wizard command) |
| 225 | +curl "http://localhost:3000/platforms/javascript/guides/nextjs/user-feedback/llms.txt" |
149 | 226 |
|
150 | | -# Test platform-specific content |
151 | | -curl "http://localhost:3000/platforms/python/llms.txt" |
| 227 | +# Test React tracing with platform-specific content |
| 228 | +curl "http://localhost:3000/platforms/javascript/guides/react/tracing/llms.txt" |
152 | 229 |
|
153 | | -# Test home page |
154 | | -curl "http://localhost:3000/llms.txt" |
| 230 | +# Test Vue.js user feedback (different platform) |
| 231 | +curl "http://localhost:3000/platforms/javascript/guides/vue/user-feedback/llms.txt" |
155 | 232 | ``` |
156 | 233 |
|
157 | 234 | --- |
158 | 235 |
|
159 | | -**Status**: ✅ **PRODUCTION READY** |
| 236 | +**Status**: ✅ **PRODUCTION READY WITH FULL CODE SNIPPETS** |
160 | 237 | **Last Updated**: December 2024 |
161 | | -**Content Quality**: Full page content with smart JSX processing |
| 238 | +**Content Quality**: Full page content with platform-specific code examples |
| 239 | +**Code Coverage**: Installation, setup, configuration, and API examples all included |
0 commit comments