feat: enable cloud Sentry Ref: KK-1474

chore: compose.yaml list all env files Ref: KK-1474

chore: vite.config.ts define process.env Ref: KK-1474

feat: generate sourcemaps Ref: KK-1474

Author: mikkojamG

.env.development.local.example

@@ -17,3 +17,9 @@ VITE_MATOMO_SRC_URL=https://webanalytics.digiaiiris.com/js/piwik.min.js
 VITE_MATOMO_TRACKER_URL=https://webanalytics.digiaiiris.com/js/tracker.php
 VITE_MATOMO_ENABLED=0
 VITE_IDLE_TIMEOUT_IN_MS=3600000
+VITE_SENTRY_ENVIRONMENT=local
+VITE_SENTRY_DSN=
+VITE_SENTRY_TRACES_SAMPLE_RATE=1.0
+VITE_SENTRY_TRACE_PROPAGATION_TARGETS=http://localhost:8081
+VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=0
+VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=0

CHANGELOG.md

@@ -403,29 +403,25 @@ See https://github.com/City-of-Helsinki/kukkuu-ui/milestone/6?closed=1
 
 ## [3.12.2](https://github.com/City-of-Helsinki/kukkuu-ui/compare/kukkuu-ui-v3.12.1...kukkuu-ui-v3.12.2) (2025-10-06)
 
-
 ### Bug Fixes
 
