From 709d26735bdceb87036a09434cac878f3e4e8bc9 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 16 Dec 2021 16:48:50 +0100 Subject: [PATCH] Provide analytics on Front-end Signed-off-by: Thomas Citharel --- js/package.json | 6 +- js/src/App.vue | 10 + js/src/components/Error.vue | 158 +++++++- js/src/graphql/config.ts | 9 + js/src/i18n/en_US.json | 11 +- js/src/services/statistics/index.ts | 50 +++ js/src/services/statistics/matomo.ts | 14 + js/src/services/statistics/plausible.ts | 11 + js/src/services/statistics/sentry.ts | 54 +++ js/src/types/analytics/sentry.model.ts | 7 + js/src/types/config.model.ts | 13 + js/src/typings/matomo.d.ts | 1 + js/yarn.lock | 370 ++++++++++++------- lib/graphql/resolvers/config.ex | 4 +- lib/graphql/schema/config.ex | 26 ++ lib/service/front_end_analytics/analytics.ex | 53 +++ lib/service/front_end_analytics/matomo.ex | 30 ++ lib/service/front_end_analytics/plausible.ex | 31 ++ lib/service/front_end_analytics/sentry.ex | 31 ++ 19 files changed, 733 insertions(+), 156 deletions(-) create mode 100644 js/src/services/statistics/index.ts create mode 100644 js/src/services/statistics/matomo.ts create mode 100644 js/src/services/statistics/plausible.ts create mode 100644 js/src/services/statistics/sentry.ts create mode 100644 js/src/types/analytics/sentry.model.ts create mode 100644 js/src/typings/matomo.d.ts create mode 100644 lib/service/front_end_analytics/analytics.ex create mode 100644 lib/service/front_end_analytics/matomo.ex create mode 100644 lib/service/front_end_analytics/plausible.ex create mode 100644 lib/service/front_end_analytics/sentry.ex diff --git a/js/package.json b/js/package.json index 7eabe74f5..28348350e 100644 --- a/js/package.json +++ b/js/package.json @@ -8,7 +8,7 @@ "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 TZ=UTC vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint", - "build:assets": "vue-cli-service build", + "build:assets": "vue-cli-service build --report", "build:pictures": "bash ./scripts/build/pictures.sh" }, "dependencies": { @@ -17,6 +17,8 @@ "@apollo/client": "^3.3.16", "@mdi/font": "^6.1.95", "@tailwindcss/line-clamp": "^0.3.0", + "@sentry/tracing": "^6.16.1", + "@sentry/vue": "^6.16.1", "@tiptap/core": "^2.0.0-beta.41", "@tiptap/extension-blockquote": "^2.0.0-beta.25", "@tiptap/extension-bold": "^2.0.0-beta.24", @@ -69,7 +71,9 @@ "vue": "^2.6.11", "vue-class-component": "^7.2.3", "vue-i18n": "^8.14.0", + "vue-matomo": "^4.1.0", "vue-meta": "^2.3.1", + "vue-plausible": "^1.3.1", "vue-property-decorator": "^9.0.0", "vue-router": "^3.1.6", "vue-scrollto": "^2.17.1", diff --git a/js/src/App.vue b/js/src/App.vue index c67807e88..309331248 100644 --- a/js/src/App.vue +++ b/js/src/App.vue @@ -203,6 +203,16 @@ export default class App extends Vue { this.interval = undefined; } + @Watch("config") + async initializeStatistics(config: IConfig) { + if (config) { + const { statistics } = (await import("./services/statistics")) as { + statistics: (config: IConfig, environment: Record) => void; + }; + statistics(config, { router: this.$router, version: config.version }); + } + } + @Watch("$route", { immediate: true }) updateAnnouncement(route: Route): void { const pageTitle = this.extractPageTitleFromRoute(route); diff --git a/js/src/components/Error.vue b/js/src/components/Error.vue index 752938f06..e10a22775 100644 --- a/js/src/components/Error.vue +++ b/js/src/components/Error.vue @@ -48,13 +48,75 @@ $t("Mobilizon") }} - {{ - $t( - "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):" - ) - }} + + {{ + $t( + "We collect your feedback and the error information in order to improve this service." + ) + }} + + {{ + $t( + "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):" + ) + }} +

-
+
+ + + + {{ + $t("Send feedback") + }} +

+ {{ + $t( + "Please add as many details as possible to help identify the problem." + ) + }} +

+
+ +

+ {{ + $t( + "Sorry, we wen't able to save your feedback. Don't worry, we'll try to fix this issue anyway." + ) + }} +

+ + + +
+ +

{{ $t("Thanks a lot, your feedback was submitted!") }}

+ + + +
+ -

+

{{ $t( "Please add as many details as possible to help identify the problem." @@ -89,14 +151,14 @@

{{ $t("Error stacktrace") }}

{{ error.stack }}
-

+

{{ $t( "The technical details of the error can help developers solve the problem more easily. Please add them to your feedback." ) }}

-
+