Remove Plausible and implement homegrown Stats (more privacy-respecti…

…ng).
BrunoBernardino · Jul 16, 2022 · e33e1ec · e33e1ec
1 parent f90d463
commit e33e1ec
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 143 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ This is the web app for the [Budget Zen app](https://budgetzen.net), built with
 
 This is v2, which is [end-to-end encrypted via userbase](https://userbase.com), and works via web on any device (it's a PWA - Progressive Web App).
 
-It's not compatible with Budget Zen v1 (not end-to-end encrypted), which you can still get locally from [this commit](https://github.com/BrunoBernardino/budgetzen-web/tree/397d625469b7dfd8d1968c847b32e607ee7c8ee9) and built in [here](https://v1.budgetzen.net). You can still export and import the data as the JSON format is the same (unencrypted).
+It's not compatible with Budget Zen v1 (not end-to-end encrypted), which you can still get locally from [this commit](https://github.com/BrunoBernardino/budgetzen-web/tree/397d625469b7dfd8d1968c847b32e607ee7c8ee9). You can still export and import the data as the JSON format is the same (unencrypted).
 
 ## Development
 

diff --git a/lib/constants.ts b/lib/constants.ts
@@ -1,5 +1,6 @@
 import { getUserInfo } from 'lib/utils';
 
+export const baseUrl = 'https://app.budgetzen.net';
 export const defaultTitle =
   'Budget Zen — Simple and Encrypted Budget Management';
 export const defaultDescription = 'Simple and encryped budget management.';

diff --git a/next.config.js b/next.config.js
@@ -9,7 +9,7 @@ const securityHeaders = [
   {
     key: 'Content-Security-Policy',
     value:
-      "default-src 'self' https://*.userbase.com wss://*.userbase.com https://*.stripe.com https://plausible.io data: blob:; child-src 'self' data: blob: https://*.stripe.com; img-src 'self' https://plausible.io data: blob: https://*.stripe.com; style-src 'self' 'unsafe-inline' https://*.stripe.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://plausible.io https://*.stripe.com",
+      "default-src 'self' https://*.userbase.com wss://*.userbase.com https://*.stripe.com data: blob:; child-src 'self' data: blob: https://*.stripe.com; img-src 'self' data: blob: https://*.stripe.com; style-src 'self' 'unsafe-inline' https://*.stripe.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.stripe.com",
   },
   {
     key: 'Strict-Transport-Security',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.19",
+    "axios": "0.27.2",
     "ky": "0.28.7",
     "moment": "2.29.1",
     "next": "12.0.7",

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -52,11 +52,6 @@ export default class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
-          <script
-            defer
-            data-domain="app.budgetzen.net"
-            src="https://plausible.io/js/plausible.js"
-          />
           <script src="https://js.stripe.com/v3/" defer />
         </body>
       </Html>

diff --git a/pages/billing.tsx b/pages/billing.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
+import axios from 'axios';
 
 import { Main } from 'components/Layout';
 import Billing from 'components/Panels/Billing';
@@ -9,6 +10,7 @@ import {
   defaultTitle,
   defaultDescription,
   defaultKeywords,
+  baseUrl,
 } from 'lib/constants';
 
 const BillingPage = () => {
@@ -65,4 +67,31 @@ const BillingPage = () => {
   );
 };
 
+export const getServerSideProps = async ({ req }: { req: Request }) => {
+  // @ts-ignore it does exist
+  if (req && req.headers && !req.headers.host.startsWith('localhost')) {
+    const pathname = req.url;
+
+    try {
+      await axios.post('https://stats.onbrn.com/api/event', {
+        headers: {
+          'content-type': 'application/json; charset=utf-8',
+        },
+        body: {
+          domain: baseUrl.replace('https://', ''),
+          name: 'pageview',
+          url: `${baseUrl}${pathname}`,
+        },
+      });
+    } catch (error) {
+      console.log('Failed to log pageview');
+      console.error(error);
+    }
+  }
+
+  return {
+    props: {},
+  };
+};
+
 export default BillingPage;
diff --git a/pages/email-password.tsx b/pages/email-password.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
 import { Main } from 'components/Layout';
 import EmailPassword from 'components/Panels/EmailPassword';
@@ -8,6 +9,7 @@ import {
   defaultTitle,
   defaultDescription,
   defaultKeywords,
+  baseUrl,
 } from 'lib/constants';
 
 const EmailPasswordPage = () => {
@@ -47,4 +49,31 @@ const EmailPasswordPage = () => {
   );
 };
 
+export const getServerSideProps = async ({ req }: { req: Request }) => {
+  // @ts-ignore it does exist
+  if (req && req.headers && !req.headers.host.startsWith('localhost')) {
+    const pathname = req.url;
+
+    try {
+      await axios.post('https://stats.onbrn.com/api/event', {
+        headers: {
+          'content-type': 'application/json; charset=utf-8',
+        },
+        body: {
+          domain: baseUrl.replace('https://', ''),
+          name: 'pageview',
+          url: `${baseUrl}${pathname}`,
+        },
+      });
+    } catch (error) {
+      console.log('Failed to log pageview');
+      console.error(error);
+    }
+  }
+
+  return {
+    props: {},
+  };
+};
+
 export default EmailPasswordPage;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
 import { Main } from 'components/Layout';
 import Login from 'components/Panels/Login';
@@ -9,6 +10,7 @@ import {
   defaultTitle,
   defaultDescription,
   defaultKeywords,
+  baseUrl,
 } from 'lib/constants';
 
 const IndexPage = () => {
@@ -40,4 +42,31 @@ const IndexPage = () => {
   );
 };
 
+export const getServerSideProps = async ({ req }: { req: Request }) => {
+  // @ts-ignore it does exist
+  if (req && req.headers && !req.headers.host.startsWith('localhost')) {
+    const pathname = req.url;
+
+    try {
+      await axios.post('https://stats.onbrn.com/api/event', {
+        headers: {
+          'content-type': 'application/json; charset=utf-8',
+        },
+        body: {
+          domain: baseUrl.replace('https://', ''),
+          name: 'pageview',
+          url: `${baseUrl}${pathname}`,
+        },
+      });
+    } catch (error) {
+      console.log('Failed to log pageview');
+      console.error(error);
+    }
+  }
+
+  return {
+    props: {},
+  };
+};
+
 export default IndexPage;
diff --git a/pages/pricing.tsx b/pages/pricing.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
+import axios from 'axios';
 
 import { Main } from 'components/Layout';
 import Pricing from 'components/Panels/Pricing';
@@ -9,6 +10,7 @@ import {
   defaultTitle,
   defaultDescription,
   defaultKeywords,
+  baseUrl,
 } from 'lib/constants';
 
 const PricingPage = () => {
@@ -57,4 +59,31 @@ const PricingPage = () => {
   );
 };
 
+export const getServerSideProps = async ({ req }: { req: Request }) => {
+  // @ts-ignore it does exist
+  if (req && req.headers && !req.headers.host.startsWith('localhost')) {
+    const pathname = req.url;
+
+    try {
+      await axios.post('https://stats.onbrn.com/api/event', {
+        headers: {
+          'content-type': 'application/json; charset=utf-8',
+        },
+        body: {
+          domain: baseUrl.replace('https://', ''),
+          name: 'pageview',
+          url: `${baseUrl}${pathname}`,
+        },
+      });
+    } catch (error) {
+      console.log('Failed to log pageview');
+      console.error(error);
+    }
+  }
+
+  return {
+    props: {},
+  };
+};
+
 export default PricingPage;