From 9d3651e727a9ffaa21267eb9eddb4f3e6b990979 Mon Sep 17 00:00:00 2001 From: mikkojamG Date: Fri, 11 Oct 2024 14:01:10 +0300 Subject: [PATCH] feat: add Vite Sentry plugin HP-2674 --- .env | 1 - package.json | 3 +- src/App.tsx | 135 +++--- src/index.tsx | 2 +- .../__snapshots__/UserGuide.test.tsx.snap | 2 +- vite.config.mts | 44 +- yarn.lock | 384 +++++++++++++++++- 7 files changed, 506 insertions(+), 65 deletions(-) diff --git a/.env b/.env index 89d71a6fc..6473cf716 100644 --- a/.env +++ b/.env @@ -19,4 +19,3 @@ TRANSLATION_LANGUAGES=en,fi,sv TRANSLATIONS_SHEET_ID=1Ky-E1nJ_pRUYMoORobahOJ_IWucfL7kirBBLiA6r8zs TRANSLATION_PROJECT_NAME=open-city-profile GENERATE_SOURCEMAP=false - diff --git a/package.json b/package.json index ffeb1bb51..8d83fe3da 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@apollo/client": "^3.9.6", "@react-aria/visually-hidden": "^3.2.1", "@sentry/react": "^7.103.0", + "@sentry/vite-plugin": "^2.22.5", "@sinonjs/fake-timers": "^8.1.0", "@testing-library/dom": "^9.3.4", "@testing-library/jest-dom": "^6.4.2", @@ -80,7 +81,7 @@ }, "scripts": { "start": "yarn clear-babel-cache && yarn update-runtime-env && vite", - "build": "yarn typecheck && vite build", + "build": "yarn typecheck && if test $NODE_MAX_MEMORY_MIB ; then NODE_OPTIONS=--max-old-space-size=$NODE_MAX_MEMORY_MIB vite build ; else vite build ; fi", "preview": "yarn clear-babel-cache && yarn update-runtime-env && vite preview", "test": "cross-env NODE_ENV=test yarn update-runtime-env && vitest", "test:e2e": "yarn playwright test", diff --git a/src/App.tsx b/src/App.tsx index f8cbe7b67..e7da89281 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { lazy, Suspense } from 'react'; import { Switch, Route } from 'react-router-dom'; import countries from 'i18n-iso-countries'; import fi from 'i18n-iso-countries/langs/fi.json'; import en from 'i18n-iso-countries/langs/en.json'; import sv from 'i18n-iso-countries/langs/sv.json'; +import { useTranslation } from 'react-i18next'; import { LoginProvider, LoginProviderProps, @@ -13,25 +14,39 @@ import { ApolloProvider } from '@apollo/client'; import { UserManagerSettings } from 'oidc-client-ts'; import graphqlClient from './graphql/client'; -import Login from './auth/components/login/Login'; -import OidcCallback from './auth/components/oidcCallback/OidcCallback'; -import Profile from './profile/components/profile/Profile'; import { Provider as ProfileProvider } from './profile/context/ProfileContext'; -import ProfileDeleted from './profile/components/profileDeleted/ProfileDeleted'; -import ErrorPage from './profile/components/errorPage/ErrorPage'; -import AboutPage from './aboutPage/AboutPage'; -import UserGuide from './userGuide/UserGuide'; -import AccessibilityStatement from './accessibilityStatement/AccessibilityStatement'; import GdprAuthorizationCodeManagerCallback from './gdprApi/GdprAuthorizationCodeManagerCallback'; import ToastProvider from './toast/ToastProvider'; import config from './config'; -import PageNotFound from './common/pageNotFound/PageNotFound'; import { useHistoryListener } from './profile/hooks/useHistoryListener'; -import CookieConsentPage from './cookieConsents/CookieConsentPage'; -import LoginSSO from './auth/components/loginsso/LoginSSO'; import MatomoTracker from './common/matomo/MatomoTracker'; import { MatomoProvider } from './common/matomo/matomo-context'; -import PasswordChangeCallback from './passwordChange/PasswordChangeCallback'; +import Loading from './common/loading/Loading'; + +const OidcCallback = lazy(() => + import('./auth/components/oidcCallback/OidcCallback') +); +const PasswordChangeCallback = lazy(() => + import('./passwordChange/PasswordChangeCallback') +); +const Login = lazy(() => import('./auth/components/login/Login')); +const Profile = lazy(() => import('./profile/components/profile/Profile')); +const AboutPage = lazy(() => import('./aboutPage/AboutPage')); +const UserGuide = lazy(() => import('./userGuide/UserGuide')); +const AccessibilityStatement = lazy(() => + import('./accessibilityStatement/AccessibilityStatement') +); +const ProfileDeleted = lazy(() => + import('./profile/components/profileDeleted/ProfileDeleted') +); +const ErrorPage = lazy(() => + import('./profile/components/errorPage/ErrorPage') +); +const LoginSSO = lazy(() => import('./auth/components/loginsso/LoginSSO')); +const CookieConsentPage = lazy(() => + import('./cookieConsents/CookieConsentPage') +); +const PageNotFound = lazy(() => import('./common/pageNotFound/PageNotFound')); countries.registerLocale(fi); countries.registerLocale(en); @@ -80,55 +95,63 @@ function App(): React.ReactElement { sessionPollerSettings: { pollIntervalInMs: 300000 }, }; + const { t } = useTranslation(); + return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.tsx b/src/index.tsx index 29a033005..a88711acb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,7 +14,7 @@ declare global { } } -if (window._env_.REACT_APP_ENVIRONMENT) { +if (window._env_.REACT_APP_SENTRY_DSN && window._env_.REACT_APP_ENVIRONMENT) { Sentry.init({ dsn: window._env_.REACT_APP_SENTRY_DSN, environment: window._env_.REACT_APP_ENVIRONMENT, diff --git a/src/userGuide/__tests__/__snapshots__/UserGuide.test.tsx.snap b/src/userGuide/__tests__/__snapshots__/UserGuide.test.tsx.snap index bd4ae9157..78e7500e8 100644 --- a/src/userGuide/__tests__/__snapshots__/UserGuide.test.tsx.snap +++ b/src/userGuide/__tests__/__snapshots__/UserGuide.test.tsx.snap @@ -1987,7 +1987,7 @@ exports[`User guide > renders UserGuide without errors 1`] = ` © cityOfHelsinki - 2024 + 2025