mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-04 03:11:21 +01:00
handbook components; frontmatter config (#12337)
This commit is contained in:
Edwin Lim
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Angular error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import { Steps, Step } from 'components/Docs/Steps'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Hono error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import StepVerifyErrorTracking from "./_snippets/step-verify-error-tracking.mdx"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Next.js error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Node.js error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import InstallNodePackageManagers from "../../integrate/_snippets/install-node-package-managers.mdx"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Nuxt error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import { Steps, Step } from 'components/Docs/Steps'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Python error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: React error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import InstallWebPackageManagers from "../../integrate/_snippets/install-web-package-managers.mdx"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: SvelteKit error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import { Steps, Step } from 'components/Docs/Steps'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Web error tracking installation
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import { Steps, Step } from 'components/Docs/Steps'
|
||||
|
||||
@@ -16,7 +16,7 @@ import { IconGraph, IconRewindPlay, IconToggle } from '@posthog/icons'
|
||||
icon="IconCode2"
|
||||
>
|
||||
|
||||
PostHog's error tracking lets you monitor, investigate, and resolve any issues your users encounter within your app, so you can ship with confidence and debug faster.
|
||||
Error tracking lets you monitor, investigate, and resolve any issues your users encounter within your app, so you can ship with confidence and debug faster.
|
||||
|
||||
|
||||
The first step is to install the PostHog SDK to start capturing exception events within your application.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upload source maps for Angular
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import CLIDownload from '../_snippets/cli/download.mdx'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upload source maps with CLI
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import CLIDownload from "../_snippets/cli/download.mdx"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upload source maps for Next.js
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
<Steps>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upload source maps for Node.js
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import CLIDownload from '../_snippets/cli/download.mdx'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upload source maps for Nuxt
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import CLIDownload from '../_snippets/cli/download.mdx'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upload source maps for React
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import CLIDownload from '../_snippets/cli/download.mdx'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upload source maps for web
|
||||
showStepsToc: true
|
||||
---
|
||||
|
||||
import CLIDownload from '../_snippets/cli/download.mdx'
|
||||
|
||||
@@ -85,6 +85,17 @@ posthog.capture('user_signed_up', {
|
||||
})
|
||||
```
|
||||
|
||||
### Record videos
|
||||
|
||||
For flows with many steps, it's often more helpful to include a video instead of a screenshot. We use [Screen Studio](https://screen.studio/) to record videos. Feel free to buy yourself a license.
|
||||
|
||||
Use the following settings:
|
||||
- <PrivateLink url="https://posthog.slack.com/archives/C01FHN8DNN6/p1729759474007969">Preset</PrivateLink>
|
||||
- Remove any zooming-in for clicks, as this can sometimes make videos hard to follow.
|
||||
- For exporting: use MP4, 720, 60 fps, and "web" quality
|
||||
|
||||
## Docs components
|
||||
|
||||
### Callout boxes
|
||||
|
||||
import { CalloutBox } from '../../../src/components/Docs/CalloutBox'
|
||||
@@ -138,11 +149,110 @@ This creates the following component in the docs, where the final link will dive
|
||||
|
||||
This component is globally available and doesn't need to be imported per page, but doesn't automatically run the query with Max AI (currently).
|
||||
|
||||
### Record videos
|
||||
### Steps
|
||||
|
||||
For flows with many steps, it's often more helpful to include a video instead of a screenshot. We use [Screen Studio](https://screen.studio/) to record videos. Feel free to buy yourself a license.
|
||||
Use the `<Steps>` component for content that walks the reader through a strict sequence of instructions. Think how-to guides or step-by-step tutorials.
|
||||
|
||||
Use the following settings:
|
||||
- <PrivateLink url="https://posthog.slack.com/archives/C01FHN8DNN6/p1729759474007969">Preset</PrivateLink>
|
||||
- Remove any zooming-in for clicks, as this can sometimes make videos hard to follow.
|
||||
- For exporting: use MP4, 720, 60 fps, and "web" quality
|
||||
<Steps>
|
||||
|
||||
<Step title="Install the SDK" badge="required">
|
||||
|
||||
Steps are automatically numbered.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Call the capture method" badge="required">
|
||||
|
||||
Write the *content* in **markdown**.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step checkpoint title="Check for events in PostHog" subtitle="Log in to your PostHog account" badge="optional">
|
||||
|
||||
You can also use components <TeamMember name="Edwin Lim" photo /> <TeamMember name="Vincent Ge" photo />
|
||||
|
||||
Add more steps!
|
||||
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
<CalloutBox icon="IconInfo" title="Watch the whitespace" type="fyi">
|
||||
|
||||
Our mdx parser does not play nice with certain whitespace. When using the component, make sure you:
|
||||
|
||||
- Add a line break after the opening component tags
|
||||
- Avoid using 4-space indents
|
||||
|
||||
</CalloutBox>
|
||||
|
||||
```mdx
|
||||
---
|
||||
showStepsToc: true # for table of contents with steps only
|
||||
---
|
||||
<Steps>
|
||||
|
||||
<Step title="Install the SDK" badge="required">
|
||||
|
||||
Steps are automatically numbered.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Call the capture method" badge="required">
|
||||
|
||||
Write the *content* in **markdown**.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step checkpoint title="Check for events in PostHog" subtitle="Log in to your PostHog account" badge="optional">
|
||||
|
||||
Add checkpoints to help readers know they're on the right track.
|
||||
|
||||
You can also use components <TeamMember name="Edwin Lim" photo /> <TeamMember name="Vincent Ge" photo />
|
||||
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
```
|
||||
|
||||
### Quest log
|
||||
|
||||
The `<QuestLog>` component is for syllabus-style pages. Inspired by video games, it outlines each section as a "quest" to give the reader a visual roadmap of what's needed to reach a larger goal or milestone – like fully adopting our error tracking product.
|
||||
|
||||
<ProductScreenshot
|
||||
imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/SCR_20250731_oiej_cdce484c1c.png"
|
||||
alt="Questlog example"
|
||||
classes="rounded"
|
||||
padding={false}
|
||||
/>
|
||||
|
||||
<CalloutBox icon="IconInfo" title="Watch the whitespace" type="fyi">
|
||||
|
||||
Our mdx parser does not play nice with certain whitespace. When using the component, make sure you:
|
||||
|
||||
- Add a line break after the opening component tags
|
||||
- Avoid using 4-space indents
|
||||
|
||||
</CalloutBox>
|
||||
|
||||
```mdx
|
||||
---
|
||||
hideAnchor: true # for a wider content column
|
||||
---
|
||||
|
||||
<QuestLog firstSpeechBubble="Let's go on an adventure!" lastSpeechBubble="Time to build products!">
|
||||
|
||||
<QuestLogItem title="Capture your first exception" subtitle="Required" icon="IconCode">
|
||||
|
||||
Write the *content* in **markdown**.
|
||||
|
||||
</QuestLogItem>
|
||||
|
||||
<QuestLogItem title="Integrate customer data" subtitle="Recommended" icon="IconLogomark">
|
||||
|
||||
You can also use components <TeamMember name="Edwin Lim" photo /> <TeamMember name="Vincent Ge" photo />
|
||||
|
||||
</QuestLogItem>
|
||||
|
||||
</QuestLog>
|
||||
```
|
||||
|
||||
@@ -357,6 +357,7 @@ export default function Handbook({
|
||||
thumbnail,
|
||||
related,
|
||||
seo,
|
||||
showStepsToc,
|
||||
} = frontmatter
|
||||
const { parent, excerpt } = post
|
||||
const lastUpdated = parent?.fields?.gitLogLatestDate
|
||||
@@ -365,7 +366,7 @@ export default function Handbook({
|
||||
const isArticle = frontmatter.isArticle !== false
|
||||
|
||||
// Parse steps from MDX content and use them to replace table of contents if found
|
||||
const stepsFromMDX = parseStepsFromMDX(body)
|
||||
const stepsFromMDX = frontmatter.showStepsToc ? parseStepsFromMDX(body) : []
|
||||
const toc = stepsFromMDX.length > 0 ? stepsFromMDX : tableOfContents
|
||||
const showToc = !hideAnchor && toc?.length > 0
|
||||
|
||||
@@ -606,6 +607,7 @@ export const query = graphql`
|
||||
hideLastUpdated
|
||||
github
|
||||
isArticle
|
||||
showStepsToc
|
||||
features {
|
||||
eventCapture
|
||||
userIdentification
|
||||
|
||||
Reference in New Issue
Block a user