mirror of
https://github.com/hanzoai/insights.git
synced 2026-10-30 16:15:31 +00:00
zeekay
1b367e2b62
The tree was a debranded snapshot of upstream taken around 2026-02-20, and upstream has moved about five months since. This replaces it with upstream master, mechanically re-derived: bin/debrand does the rename, and the pipeline and squashed migrations are restored from the shipped tree. Not a merge. The previous import replaced the tree wholesale in a single commit, so there is no shared content history to merge against. Reproducing the rename on the new tree is what actually converges. What survives: .hanzo/workflows, the Dockerfiles and bin/docker* entrypoints, compose files, LLM.md, and insights/migrations. The squashed initial migration is load-bearing — the live database records it by name, so upstream's ~918 individual migrations cannot come back. Nine products are dropped as unreferenced. Twenty-one more that we do not run are kept anyway because the core app still imports them; unpicking those is a refactor and does not belong in a rebase. This base does not build yet, and the reasons are not in the rename: upstream now wants Python 3.13.13 against our 3.12.12 and Django 5.2 against our 4.2, and the dependency manifests still name upstream packages that we republish under our own names. Those are decisions, not renames.
182 lines
9.7 KiB
TypeScript
182 lines
9.7 KiB
TypeScript
import { OnboardingComponentsContext, createInstallation } from 'scenes/onboarding/shared/OnboardingDocsContentWrapper'
|
|
|
|
import { StepDefinition } from '../steps'
|
|
import { SDK_DEFAULTS_DATE } from './_snippets/sdkDefaults'
|
|
|
|
export const getAngularSteps = (ctx: OnboardingComponentsContext): StepDefinition[] => {
|
|
const { CodeBlock, Markdown, dedent, snippets, Tab } = ctx
|
|
|
|
const JSEventCapture = snippets?.JSEventCapture
|
|
|
|
return [
|
|
{
|
|
title: 'Install the package',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>Install the Insights JavaScript library using your package manager:</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'bash',
|
|
file: 'npm',
|
|
code: dedent`
|
|
npm install insights-js
|
|
`,
|
|
},
|
|
{
|
|
language: 'bash',
|
|
file: 'yarn',
|
|
code: dedent`
|
|
yarn add insights-js
|
|
`,
|
|
},
|
|
{
|
|
language: 'bash',
|
|
file: 'pnpm',
|
|
code: dedent`
|
|
pnpm add insights-js
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Initialize Insights',
|
|
badge: 'required',
|
|
content: (
|
|
<>
|
|
<Markdown>
|
|
In your `src/main.ts`, initialize Insights using your project token and instance address:
|
|
</Markdown>
|
|
<Tab.Group tabs={['Angular 17+', 'Angular 16 and below']}>
|
|
<Tab.List>
|
|
<Tab>Angular 17+</Tab>
|
|
<Tab>Angular 16 and below</Tab>
|
|
</Tab.List>
|
|
<Tab.Panels>
|
|
<Tab.Panel>
|
|
<Markdown>
|
|
{dedent`
|
|
For Angular v17 and above, you can set up Insights as a singleton service.
|
|
To do this, start by creating and injecting a \`InsightsService\` instance.
|
|
|
|
Create a service by running \`ng g service services/insights\`. The
|
|
service should look like this:
|
|
`}
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'typescript',
|
|
file: 'src/main.ts',
|
|
code: dedent`
|
|
// src/app/services/insights.service.ts
|
|
import { DestroyRef, Injectable, NgZone } from "@angular/core";
|
|
import insights from "insights-js";
|
|
import { environment } from "../../environments/environment";
|
|
import { Router } from "@angular/router";
|
|
@Injectable({ providedIn: "root" })
|
|
export class InsightsService {
|
|
constructor(
|
|
private ngZone: NgZone,
|
|
private router: Router,
|
|
private destroyRef: DestroyRef,
|
|
) {
|
|
this.initInsights();
|
|
}
|
|
private initInsights() {
|
|
this.ngZone.runOutsideAngular(() => {
|
|
insights.init(environment.insightsKey, {
|
|
api_host: environment.insightsHost,
|
|
defaults: '${SDK_DEFAULTS_DATE}',
|
|
});
|
|
});
|
|
}
|
|
}
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
<Markdown>
|
|
{dedent`
|
|
The service is initialized [outside of the Angular zone](https://angular.dev/api/core/NgZone#runOutsideAngular)
|
|
to reduce change detection cycles. This is important to avoid performance issues with
|
|
session recording.
|
|
Then, inject the service in your app's root component \`app.component.ts\`.
|
|
This will make sure Insights is initialized before any other component is rendered.
|
|
`}
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'typescript',
|
|
file: 'src/app/app.component.ts',
|
|
code: dedent`
|
|
// src/app/app.component.ts
|
|
import { Component } from "@angular/core";
|
|
import { RouterOutlet } from "@angular/router";
|
|
import { InsightsService } from "./services/insights.service";
|
|
@Component({
|
|
selector: "app-root",
|
|
styleUrls: ["./app.component.scss"],
|
|
template: \`
|
|
<router-outlet />\`,
|
|
imports: [RouterOutlet],
|
|
})
|
|
export class AppComponent {
|
|
title = "angular-app";
|
|
constructor(insightsService: InsightsService) {}
|
|
}
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</Tab.Panel>
|
|
<Tab.Panel>
|
|
<Markdown>
|
|
{dedent`
|
|
In your \`src/main.ts\`, initialize Insights using your project API
|
|
key and instance address. You can find both in your
|
|
[project settings](https://us.hanzo.ai/project/settings).
|
|
`}
|
|
</Markdown>
|
|
<CodeBlock
|
|
blocks={[
|
|
{
|
|
language: 'typescript',
|
|
file: 'src/main.ts',
|
|
code: dedent`
|
|
// src/main.ts
|
|
import { bootstrapApplication } from '@angular/platform-browser';
|
|
import { appConfig } from './app/app.config';
|
|
import { AppComponent } from './app/app.component';
|
|
import { environment } from "./environments/environment";
|
|
import insights from 'insights-js'
|
|
insights.init(environment.insightsKey, {
|
|
api_host: environment.insightsHost,
|
|
defaults: '${SDK_DEFAULTS_DATE}'
|
|
})
|
|
bootstrapApplication(AppComponent, appConfig)
|
|
.catch((err) => console.error(err));
|
|
`,
|
|
},
|
|
]}
|
|
/>
|
|
</Tab.Panel>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'Send events',
|
|
content: <>{JSEventCapture && <JSEventCapture />}</>,
|
|
},
|
|
]
|
|
}
|
|
|
|
export const AngularInstallation = createInstallation(getAngularSteps)
|