[DRAFT] feat: add Vite Sentry plugin HP-2674

.env

@@ -10,6 +10,7 @@ REACT_APP_OIDC_SCOPE="openid profile https://api.hel.fi/auth/helsinkiprofile"
 REACT_APP_OIDC_RESPONSE_TYPE="code"
 REACT_APP_SENTRY_DSN=
 REACT_APP_ENVIRONMENT=
+REACT_APP_SENTRY_AUTH_TOKEN=
 REACT_APP_MATOMO_SRC_URL=
 REACT_APP_MATOMO_URL_BASE="<Matomo url base>"
 REACT_APP_MATOMO_SITE_ID="<Matomo site id>"
@@ -19,4 +20,3 @@ TRANSLATION_LANGUAGES=en,fi,sv
 TRANSLATIONS_SHEET_ID=1Ky-E1nJ_pRUYMoORobahOJ_IWucfL7kirBBLiA6r8zs
 TRANSLATION_PROJECT_NAME=open-city-profile
 GENERATE_SOURCEMAP=false
-

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 && NODE_OPTIONS=--max-old-space-size=2048 vite build",
     "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",

src/App.tsx

@@ -1,37 +1,52 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router';
 import { ApolloProvider } from '@apollo/client';
 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 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 WithAuthCheck from './profile/components/withAuthCheck/WithAuthCheck';
-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';
 
 countries.registerLocale(fi);
 countries.registerLocale(en);
 countries.registerLocale(sv);
 
+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'));
+
 function App(): React.ReactElement {
   useHistoryListener();
 
@@ -45,51 +60,61 @@ function App(): React.ReactElement {
     },
   });
 
+  const { t } = useTranslation();
+
   return (
     <ApolloProvider client={graphqlClient}>
       <ToastProvider>
         <MatomoProvider value={matomoTracker}>
           <ProfileProvider>
-            <Switch>
-              <Route path="/callback" component={OidcCallback} />
-              <Route path="/gdpr-callback">
-                <GdprAuthorizationCodeManagerCallback />
-              </Route>
-              <Route
-                path="/password-change-callback"
-                component={PasswordChangeCallback}
-              ></Route>
-              <Route path="/login">
-                <Login />
-              </Route>
-              <Route path={['/', '/connected-services']} exact>
-                <WithAuthCheck AuthenticatedComponent={Profile}></WithAuthCheck>
-              </Route>
-              <Route path="/about" exact>
-                <AboutPage />
-              </Route>
-              <Route path="/guide" exact>
-                <UserGuide />
-              </Route>
-              <Route path="/accessibility" exact>
-                <AccessibilityStatement />
-              </Route>
-              <Route path="/profile-deleted" exact>
-                <ProfileDeleted />
-              </Route>
-              <Route path={config.errorPagePath} exact>
-                <ErrorPage />
-              </Route>
-              <Route path={config.autoSSOLoginPath} exact>
-                <LoginSSO />
-              </Route>
-              <Route path={config.cookiePagePath} exact>
-                <CookieConsentPage />
-              </Route>
-              <Route path="*">
-                <PageNotFound />
-              </Route>
-            </Switch>
+            <Suspense
+              fallback={
+                <Loading isLoading loadingText={t('profile.loading')} />
+              }
+            >
+              <Switch>
+                <Route path="/callback" component={OidcCallback} />
+                <Route path="/gdpr-callback">
+                  <GdprAuthorizationCodeManagerCallback />
+                </Route>
+                <Route
+                  path="/password-change-callback"
+                  component={PasswordChangeCallback}
+                ></Route>
+                <Route path="/login">
+                  <Login />
+                </Route>
+                <Route path={['/', '/connected-services']} exact>
+                  <WithAuthCheck
+                    AuthenticatedComponent={Profile}
+                  ></WithAuthCheck>
+                </Route>
+                <Route path="/about" exact>
+                  <AboutPage />
+                </Route>
+                <Route path="/guide" exact>
+                  <UserGuide />
+                </Route>
+                <Route path="/accessibility" exact>
+                  <AccessibilityStatement />
+                </Route>
+                <Route path="/profile-deleted" exact>
+                  <ProfileDeleted />
+                </Route>
+                <Route path={config.errorPagePath} exact>
+                  <ErrorPage />
+                </Route>
+                <Route path={config.autoSSOLoginPath} exact>
+                  <LoginSSO />
+                </Route>
+                <Route path={config.cookiePagePath} exact>
+                  <CookieConsentPage />
+                </Route>
+                <Route path="*">
+                  <PageNotFound />
+                </Route>
+              </Switch>
+            </Suspense>
           </ProfileProvider>
         </MatomoProvider>
       </ToastProvider>

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,

vite.config.mts

@@ -2,15 +2,50 @@ import { configDefaults, UserConfig, defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react-swc';
 import eslint from 'vite-plugin-eslint';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import dotenv from 'dotenv';
+
+const USE_TEST_ENV = process.env.NODE_ENV === 'test';
+const defaultNodeEnv = USE_TEST_ENV ? 'test' : 'development';
+
+/* @ts-ignore */
+import.meta.env = {};
+
+import.meta.env.NODE_ENV = process.env.NODE_ENV || defaultNodeEnv;
+
+dotenv.config({
+  processEnv: import.meta.env,
+  ...(USE_TEST_ENV
+    ? { path: ['.env', '.env.test'] }
+    : { path: ['.env', `.env.${import.meta.env.NODE_ENV}`, '.env.local'] }),
+  override: true,
+});
 
 export default defineConfig({
   base: '/',
   envPrefix: 'REACT_APP_',
-  plugins: [react(), nodePolyfills(), eslint()] as UserConfig['plugins'],
   build: {
     outDir: './build',
     emptyOutDir: true,
+    sourcemap: true,
   },
+  plugins: [
+    react(),
+    nodePolyfills(),
+    eslint(),
+    sentryVitePlugin({
+      disable: !import.meta.env.REACT_APP_SENTRY_DSN && !import.meta.env.REACT_APP_ENVIRONMENT,
+      org: 'city-of-helsinki',
+      project: 'helsinki-profile-ui',
+      url: 'https://sentry.test.hel.ninja',
+      authToken: import.meta.env.REACT_APP_SENTRY_AUTH_TOKEN,
+      telemetry: false,
+      sourcemaps: {
+        assets: ['./build/assets/*.js', './build/assets/*.js.map'],
+        filesToDeleteAfterUpload: './build/assets/*.js.map',
+      },
+    }),
+  ] as UserConfig['plugins'],
   server: {
     host: true,
     port: 3000,
@@ -33,6 +68,6 @@ export default defineConfig({
       include: ['src/**/*'],
       provider: 'istanbul',
     },
-    exclude: [...configDefaults.exclude, 'e2e/**']
+    exclude: [...configDefaults.exclude, 'e2e/**'],
   },
 });