Merge pull request #50 from zdam-egzamin-zawodowy/plausible

add and setup plausible

.github/workflows/publish.yml

@@ -39,13 +39,16 @@ jobs:
         with:
           context: .
           build-args: |
-            ENABLE_SENTRY_WEBPACK_PLUGIN=true
+            SENTRY_WEBPACK_PLUGIN_ENABLED=true
             SENTRY_URL=${{ secrets.SENTRY_URL }}
             SENTRY_ORG=${{ secrets.SENTRY_ORG }}
             SENTRY_PROJECT=${{ secrets.SENTRY_PROJECT }}
             SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
             SENTRY_DSN=${{ secrets.SENTRY_DSN }}
             VERSION=v${{ steps.get_version.outputs.VERSION }}
+            PLAUSIBLE_ENABLED=true
+            PLAUSIBLE_DOMAIN=${{ secrets.PLAUSIBLE_DOMAIN }}
+            PLAUSIBLE_CUSTOM_DOMAIN=${{ secrets.PLAUSIBLE_CUSTOM_DOMAIN }}
           tags: |
             ${{ secrets.REGISTRY_NAME }}/zdam-egzamin-zawodowy-website:latest
             ${{ secrets.REGISTRY_NAME }}/zdam-egzamin-zawodowy-website:${{ steps.get_version.outputs.VERSION }}

Dockerfile

@@ -10,16 +10,19 @@ RUN yarn install --frozen-lockfile
 FROM node:14.18.1-alpine AS builder
 
 ARG VERSION="v0.0.0"
-ARG ENABLE_SENTRY_WEBPACK_PLUGIN="false"
+ARG SENTRY_WEBPACK_PLUGIN_ENABLED="false"
 ARG SENTRY_URL=""
 ARG SENTRY_ORG=""
 ARG SENTRY_PROJECT=""
 ARG SENTRY_AUTH_TOKEN=""
 ARG SENTRY_DSN=""
+ARG PLAUSIBLE_ENABLED="false"
+ARG PLAUSIBLE_DOMAIN=""
+ARG PLAUSIBLE_CUSTOM_DOMAIN=""
 
 WORKDIR /app
 
-ENV ENABLE_SENTRY_WEBPACK_PLUGIN=$ENABLE_SENTRY_WEBPACK_PLUGIN \
+ENV SENTRY_WEBPACK_PLUGIN_ENABLED=$SENTRY_WEBPACK_PLUGIN_ENABLED \
     SENTRY_URL=$SENTRY_URL \
     SENTRY_ORG=$SENTRY_ORG \
     SENTRY_PROJECT=$SENTRY_PROJECT \
@@ -27,6 +30,9 @@ ENV ENABLE_SENTRY_WEBPACK_PLUGIN=$ENABLE_SENTRY_WEBPACK_PLUGIN \
     SENTRY_DSN=$SENTRY_DSN \
     NEXT_PUBLIC_SENTRY_DSN=$SENTRY_DSN \
     NEXT_PUBLIC_VERSION=$VERSION \
+    NEXT_PUBLIC_PLAUSIBLE_ENABLED=$PLAUSIBLE_ENABLED \
+    NEXT_PUBLIC_PLAUSIBLE_DOMAIN=$PLAUSIBLE_DOMAIN \
+    NEXT_PUBLIC_PLAUSIBLE_CUSTOM_DOMAIN = $PLAUSIBLE_CUSTOM_DOMAIN \
     BUILDING_PROCESS=true
 
 COPY . .
@@ -41,12 +47,18 @@ WORKDIR /app
 
 ARG VERSION="v0.0.0"
 ARG SENTRY_DSN=""
+ARG PLAUSIBLE_ENABLED="false"
+ARG PLAUSIBLE_DOMAIN=""
+ARG PLAUSIBLE_CUSTOM_DOMAIN=""
 
 ENV NODE_ENV=production \
     SENTRY_DSN=$SENTRY_DSN \
     NEXT_PUBLIC_SENTRY_DSN=$SENTRY_DSN \
     VERSION=$VERSION \
     NEXT_PUBLIC_VERSION=$VERSION \
+    NEXT_PUBLIC_PLAUSIBLE_ENABLED=$PLAUSIBLE_ENABLED \
+    NEXT_PUBLIC_PLAUSIBLE_DOMAIN=$PLAUSIBLE_DOMAIN \
+    NEXT_PUBLIC_PLAUSIBLE_CUSTOM_DOMAIN = $PLAUSIBLE_CUSTOM_DOMAIN \
     BUILDING_PROCESS=false
 
 COPY --from=builder /app/next.config.js ./

next.config.js

