Add PostHog Analytics

2024-11-03 12:14:11 +01:00
parent 9617f6f273
commit 82ff1b878e
5 changed files with 54 additions and 7 deletions
@@ -28,6 +28,7 @@
    "foliate-js": "workspace:*",
    "js-md5": "^0.8.3",
    "next": "15.0.1",
+    "posthog-js": "^1.180.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-icons": "^5.3.0",
@@ -26,10 +26,11 @@
    ],
    "security": {
      "csp": {
-        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
+        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com",
        "img-src": "'self' blob: data: asset: http://asset.localhost",
        "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost",
-        "frame-src": "'self' blob: asset: http://asset.localhost"
+        "frame-src": "'self' blob: asset: http://asset.localhost",
+        "script-src": "'self' 'unsafe-inline' 'unsafe-eval' blob: asset: http://asset.localhost https://*.sentry.io https://*.posthog.com"
      },
      "assetProtocol": {
        "enable": true,
@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { Metadata } from 'next';
 import { AuthProvider } from '@/context/AuthContext';
 import { EnvProvider } from '@/context/EnvContext';
+import { CSPostHogProvider } from '@/context/PHContext';
 import './globals.css';

 export const metadata: Metadata = {
@@ -15,11 +16,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
      <head>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
      </head>
-      <body>
-        <EnvProvider>
-          <AuthProvider>{children}</AuthProvider>
-        </EnvProvider>
-      </body>
+      <CSPostHogProvider>
+        <body>
+          <EnvProvider>
+            <AuthProvider>{children}</AuthProvider>
+          </EnvProvider>
+        </body>
+      </CSPostHogProvider>
    </html>
  );
 }
@@ -0,0 +1,14 @@
+'use client';
+import { ReactNode } from 'react';
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+
+if (typeof window !== 'undefined' && process.env['NEXT_PUBLIC_POSTHOG_KEY']) {
+  posthog.init(process.env['NEXT_PUBLIC_POSTHOG_KEY'], {
+    api_host: process.env['NEXT_PUBLIC_POSTHOG_HOST'],
+    person_profiles: 'always',
+  });
+}
+export const CSPostHogProvider = ({ children }: { children: ReactNode }) => {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+};
@@ -71,6 +71,9 @@ importers:
      next:
        specifier: 15.0.1
        version: 15.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      posthog-js:
+        specifier: ^1.180.1
+        version: 1.180.1
      react:
        specifier: 18.3.1
        version: 18.3.1
@@ -1787,6 +1790,9 @@ packages:
  fastq@1.17.1:
    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}

+  fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
  fflate@0.8.2:
    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}

@@ -2736,6 +2742,12 @@ packages:
    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
    engines: {node: ^10 || ^12 || >=14}

+  posthog-js@1.180.1:
+    resolution: {integrity: sha512-LV65maVrpqkAh0wu32YvU7FpCSEjg6o+sZFYCs1+6tnEa9VvXuz8J6ReLiyRpJABI4j1qX/PB2jaVY5tDbLalQ==}
+
+  preact@10.24.3:
+    resolution: {integrity: sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==}
+
  prelude-ls@1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}
@@ -3348,6 +3360,9 @@ packages:
  v8-compile-cache-lib@3.0.1:
    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}

+  web-vitals@4.2.4:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
+
  webidl-conversions@3.0.1:
    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}

@@ -5523,6 +5538,8 @@ snapshots:
    dependencies:
      reusify: 1.0.4

+  fflate@0.4.8: {}
+
  fflate@0.8.2: {}

  file-entry-cache@8.0.0:
@@ -6479,6 +6496,15 @@ snapshots:
      picocolors: 1.1.0
      source-map-js: 1.2.1

+  posthog-js@1.180.1:
+    dependencies:
+      core-js: 3.38.1
+      fflate: 0.4.8
+      preact: 10.24.3
+      web-vitals: 4.2.4
+
+  preact@10.24.3: {}
+
  prelude-ls@1.2.1: {}

  preserve@0.2.0: {}
@@ -7175,6 +7201,8 @@ snapshots:
  v8-compile-cache-lib@3.0.1:
    optional: true

+  web-vitals@4.2.4: {}
+
  webidl-conversions@3.0.1:
    optional: true