feat: integrate PostHog for sourcemap uploads and update dependencies

.github/workflows/build.yml

@@ -17,5 +17,10 @@ jobs:
         cache: 'npm'
     - name: Install dependencies
       run: npm i
-    - run: npm run build
+    - name: Build
+      run: npm run build
+      env:
+        POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
+        POSTHOG_PROJECT_ID: ${{ secrets.POSTHOG_PROJECT_ID }}
+        POSTHOG_HOST: ${{ secrets.POSTHOG_HOST }}
     - run: npm run lint:ci

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "donetick",
-  "version": "1.2.45",
+  "version": "1.2.47",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "donetick",
-      "version": "1.2.45",
+      "version": "1.2.47",
       "hasInstallScript": true,
       "dependencies": {
         "@capacitor-community/in-app-review": "^8.0.0",
@@ -42,6 +42,7 @@
         "@mui/joy": "5.0.0-beta.52",
         "@mui/material": "^5.15.2",
         "@openreplay/tracker": "^14.0.4",
+        "@posthog/rollup-plugin": "^1.4.9",
         "@revenuecat/purchases-capacitor": "^12.0.0",
         "@revenuecat/purchases-capacitor-ui": "^12.0.0",
         "@stylistic/eslint-plugin": "^5.10.0",
@@ -4595,6 +4596,49 @@
         "@posthog/types": "^1.402.2"
       }
     },
+    "node_modules/@posthog/cli": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@posthog/cli/-/cli-0.11.2.tgz",
+      "integrity": "sha512-iqYIl/Q2FfE/+vftlHqGYFz4DRcDon7t28PU6kIefFFUMr0Z4bZrypnxU/Wl4xW/0uUw4fiAKs2tkWmwh3lSDA==",
+      "hasInstallScript": true,
+      "hasShrinkwrap": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.1.2"
+      },
+      "bin": {
+        "posthog-cli": "run-posthog-cli.js"
+      },
+      "engines": {
+        "node": ">=14.14",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/@posthog/cli/node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@posthog/cli/node_modules/prettier": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+      "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+      "extraneous": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@posthog/core": {
       "version": "1.47.0",
       "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.47.0.tgz",
@@ -4604,6 +4648,29 @@
         "@posthog/types": "^1.402.2"
       }
     },
