Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Vite Sentry plugin HP-2674 #394

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .env
Original file line number Diff line number Diff line change
Expand Up @@ -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

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
135 changes: 79 additions & 56 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -80,55 +95,63 @@ function App(): React.ReactElement {
sessionPollerSettings: { pollIntervalInMs: 300000 },
};

const { t } = useTranslation();

return (
<LoginProvider {...providerProperties}>
<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>
<WithAuthentication
AuthorisedComponent={Profile}
UnauthorisedComponent={Login}
/>
</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>
<WithAuthentication
AuthorisedComponent={Profile}
UnauthorisedComponent={Login}
/>
</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>
Expand Down
2 changes: 1 addition & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1987,7 +1987,7 @@ exports[`User guide > renders UserGuide without errors 1`] = `
©
cityOfHelsinki

2024
2025
</span>
<span
class="FooterBase-module_copyrightDot__2AfS6"
Expand Down
44 changes: 42 additions & 2 deletions vite.config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,55 @@ 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({
silent: !import.meta.env.REACT_APP_SENTRY_AUTH_TOKEN,
disable:
!import.meta.env.REACT_APP_SENTRY_AUTH_TOKEN &&
!import.meta.env.REACT_APP_SENTRY_URL &&
!import.meta.env.REACT_APP_SENTRY_DSN &&
!import.meta.env.REACT_APP_ENVIRONMENT,
org: 'city-of-helsinki',
project: 'helsinki-profile-ui',
url: import.meta.env.REACT_APP_SENTRY_URL,
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,
Expand All @@ -33,6 +73,6 @@ export default defineConfig({
include: ['src/**/*'],
provider: 'istanbul',
},
exclude: [...configDefaults.exclude, 'e2e/**']
exclude: [...configDefaults.exclude, 'e2e/**'],
},
});
Loading
Loading