-* Stricter yarn configuration ([2f3a899](https://github.com/City-of-Helsinki/kukkuu-ui/commit/2f3a8994a5b46c39a44c63ef14a43b84a5225f55))
-
+- Stricter yarn configuration ([2f3a899](https://github.com/City-of-Helsinki/kukkuu-ui/commit/2f3a8994a5b46c39a44c63ef14a43b84a5225f55))
 
 ### Dependencies
 
-* Bump vite from 6.0.14 to 6.3.6 ([#697](https://github.com/City-of-Helsinki/kukkuu-ui/issues/697)) ([087a1b6](https://github.com/City-of-Helsinki/kukkuu-ui/commit/087a1b68bac2926b92b103908686fd76f04bdf51))
+- Bump vite from 6.0.14 to 6.3.6 ([#697](https://github.com/City-of-Helsinki/kukkuu-ui/issues/697)) ([087a1b6](https://github.com/City-of-Helsinki/kukkuu-ui/commit/087a1b68bac2926b92b103908686fd76f04bdf51))
 
 ## [3.12.1](https://github.com/City-of-Helsinki/kukkuu-ui/compare/kukkuu-ui-v3.12.0...kukkuu-ui-v3.12.1) (2025-09-12)
 
-
 ### Bug Fixes
 
-* React-router 7.5.2 fix imports ([b051f33](https://github.com/City-of-Helsinki/kukkuu-ui/commit/b051f33d6aec5309a95cd5415258c9ec821b0499))
-
+- React-router 7.5.2 fix imports ([b051f33](https://github.com/City-of-Helsinki/kukkuu-ui/commit/b051f33d6aec5309a95cd5415258c9ec821b0499))
 
 ### Dependencies
 
-* Bump form-data from 4.0.1 to 4.0.4 ([c759d10](https://github.com/City-of-Helsinki/kukkuu-ui/commit/c759d10025b734ec7cd1fbc2fb1bb1f2bead991a))
-* Bump react-router from 7.1.3 to 7.5.2 ([af5fb12](https://github.com/City-of-Helsinki/kukkuu-ui/commit/af5fb12998e1aa1616965b2b415349ca03727c5b))
-* Jsdom to 26.1.0 ([0ff4460](https://github.com/City-of-Helsinki/kukkuu-ui/commit/0ff44606080d4845dacd777cb59da0d64e6f1337))
+- Bump form-data from 4.0.1 to 4.0.4 ([c759d10](https://github.com/City-of-Helsinki/kukkuu-ui/commit/c759d10025b734ec7cd1fbc2fb1bb1f2bead991a))
+- Bump react-router from 7.1.3 to 7.5.2 ([af5fb12](https://github.com/City-of-Helsinki/kukkuu-ui/commit/af5fb12998e1aa1616965b2b415349ca03727c5b))
+- Jsdom to 26.1.0 ([0ff4460](https://github.com/City-of-Helsinki/kukkuu-ui/commit/0ff44606080d4845dacd777cb59da0d64e6f1337))
 
 ## [3.12.0](https://github.com/City-of-Helsinki/kukkuu-ui/compare/kukkuu-ui-v3.11.2...kukkuu-ui-v3.12.0) (2025-06-05)
 

Dockerfile

@@ -72,7 +72,12 @@ ARG VITE_OIDC_AUTOMATIC_SILENT_RENEW_ENABLED
 ARG VITE_OIDC_SESSION_POLLING_INTERVAL_MS
 ARG VITE_OIDC_AUDIENCES
 ARG VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO
+ARG VITE_SENTRY_ENVIRONMENT
 ARG VITE_SENTRY_DSN
+ARG VITE_SENTRY_TRACES_SAMPLE_RATE
+ARG VITE_SENTRY_TRACE_PROPAGATION_TARGETS
+ARG VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
+ARG VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
 ARG VITE_BUILDTIME
 ARG VITE_RELEASE
 ARG VITE_COMMITHASH

compose.yaml

@@ -6,35 +6,18 @@ services:
     build:
       context: .
       target: ${DOCKER_TARGET:-development} # select the docker container from dockerFile
-      args:
-        # NOTE: Build args hardcoded because Docker compose can't read build args
-        # from other env files beside .env, even if env_file parameter is used, see
-        # https://stackoverflow.com/questions/50592531/setting-build-args-in-docker-compose-yml-using-env-file
-        VITE_ORIGIN: http://localhost:3000
-        VITE_API_URI: https://kukkuu.api.test.hel.ninja/graphql
-        VITE_OIDC_SERVER_TYPE: KEYCLOAK
-        VITE_OIDC_RETURN_TYPE: 'code'
-        VITE_OIDC_AUTHORITY: https://tunnistus.test.hel.ninja/auth/realms/helsinki-tunnistus/
-        VITE_OIDC_CLIENT_ID: 'kukkuu-ui-test'
-        VITE_OIDC_KUKKUU_API_CLIENT_ID: 'kukkuu-api-test'
-        VITE_OIDC_SCOPE: 'openid profile email'
-        VITE_OIDC_AUDIENCES: kukkuu-api-test,profile-api-test
-        VITE_ADMIN_TICKET_VALIDATION_URL: https://kukkuu-admin.test.hel.ninja/check-ticket-validity
-        VITE_CMS_URI: https://kukkuu.app-staging.hkih.hion.dev/graphql
-        VITE_HELSINKI_PROFILE_URL: https://profiili.test.hel.ninja/loginsso
-        VITE_MATOMO_URL_BASE: https://webanalytics.digiaiiris.com/js/
-        VITE_MATOMO_SITE_ID: 813
-        VITE_MATOMO_ENABLED: 0
-        VITE_IDLE_TIMEOUT_IN_MS: 3600000 # 60 * 60 * 1000ms = 60min
     environment:
       NODE_ENV: ${DOCKER_TARGET:-development} # which node env the build uses. NOTE: Usually same as the ${DOCKER_TARGET}.
       VITE_ENVIRONMENT: ${DOCKER_TARGET:-development}
-    # Environment variables (not build args) for using the public test environment backend,
-    # must contain same values than the build args:
-    env_file: '.env.development'
+    # Load environment variables from base .env and environment-specific files
+    # Files are processed in order, with later files overriding earlier ones
+    env_file:
+      - ".env"
+      - ".env.development"
+      - ".env.development.local"
     volumes:
-      - '.:/app'
-      - '/app/node_modules'
+      - ".:/app"
+      - "/app/node_modules"
     ports:
-      - '3000:3000' # for development mode
-      - '8082:8080' # for production mode
+      - "3000:3000" # for development mode
+      - "8082:8080" # for production mode

package.json

@@ -70,7 +70,7 @@
     "@ffmpeg-installer/ffmpeg": "^1.1.0",
     "@jonkoops/matomo-tracker-react": "^0.7.0",
     "@reduxjs/toolkit": "^2.5.1",
-    "@sentry/browser": "^8.51.0",
+    "@sentry/browser": "^10.25.0",
     "@stylistic/eslint-plugin-js": "^3.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",

src/index.tsx

@@ -3,18 +3,54 @@ import 'hds-core/lib/base.css';
 import Modal from 'react-modal';
 import { createRoot } from 'react-dom/client';
 import React from 'react';
+import * as Sentry from '@sentry/browser';
 
 import BrowserApp from './domain/app/BrowserApp';
 import { initI18next } from './common/translation/i18n/i18nInit';
 import AppConfig from './domain/app/AppConfig';
-import { initSentry } from './utils/sentry';
-
 initI18next();
 Modal.setAppElement('#root');
 
-if (AppConfig.isAppInProductionMode) {
-  initSentry();
+if (import.meta.env.VITE_SENTRY_DSN) {
+  Sentry.init({
+    beforeSend(event) {
+      // Check if the event contains a PERMISSION_DENIED error
+      if (event.exception && event.exception.values) {
+        const isPermissionDenied = event.exception.values.some(
+          (exception) =>
+            exception.type === 'GraphQLError' &&
+            exception.value?.includes('PERMISSION_DENIED')
+        );
+        if (isPermissionDenied) {
+          // Return null to ignore the event
+          return null;
+        }
+      }
+      // Otherwise, send the event to Sentry
+      return event;
+    },
+    dsn: import.meta.env.VITE_SENTRY_DSN,
+    environment: import.meta.env.VITE_SENTRY_ENVIRONMENT,
+    release: import.meta.env.VITE_SENTRY_RELEASE,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration(),
+    ],
+    tracesSampleRate: parseFloat(
+      import.meta.env.VITE_SENTRY_TRACES_SAMPLE_RATE || '0'
+    ),
+    tracePropagationTargets: (
+      import.meta.env.VITE_SENTRY_TRACE_PROPAGATION_TARGETS || ''
+    ).split(','),
+    replaysSessionSampleRate: parseFloat(
+      import.meta.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE || '0'
+    ),
+    replaysOnErrorSampleRate: parseFloat(
+      import.meta.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE || '0'
+    ),
+  });
 }
+
 const container = document.getElementById('root') as Element;
 const root = createRoot(container);
 

src/utils/sentry.ts

@@ -16,6 +16,9 @@ export default defineConfig(() => {
         },
       },
     },
+    define: {
+      'process.env': '{}',
+    },
     envPrefix: 'VITE_',
     resolve: {
       alias: {
@@ -28,6 +31,7 @@ export default defineConfig(() => {
     },
     build: {
       outDir: 'build',
+      sourcemap: true,
     },
     server: {
       port: parseInt(process.env.PORT) || 3000,

vite.config.ts

@@ -2665,51 +2665,51 @@
   resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
   integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
 
-"@sentry-internal/browser-utils@8.51.0":
-  version "8.51.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.51.0.tgz#eaa245aefad8b3d893516ffe9535b1907f049094"
-  integrity sha512-r94yfRK17zNJER0hgQE4qOSy5pWzsnFcGTJQSqhSEKUcC4KK37qSfoPrPejFxtIqXhqlkd/dTWKvrMwXWcn0MQ==
-  dependencies:
-    "@sentry/core" "8.51.0"
-
-"@sentry-internal/feedback@8.51.0":
-  version "8.51.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.51.0.tgz#58e1de053b175e6fe5896e9b1282d754ea4e12d5"
-  integrity sha512-VgfxSZWLYUPKDnkt2zG+Oe5ccv8U3WPM6Mo4kfABIJT3Ai4VbZB7+vb2a4pm6lUCF9DeOPXHb5o9Tg17SHDAHw==
-  dependencies:
-    "@sentry/core" "8.51.0"
-
-"@sentry-internal/replay-canvas@8.51.0":
-  version "8.51.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.51.0.tgz#c896448d456290f8f4eb99df924d1bcc07908947"
-  integrity sha512-ERXIbwdULkdtIQnfkMLRVfpoGV2rClwySGRlTPepFKeLxlcXo9o09cPu+qbukiDnGK0cgEgRnrV961hMg21Bmw==
-  dependencies:
-    "@sentry-internal/replay" "8.51.0"
-    "@sentry/core" "8.51.0"
-
-"@sentry-internal/replay@8.51.0":
-  version "8.51.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.51.0.tgz#c121518ef493afcf38c900d37e12af68787351d5"
-  integrity sha512-lkm7id3a2n3yMZeF5socCVQUeEeShNOGr7Wtsmb5RORacEnld0z+NfbMTilo1mDwiWBzI5OYBjm62eglm1HFsQ==
-  dependencies:
-    "@sentry-internal/browser-utils" "8.51.0"
-    "@sentry/core" "8.51.0"
-
-"@sentry/browser@^8.51.0":
-  version "8.51.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.51.0.tgz#1d208785a432f4a4aee616da459e118994c8661f"
-  integrity sha512-1kbbyVfBBAx5Xyynp+lC5lLnAHo0qJ2r4mtmdT6koPjesvoOocEK0QQnouQBmdUbm3L0L/bPI1SgXjbeJyhzHQ==
-  dependencies:
-    "@sentry-internal/browser-utils" "8.51.0"
-    "@sentry-internal/feedback" "8.51.0"
-    "@sentry-internal/replay" "8.51.0"
-    "@sentry-internal/replay-canvas" "8.51.0"
-    "@sentry/core" "8.51.0"
-
-"@sentry/core@8.51.0":
-  version "8.51.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.51.0.tgz#d0c73dfe3489788911b7ce784d3ef8458344482c"
-  integrity sha512-Go0KxCYLw+OBIlLSv5YsYX+x9NW43fNVcyB6rhkSp2Q5Zme3tAE6KtZFvyu4SO7G/903wisW5Q6qV6UuK/ee4A==
+"@sentry-internal/browser-utils@10.25.0":
+  version "10.25.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-10.25.0.tgz#3ef1c2e6044fdf80dba75a9ce18c8133184e57da"
+  integrity sha512-wzg1ITZxrRtQouHPCgpt3tl1GiNAWFVy2RYK2KstFEhpYBAOUn9BAdP7KU9UyHBFKqbAvV4oGtAT8H2/Y4+leA==
+  dependencies:
+    "@sentry/core" "10.25.0"
+
+"@sentry-internal/feedback@10.25.0":
+  version "10.25.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-10.25.0.tgz#9a335f11bada42bde307e3fa58b0aaf764aea40e"
+  integrity sha512-qlbT4tOd+WRyKpLdsbi26rkynGBoVabnY8/9rFnTxZ0WIUG5EFhJFqEeRLMyv+uk0uRFF3H0I9+u+qP/BKxIcQ==
+  dependencies:
+    "@sentry/core" "10.25.0"
+
+"@sentry-internal/replay-canvas@10.25.0":
+  version "10.25.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-10.25.0.tgz#cd3a5f953b9b3cbc1fc3fbdfb6ac0bdbfa1f7cc3"
+  integrity sha512-zuj5jVNswZ/aA1nPPbU+VIFkQG0695lbyIfS1Skq+5o2FdRIS3MGnBXw1abI9h4pft8GLQWcKiBxISM7UpSz6w==
+  dependencies:
+    "@sentry-internal/replay" "10.25.0"
+    "@sentry/core" "10.25.0"
+
+"@sentry-internal/replay@10.25.0":
+  version "10.25.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-10.25.0.tgz#5aa936c551bcac5ce0825550ec382e83e9774142"
+  integrity sha512-V/kKQn9T46HBTiP0bIThmpVr94K4vXwYM3/EHVpGSq4P9RynX06cgps8GLHq94+A0kX/DbK9igEMZmIuzS1q3A==
+  dependencies:
+    "@sentry-internal/browser-utils" "10.25.0"
+    "@sentry/core" "10.25.0"
+
+"@sentry/browser@^10.25.0":
+  version "10.25.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-10.25.0.tgz#d97fffc53f955ed75369f781bf458d0a47d286ac"
+  integrity sha512-UgSVT3RTM3vsK914TPuHVJQsjq5ooXVmjMtsWP3Ep+6f7N+1UVX4ZXsyyj5lDOcWdc79FgproD+MrEf9Cj6uBg==
+  dependencies:
+    "@sentry-internal/browser-utils" "10.25.0"
+    "@sentry-internal/feedback" "10.25.0"
+    "@sentry-internal/replay" "10.25.0"
+    "@sentry-internal/replay-canvas" "10.25.0"
+    "@sentry/core" "10.25.0"
+
+"@sentry/core@10.25.0":
+  version "10.25.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-10.25.0.tgz#99e5253a1a5e52f7e8972c89dcf3e710700e4059"
+  integrity sha512-mGi4BYIPwZjWdOXHrPoXz1AW4/cQbFoiuW/m+OOATmtSoGTDnWYwP+qZU7VLlL+v8ZEzxfPi2C1NPfJtPj7QWA==
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"