+    "node_modules/@posthog/plugin-utils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@posthog/plugin-utils/-/plugin-utils-1.1.3.tgz",
+      "integrity": "sha512-bJ7llB5We3NRB6VZfPLAn71Ps8+Q/bEP3T4/Q61CDE8tbkSMiVvWp9cyGRBdBmPnX4X5rT+rEtUZreVPwTvw3g==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.6"
+      }
+    },
+    "node_modules/@posthog/rollup-plugin": {
+      "version": "1.4.9",
+      "resolved": "https://registry.npmjs.org/@posthog/rollup-plugin/-/rollup-plugin-1.4.9.tgz",
+      "integrity": "sha512-OzmX630yoyp5+cIeqlr0lLRW4P/ppabK9QC/pe+lqArCohYKp5gjl5fKgYlQ3ruc6Hm+JyF0KuS160O1ZHAvzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@posthog/cli": "~0.11.1",
+        "@posthog/plugin-utils": "^1.1.3",
+        "magic-string": "^0.30.17"
+      },
+      "peerDependencies": {
+        "rollup": ">= 4.0.0"
+      }
+    },
     "node_modules/@posthog/types": {
       "version": "1.402.3",
       "resolved": "https://registry.npmjs.org/@posthog/types/-/types-1.402.3.tgz",
@@ -7868,7 +7935,6 @@
     },
     "node_modules/detect-libc": {
       "version": "2.0.4",
-      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"

package.json

@@ -74,6 +74,7 @@
     "@mui/joy": "5.0.0-beta.52",
     "@mui/material": "^5.15.2",
     "@openreplay/tracker": "^14.0.4",
+    "@posthog/rollup-plugin": "^1.4.9",
     "@revenuecat/purchases-capacitor": "^12.0.0",
     "@revenuecat/purchases-capacitor-ui": "^12.0.0",
     "@stylistic/eslint-plugin": "^5.10.0",

vite.config.mjs

@@ -1,92 +1,117 @@
+import posthog from '@posthog/rollup-plugin'
 import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import pkg from './package.json'
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => ({
+export default ({ command, mode }) => {
-  define: {
+  const env = loadEnv(mode, process.cwd(), '')
-    'import.meta.env.VITE_APP_VERSION': JSON.stringify(pkg.version),
+  const personalApiKey = process.env.POSTHOG_API_KEY || env.POSTHOG_API_KEY
-  },
+  const projectId = process.env.POSTHOG_PROJECT_ID || env.POSTHOG_PROJECT_ID
-  // Strip console.* / debugger from production bundles only, so dev logging
+  const host = process.env.POSTHOG_HOST || env.POSTHOG_HOST
-  // is untouched. `command` is 'build' for `vite build`, 'serve' for the dev server.
+  const uploadPosthogSourcemaps =
-  esbuild: {
+    command === 'build' && Boolean(personalApiKey && projectId)
-    drop: command === 'build' ? ['console', 'debugger'] : [],
-  },
-  plugins: [
-    react(),
-    VitePWA({
-      includeAssets: [
-        'favicon.ico',
-        'robots.txt',
-        'apple-touch-icon.png',
-        'safari-pinned-tab.svg',
-        'mstile-150x150.png',
-      ],
-      injectManifest: {
-        globIgnores: ['index.html'],
-        globPatterns: ['**/*.{js,css,html,png,svg}'],
-      },
-      manifest: {
-        background_color: '#ffffff',
-        display: 'standalone',
-        icons: [
-          {
-            sizes: '192x192',
-            src: '/android-chrome-192x192.png',
-            type: 'image/png',
-          },
-          {
-            sizes: '512x512',
-            src: '/android-chrome-512x512.png',
-            type: 'image/png',
-          },
-          {
-            sizes: '64x64',
-            src: 'pwa-64x64.png',
-            type: 'image/png',
-          },
-          {
-            sizes: '192x192',
-            src: 'pwa-192x192.png',
-            type: 'image/png',
-          },
-          {
-            sizes: '512x512',
-            src: 'pwa-512x512.png',
-            type: 'image/png',
-          },
-          {
-            purpose: 'maskable',
-            sizes: '512x512',
-            src: 'maskable-icon-512x512.png',
-            type: 'image/png',
-          },
-        ],
-        name: 'Donetick: Simplify Tasks & Chores, Together.',
-        short_name: 'Donetick',
-        theme_color: '#ffffff',
-      },
-      registerType: 'prompt',
-      workbox: {
-        clientsClaim: true, // Take control of uncontrolled clients as soon as the service worker becomes active
-        maximumFileSizeToCacheInBytes: 6000000, // 6MB
-        //Exclude API and Swagger routes from service worker navigation fallback
-        navigateFallback: '/index.html',
-        navigateFallbackDenylist: [
-          /^\/api\//, // Exclude all API routes
-          /^\/swagger/, // Exclude all Swagger routes
-        ],
-        skipWaiting: true, // Force the waiting service worker to become the active service worker
-      },
-    }),
-  ],
 
-  resolve: {
+  return defineConfig({
-    alias: [
+    define: {
-      {
+      'import.meta.env.VITE_APP_VERSION': JSON.stringify(pkg.version),
-        find: '@',
+    },
-        replacement: '/src',
+    // Strip console.* / debugger from production bundles only, so dev logging
-      },
+    // is untouched. `command` is 'build' for `vite build`, 'serve' for the dev server.
+    esbuild: {
+      drop: command === 'build' ? ['console', 'debugger'] : [],
+    },
+    plugins: [
+      react(),
+      ...(uploadPosthogSourcemaps
+        ? [
+            posthog({
+              personalApiKey,
+              projectId,
+              host,
+              sourcemaps: {
+                deleteAfterUpload: true,
+              },
+            }),
+          ]
+        : []),
+      VitePWA({
+        includeAssets: [
+          'favicon.ico',
+          'robots.txt',
+          'apple-touch-icon.png',
+          'safari-pinned-tab.svg',
+          'mstile-150x150.png',
+        ],
+        injectManifest: {
+          globIgnores: ['index.html'],
+          globPatterns: ['**/*.{js,css,html,png,svg}'],
+        },
+        manifest: {
+          background_color: '#ffffff',
+          display: 'standalone',
+          icons: [
+            {
+              sizes: '192x192',
+              src: '/android-chrome-192x192.png',
+              type: 'image/png',
+            },
+            {
+              sizes: '512x512',
+              src: '/android-chrome-512x512.png',
+              type: 'image/png',
+            },
+            {
+              sizes: '64x64',
+              src: 'pwa-64x64.png',
+              type: 'image/png',
+            },
+            {
+              sizes: '192x192',
+              src: 'pwa-192x192.png',
+              type: 'image/png',
+            },
+            {
+              sizes: '512x512',
+              src: 'pwa-512x512.png',
+              type: 'image/png',
+            },
+            {
+              purpose: 'maskable',
+              sizes: '512x512',
+              src: 'maskable-icon-512x512.png',
+              type: 'image/png',
+            },
+          ],
+          name: 'Donetick: Simplify Tasks & Chores, Together.',
+          short_name: 'Donetick',
+          theme_color: '#ffffff',
+        },
+        registerType: 'prompt',
+        workbox: {
+          // The PWA plugin runs after PostHog's upload/cleanup stage, so prevent
+          // it from leaving separate service-worker source maps in dist.
+          sourcemap: false,
+          clientsClaim: true, // Take control of uncontrolled clients as soon as the service worker becomes active
+          maximumFileSizeToCacheInBytes: 6000000, // 6MB
+          //Exclude API and Swagger routes from service worker navigation fallback
+          navigateFallback: '/index.html',
+          navigateFallbackDenylist: [
+            /^\/api\//, // Exclude all API routes
+            /^\/swagger/, // Exclude all Swagger routes
+          ],
+          skipWaiting: true, // Force the waiting service worker to become the active service worker
+        },
+      }),
     ],
-  },
+
-}))
+    resolve: {
+      alias: [
+        {
+          find: '@',
+          replacement: '/src',
+        },
+      ],
+    },
+  })
+}