Skip to content

Commit

Permalink
feat: add Vite Sentry plugin HP-2674
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikkojamG
mikkojamG committed Dec 19, 2024
1 parent aa83876 commit 81c730b
Show file tree
Hide file tree
Showing 6 changed files with 500 additions and 64 deletions.
1 change: 0 additions & 1 deletion .env
View file
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
View file
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 && 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",
Expand Down
135 changes: 79 additions & 56 deletions src/App.tsx
View file
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
View file
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
39 changes: 37 additions & 2 deletions vite.config.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -33,6 +68,6 @@ export default defineConfig({
include: ['src/**/*'],
provider: 'istanbul',
},
exclude: [...configDefaults.exclude, 'e2e/**']
exclude: [...configDefaults.exclude, 'e2e/**'],
},
});
Loading

0 comments on commit 81c730b

Please sign in to comment.