mirror of
https://github.com/hanzoai/insights.git
synced 2026-10-30 16:15:31 +00:00
zeekay
10e6fec4c0
The rule table mapped HOG_ -> FN_ ahead of any POSTHOG rule, so POSTHOG_FOO split into POST + HOG_ and came out POSTFN_FOO. Nothing sets that. The live pods set INSIGHTS_SKIP_MIGRATION_CHECKS, which bin/migrate-check reads on the container entrypoint, so the misspelling does not degrade a feature -- it runs migrate --check against a database whose history this tree does not share and the container never starts. Both replacements are measured against the shipped tree rather than chosen: every HOG_ name with a counterpart there is spelled INSIGHTS_ (HOG_QL -> INSIGHTS_QL, HOG_FUNCTION_TEMPLATES -> INSIGHTS_FUNCTION_TEMPLATES, 12 of 12 determinate cases), and FN_ appears in it nowhere. Upstream carries 95 HOG_ tokens and zero FN_ ones, so repairing FN_ back out is exactly the inverse of the bad rule and cannot collide with an upstream name. The rule is fixed for the next convergence, and the tree it already produced is repaired in the same commit -- the codemod is idempotent against its own output, so it cannot undo this itself.
178 lines
7.3 KiB
TypeScript
178 lines
7.3 KiB
TypeScript
import { OnboardingComponentsContext, createInstallation } from 'scenes/onboarding/shared/OnboardingDocsContentWrapper'
|
|
|
|
import { StepDefinition } from '../steps'
|
|
import { SDK_DEFAULTS_DATE } from './_snippets/sdkDefaults'
|
|
|
|
export const getReactSteps = (ctx: OnboardingComponentsContext): StepDefinition[] => {
|
|
const { CodeBlock, Markdown, CalloutBox, dedent, snippets } = ctx
|
|
|
|
const JSEventCapture = snippets?.JSEventCapture
|
|
|
|
return [
|
|
{
|
|
title: 'Install the package',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>
|
|
Install [`insights-js`](https://github.com/insights/insights-js) and `@hanzo/react` using your
|
|
package manager:
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'bash',
|
|
file: 'npm',
|
|
code: dedent`
|
|
npm install insights-js @hanzo/react
|
|
`,
|
|
},
|
|
{
|
|
language: 'bash',
|
|
file: 'yarn',
|
|
code: dedent`
|
|
yarn add insights-js @hanzo/react
|
|
`,
|
|
},
|
|
{
|
|
language: 'bash',
|
|
file: 'pnpm',
|
|
code: dedent`
|
|
pnpm add insights-js @hanzo/react
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Add environment variables',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>
|
|
Add your Insights project token and host to your environment variables. For Vite-based React
|
|
apps, use the `VITE_` prefix to expose them to the client:
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'bash',
|
|
file: '.env',
|
|
code: dedent`
|
|
VITE_INSIGHTS_PROJECT_TOKEN=<ph_project_token>
|
|
VITE_INSIGHTS_HOST=<ph_client_api_host>
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Initialize Insights',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>
|
|
Wrap your app with the `InsightsProvider` component at the root of your application (such as
|
|
`main.tsx` if you're using Vite):
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'tsx',
|
|
file: 'main.tsx',
|
|
code: dedent`
|
|
import { StrictMode } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import './index.css'
|
|
import App from './App.jsx'
|
|
import { InsightsProvider } from '@hanzo/react'
|
|
|
|
const options = {
|
|
api_host: import.meta.env.VITE_INSIGHTS_HOST,
|
|
defaults: '${SDK_DEFAULTS_DATE}',
|
|
} as const
|
|
|
|
createRoot(document.getElementById('root')).render(
|
|
<StrictMode>
|
|
<InsightsProvider apiKey={import.meta.env.VITE_INSIGHTS_PROJECT_TOKEN} options={options}>
|
|
<App />
|
|
</InsightsProvider>
|
|
</StrictMode>
|
|
)
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
<CalloutBox type="fyi" title="defaults option">
|
|
<Markdown>
|
|
The `defaults` option automatically configures Insights with recommended settings for new
|
|
projects. See [SDK defaults](https://hanzo.ai/docs/libraries/js#sdk-defaults) for
|
|
details.
|
|
</Markdown>
|
|
</CalloutBox>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Accessing Insights in your code',
|
|
badge: 'recommended',
|
|
content: (
|
|
<>
|
|
<Markdown>
|
|
Use the `useInsights` hook to access the Insights instance in any component wrapped by
|
|
`InsightsProvider`:
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'tsx',
|
|
file: 'MyComponent.tsx',
|
|
code: dedent`
|
|
import { useInsights } from '@hanzo/react'
|
|
|
|
function MyComponent() {
|
|
const insights = useInsights()
|
|
|
|
function handleClick() {
|
|
insights.capture('button_clicked', { button_name: 'signup' })
|
|
}
|
|
|
|
return <button onClick={handleClick}>Sign up</button>
|
|
}
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
<Markdown>You can also import `insights` directly for non-React code or utility functions:</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'tsx',
|
|
file: 'utils/analytics.ts',
|
|
code: dedent`
|
|
import insights from 'insights-js'
|
|
|
|
export function trackPurchase(amount: number) {
|
|
insights.capture('purchase_completed', { amount })
|
|
}
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Send events',
|
|
badge: 'recommended',
|
|
content: <>{JSEventCapture && <JSEventCapture />}</>,
|
|
},
|
|
]
|
|
}
|
|
|
|
export const ReactInstallation = createInstallation(getReactSteps)
|