Add Traces product page#18189
Merged
Merged
Conversation
New /traces product page built on the Slides template, mirroring the /logs page layout. Slides: hero, "Your product, fixing itself" (tabs), "Every span of a request, in one waterfall" (split), "Catnip for agents", PostHog vs... (tl;dr), a feature comparison table with competitor logos, and a "PostHog Code in Slack" closing slide. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Contributor
Deploy preview
|
Contributor
Bundle reportTotal JS (gzip)6.30 MiB (+5.8 KiB / +0.1%) Largest changed named chunks
Eager graph (static-import closure per entrypoint)
Largest modules in the
|
| Module | Size |
|---|---|
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css |
708.2 KiB |
./src/components/Stickers/Stickers.tsx |
696.4 KiB |
./.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/31a094f140f119e73085d847ae81b99b.js + 2 modules |
596.7 KiB |
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js |
481.4 KiB |
./node_modules/.pnpm/@codemirror+view@6.38.2/node_modules/@codemirror/view/dist/index.js |
458.1 KiB |
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules |
395.1 KiB |
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.cjs.js |
364.8 KiB |
./src/hooks/useCustomers.tsx + 54 modules |
355.1 KiB |
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
354.8 KiB |
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules |
351.4 KiB |
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js |
281.9 KiB |
./src/components/ProductComparisonTable/index.tsx + 116 modules |
273.3 KiB |
./node_modules/.pnpm/@codesandbox+sandpack-react@2.20.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@codesandbox/sandpack-react/dist/index.mjs |
266.6 KiB |
./node_modules/.pnpm/d3@7.9.0/node_modules/d3/src/index.js + 208 modules |
247.4 KiB |
./src/components/Pricing/PricingSlider/Slider.tsx + 87 modules |
239.9 KiB |
Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes.
- Slide 1 (hero): rename to "Accurate traces", swap in the new hero image, and round the image corners.
- Slide 2 ("Your product, fixing itself"): rebuild with the TabbedCarousel layout from /self-driving's "How a product improves itself" section, replacing the previous columns-tabs treatment.
- Slide 3 ("Every span of a request, in one waterfall"): push the image lower (mt-12) and round its corners, matching the Logs "Full stack context" slide.
Generated-By: PostHog Code
Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
- Waterfall slide renamed to "Request span". - Catnip for agents: larger bordered cards with more space between icon and title, content spans more of the slide, and the three symptom lines now read as full sentences. - PostHog vs...: reworded the first "competitor might suit you" point. - Feature comparison: competitor logos replaced with plain text names (PostHog logo kept), table vertically centered to fill the slide with larger rows, and the "alpha" note removed from PostHog's distributed tracing row. - PostHog in Slack: renamed slide + eyebrow label, larger CTA button, and a smaller image so more of it is visible. - Added the standard getting-started CTA slide at the end, matching the Logs page. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
- Hero title back to "Straight to the line that broke". - Reduce image corner rounding (rounded-lg → rounded-md) on the hero and Request span images to match the Logs page; push the Request span image lower (mt-24). - Remove the boxed <code> halo around trace_id on the Request span slide — now just a monospace (font-code) span. - Catnip for agents: larger subtitle, smaller closing paragraph with a bit more space above it. - Feature comparison: top-align the table so the competitor-name header row is no longer clipped by vertical centering; size md so it fills the slide. - PostHog in Slack: title is now "Latency? @PostHog"; image enlarged (max-w-2xl → max-w-4xl). - Switch the page accent color from purple to blue. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Reword the hero description to: "A trace pinpoints the exact query. The agent reads it, opens a PR that fixes the right line, and sends it to your Inbox. You hit merge. That's the whole job." Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Restructure the feature comparison to the new spec: add a "Standards & setup" section (native OTel ingestion, no proprietary SDK, instrumentation method), expand the Tracing section (waterfall, service/dependency map, code-level profiling, sampling & retention controls), and drop the product-analytics row from "One platform". Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Reword the Scout tab to describe the APM scout: "Turn on the APM scout. It watches latency and request volume per service, on a schedule, and files any regression as a report." Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Render an optional per-tab image under the copy and add the scout troop mock to the Scout tab. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Add the PostHog Inbox mock under the copy on the Signal tab of the self-healing slide. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Add the report investigate mock to the Investigate tab, and remove the per-tab heading inside the panel since the label already appears on the tab itself. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Replace the Investigate tab image with the updated report investigate mock. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Add the GitHub PR mock under the copy on the PR tab of the self-healing slide. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Replace the PR tab image with the updated GitHub PR mock, and add the merged-PR mock under the Merge tab copy. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Reword the hero description to describe the trace pinpointing the slow query, failed API call, or service that broke the request. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
Rename the slide to "Trace waterfall", swap in the new waterfall image, and replace the prose with a four-point bulleted list. Generated-By: PostHog Code Task-Id: 5bb08157-3819-4009-bb03-0597743d62bd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Adds a new
/tracesproduct page for PostHog's distributed tracing (APM) product, built on the shared Slides/Presentation template and mirroring the/logspage layout.Slides, in order:
/codeinstrumentation cards)Traces is registered as a WIP product in
useProduct.ts, so it doesn't yet surface in the billed-products grid.Why: New product landing page for Traces, authored slide by slide from a Slack thread.
Note: the Datadog column uses an existing Cloudinary image (a
.jpegwith a white background) since we don't have a transparent Datadog logo in the repo yet — worth swapping for a proper SVG later.Checklist
vercel.jsonCreated with PostHog from a Slack thread