Skip to content

Commit

Permalink
Posthog api (#578)
Browse files Browse the repository at this point in the history 
* feat: Add PostHog integration for API request tracking

* chore: added changeset

* feat: Add posthog to trpc/api

* feat: PostHog is now optional

* chore: Remove unnecessary include in tsconfig.json

* Update .changeset/brave-pants-divide.md

Co-authored-by: Pablo Castellano <pablo@anche.no>

* chore: Use a random UUID for the PostHog distinctId

* feat: Add posthog-js to the frontend

* refactor: Update posthog.capture to use getIP function

* chore: Rename POSTHOG_KEY to POSTHOG_ID

* docs: Added posthog .env docs

* refactor: Update PostHog host URL in environment configuration

* chore: Remove PostHog changeset

* Adds NEXT_PUBLIC_POSTHOG_ID and NEXT_PUBLIC_POSTHOG_HOST to env

---------

Co-authored-by: Pablo Castellano <pablo@anche.no>
  • Loading branch information
@luis-herasme @PabloCastellano
luis-herasme and PabloCastellano authored Oct 17, 2024
1 parent c3cfd46 commit e7187c3
Show file tree
Hide file tree
Showing 10 changed files with 204 additions and 49 deletions.
38 changes: 21 additions & 17 deletions apps/docs/src/app/docs/environment/page.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,25 @@ nextjs:

## Blobscan Web

| Variable | Description | Required | Default value |
| ---------------------------------------- | ------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `DATABASE_URL` | Postgresql database URI | Yes | (empty) |
| `FEEDBACK_WEBHOOK_URL` | Discord webhook URL for feedback | No | (empty) |
| `NEXT_PUBLIC_NETWORK_NAME` | Network name | No | mainnet |
| `NEXT_PUBLIC_EXPLORER_BASE_URL` | Block explorer URL | No | `https://etherscan.io` |
| `NEXT_PUBLIC_BEACON_BASE_URL` | Beacon explorer URL | No | `https://beaconcha.in/` |
| `NEXT_PUBLIC_VERSION` | Blobscan version | No | (empty) |
| `NEXT_PUBLIC_SUPPORTED_NETWORKS` | Link to other pages from the Network menu | No | `[{"label":"Ethereum Mainnet","href":"https://blobscan.com/"},{"label":"Gnosis","href":"https://gnosis.blobscan.com/"},{"label":"Holesky Testnet","href":"https://holesky.blobscan.com/"},{"label":"Sepolia Testnet","href":"https://sepolia.blobscan.com/"}]` |
| `NEXT_PUBLIC_VERCEL_ANALYTICS_ENABLED` | Enable Vercel analytics | No | `false` |
| `NEXT_PUBLIC_SENTRY_DSN_WEB` | Sentry DSN | No | (empty) |
| `NODE_ENV` | Used in Node.js applications to specify the environment in which the application is running | No | (empty) |
| `SENTRY_PROJECT` | Sentry project name | No | (empty) |
| `SENTRY_ORG` | Sentry organization | No | (empty) |
| `METRICS_ENABLED` | Expose the /metrics endpoint | No | `false` |
| `TRACES_ENABLED` | Enable instrumentation of functions and sending traces to a collector | No | `false` |
| `BLOB_PROPAGATOR_ENABLED` | Enable uploading blobs to multiple storages in parallel | No | `false` |
| Variable | Description | Required | Default value |
| -------------------------------------- | ------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `DATABASE_URL` | Postgresql database URI | Yes | (empty) |
| `FEEDBACK_WEBHOOK_URL` | Discord webhook URL for feedback | No | (empty) |
| `NEXT_PUBLIC_NETWORK_NAME` | Network name | No | mainnet |
| `NEXT_PUBLIC_EXPLORER_BASE_URL` | Block explorer URL | No | `https://etherscan.io` |
| `NEXT_PUBLIC_BEACON_BASE_URL` | Beacon explorer URL | No | `https://beaconcha.in/` |
| `NEXT_PUBLIC_VERSION` | Blobscan version | No | (empty) |
| `NEXT_PUBLIC_SUPPORTED_NETWORKS` | Link to other pages from the Network menu | No | `[{"label":"Ethereum Mainnet","href":"https://blobscan.com/"},{"label":"Gnosis","href":"https://gnosis.blobscan.com/"},{"label":"Holesky Testnet","href":"https://holesky.blobscan.com/"},{"label":"Sepolia Testnet","href":"https://sepolia.blobscan.com/"}]` |
| `NEXT_PUBLIC_VERCEL_ANALYTICS_ENABLED` | Enable Vercel analytics | No | `false` |
| `NEXT_PUBLIC_SENTRY_DSN_WEB` | Sentry DSN | No | (empty) |
| `NODE_ENV` | Used in Node.js applications to specify the environment in which the application is running | No | (empty) |
| `SENTRY_PROJECT` | Sentry project name | No | (empty) |
| `SENTRY_ORG` | Sentry organization | No | (empty) |
| `METRICS_ENABLED` | Expose the /metrics endpoint | No | `false` |
| `TRACES_ENABLED` | Enable instrumentation of functions and sending traces to a collector | No | `false` |
| `BLOB_PROPAGATOR_ENABLED` | Enable uploading blobs to multiple storages in parallel | No | `false` |
| `NEXT_PUBLIC_POSTHOG_ID` | PostHog project API key used for tracking events and analytics | No | (empty) |
| `NEXT_PUBLIC_POSTHOG_HOST` | Host URL for the PostHog instance used for analytics tracking | No | `https://us.i.posthog.com` |

## Blobscan API

Expand Down Expand Up @@ -60,6 +62,8 @@ nextjs:
| `BLOB_PROPAGATOR_ENABLED` | Enable parallel uploading of blobs to multiple storage locations | No | `false` |
| `BLOB_PROPAGATOR_COMPLETED_JOBS_AGE` | Remove completed jobs after the specified number of seconds (default: 1 day) | No | `86400` |
| `BLOB_PROPAGATOR_FAILED_JOBS_AGE` | Remove completed jobs after the specified number of seconds (default: 7 days) | No | `604800` |
| `POSTHOG_ID` | PostHog project API key used for tracking events and analytics | No | (empty) |
| `POSTHOG_HOST` | Host URL for the PostHog instance used for analytics tracking | No | `https://us.i.posthog.com` |

## Blobscan indexer

Expand Down
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"echarts-for-react": "^3.0.2",
"next": "^14.2.5",
"next-themes": "^0.2.1",
"posthog-js": "^1.166.1",
"pretty-bytes": "^6.1.1",
"react": "18.2.0",
"react-blockies": "^1.4.1",
Expand Down
2 changes: 2 additions & 0 deletions apps/web/src/env.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export const env = createEnv({
.default("https://beaconcha.in/"),
NEXT_PUBLIC_VERSION: z.string().optional(),
NEXT_PUBLIC_SENTRY_DSN_WEB: z.string().url().optional(),
NEXT_PUBLIC_POSTHOG_ID: z.string().optional(),
NEXT_PUBLIC_POSTHOG_HOST: z.string().default("https://us.i.posthog.com")
},
/**
* Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
Expand Down
79 changes: 61 additions & 18 deletions apps/web/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/public-sans/400.css";
import "@fontsource/public-sans/500.css";
import { useEffect } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import cookie from "cookie";
import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";
import { SkeletonTheme } from "react-loading-skeleton";

import AppLayout from "~/components/AppLayout/AppLayout";
Expand All @@ -18,33 +23,71 @@ import { env } from "~/env.mjs";
import { useIsMounted } from "~/hooks/useIsMounted";
import { BlobDecoderWorkerProvider } from "~/providers/BlobDecoderWorker";

if (typeof window !== "undefined" && env.NEXT_PUBLIC_POSTHOG_ID) {
posthog.init(env.NEXT_PUBLIC_POSTHOG_ID, {
api_host: env.NEXT_PUBLIC_POSTHOG_HOST,
person_profiles: "identified_only",
loaded: (posthog) => {
if (env.NODE_ENV === "development") {
posthog.debug();
}
},
});
}

function App({ Component, pageProps }: NextAppProps) {
const { resolvedTheme } = useTheme();
const isMounted = useIsMounted();
const router = useRouter();

useEffect(() => {
const handleRouteChange = () => {
if (!posthog) {
return;
}

const distinctId = cookie.parse(document.cookie)["distinctId"];

if (!distinctId) {
return;
}

posthog.identify(distinctId);
posthog.capture("$pageview");
};

router.events.on("routeChangeComplete", handleRouteChange);

return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);

if (!isMounted) {
return null;
}

return (
<SkeletonTheme
baseColor={resolvedTheme === "dark" ? "#434672" : "#EADEFD"}
highlightColor={resolvedTheme === "dark" ? "#7D80AB" : "#E2CFFF"}
>
<Head>
<title>Blobscan</title>
<meta
name="description"
content="Blobscan is the first EIP4844 Blob Transaction explorer, a web-based application that offers a seamless experience for navigating and indexing blob data."
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<AppLayout>
<Component {...pageProps} />
</AppLayout>
<FeedbackWidget />
{env.NEXT_PUBLIC_VERCEL_ANALYTICS_ENABLED && <Analytics />}
</SkeletonTheme>
<PostHogProvider client={posthog}>
<SkeletonTheme
baseColor={resolvedTheme === "dark" ? "#434672" : "#EADEFD"}
highlightColor={resolvedTheme === "dark" ? "#7D80AB" : "#E2CFFF"}
>
<Head>
<title>Blobscan</title>
<meta
name="description"
content="Blobscan is the first EIP4844 Blob Transaction explorer, a web-based application that offers a seamless experience for navigating and indexing blob data."
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<AppLayout>
<Component {...pageProps} />
</AppLayout>
<FeedbackWidget />
{env.NEXT_PUBLIC_VERCEL_ANALYTICS_ENABLED && <Analytics />}
</SkeletonTheme>
</PostHogProvider>
);
}

Expand Down
1 change: 1 addition & 0 deletions packages/api/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@blobscan/zod": "workspace:^0.1.0",
"@trpc/server": "^10.43.2",
"jsonwebtoken": "^9.0.0",
"posthog-node": "^4.2.0",
"superjson": "1.9.1",
"trpc-openapi": "^1.2.0",
"viem": "^2.17.4"
Expand Down
Loading

0 comments on commit e7187c3

Please sign in to comment.