@@ -7,7 +7,7 @@ const CDN = process.env.NEXT_PUBLIC_CDN_URI
 const cfg = {
   sentry: {
     disableServerWebpackPlugin:
-      process.env.ENABLE_SENTRY_WEBPACK_PLUGIN !== 'true',
+      process.env.SENTRY_WEBPACK_PLUGIN_ENABLED !== 'true',
     get disableClientWebpackPlugin() {
       return this.disableServerWebpackPlugin;
     },

package.json

@@ -24,6 +24,7 @@
     "graphql-request": "^3.4.0",
     "lodash": "^4.17.21",
     "next": "12.0.3",
+    "next-plausible": "^3.1.3",
     "next-sitemap": "^1.6.25",
     "polish-plurals": "^1.1.0",
     "react": "17.0.2",

src/features/IndexPage/IndexPage.tsx

@@ -1,5 +1,4 @@
 import { GetStaticProps } from 'next';
-import * as Sentry from '@sentry/nextjs';
 import {
   createClient,
   Profession,
@@ -77,9 +76,7 @@ export const getStaticProps: GetStaticProps = async () => {
         resp.professions.items
       );
     }
-  } catch (e) {
-    Sentry.captureException(e);
-  }
+  } catch (e) {}
 
   return {
     props: pageProps,

src/features/QualificationPage/features/TestPage/TestPage.tsx

@@ -1,5 +1,4 @@
 import { GetStaticPaths, GetStaticProps } from 'next';
-import * as Sentry from '@sentry/nextjs';
 import { isString, isNil } from 'lodash';
 import { polishPlurals } from 'polish-plurals';
 import {
@@ -127,7 +126,6 @@ export const getStaticProps: GetStaticProps<TestPageProps, TestPageParams> =
         revalidate: REVALIDATE_SUCCESS,
       };
     } catch (e) {
-      Sentry.captureException(e);
       return { notFound: true, revalidate: REVALIDATE_ERROR };
     }
   };

src/features/QualificationPage/features/TestPage/components/Test/Test.tsx

@@ -1,6 +1,5 @@
 import { Fragment, useRef, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
-import * as Sentry from '@sentry/nextjs';
 import clsx from 'clsx';
 import { usePrompt } from 'libs/hooks';
 import {
@@ -110,9 +109,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
       });
 
       resetValues(newQuestions);
-    } catch (e) {
-      Sentry.captureException(e);
-    }
+    } catch (e) {}
 
     setIsFetching(false);
   };

src/libs/plausible/PlausibleProvider.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+import PlausibleProvider from 'next-plausible';
+
+type PlausibleProviderProps = PropsWithChildren<
+  Partial<Parameters<typeof PlausibleProvider>[0]>
+>;
+
+const MyPlausibleProvider = ({ children, ...rest }: PlausibleProviderProps) => {
+  return (
+    <PlausibleProvider
+      enabled={process.env.NEXT_PUBLIC_PLAUSIBLE_ENABLED === 'true'}
+      domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN ?? ''}
+      customDomain={process.env.NEXT_PUBLIC_PLAUSIBLE_CUSTOM_DOMAIN}
+      trackLocalhost={
+        process.env.NEXT_PUBLIC_PLAUSIBLE_TRACK_LOCALHOST === 'true'
+      }
+      selfHosted={process.env.NEXT_PUBLIC_PLAUSIBLE_CUSTOM_DOMAIN !== ''}
+      {...rest}
+    >
+      {children}
+    </PlausibleProvider>
+  );
+};
+
+export default MyPlausibleProvider;

src/pages/_app.tsx

@@ -1,9 +1,10 @@
 import '@kichiyaki/roboto';
 import { useEffect } from 'react';
 import { AppProps } from 'next/app';
+import PlausibleProvider from 'libs/plausible/PlausibleProvider';
 import ThemeProvider from 'libs/material-ui/ThemeProvider';
 
-function MyApp({ Component, pageProps }: AppProps) {
+const App = ({ Component, pageProps }: AppProps) => {
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side');
     if (jssStyles && jssStyles.parentElement) {
@@ -13,9 +14,11 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ThemeProvider>
-      <Component {...pageProps} />
+      <PlausibleProvider>
+        <Component {...pageProps} />
+      </PlausibleProvider>
     </ThemeProvider>
   );
-}
+};
 
-export default MyApp;
+export default App;

yarn.lock

@@ -4700,6 +4700,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+next-plausible@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-3.1.3.tgz#7c798822a7d581270fc0e0cb430c60083bce5b8e"
+  integrity sha512-5e4jODgfF5sqL8E2HDrK8iWy1z67fFZJ4KsrbF+c0ZorhbqKl/kbocKESOWlelrl5gZpXIGb9Od2+XTuOUZAiA==
+
 next-sitemap@^1.6.25:
   version "1.6.148"
   resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-1.6.148.tgz#59ae167bd9317e8a285f586d9ceaab8bdf1817aa"