Merge pull request #765 from City-of-Helsinki/UHF-8081-add-sentry-to-…

…react-apps

UHF-8081: Add sentry to react apps

hdbt.theme

@@ -1632,11 +1632,6 @@ function hdbt_preprocess_paragraph__job_search(array &$variables) {
     }
   }
 
-  $config = \Drupal::config('elastic_proxy.settings');
-  if ($config->get('elastic_proxy_url')) {
-    $variables['#attached']['drupalSettings']['helfi_rekry_job_search']['elastic_proxy_url'] = $config->get('elastic_proxy_url');
-  }
-
   $variables['#attached']['library'][] = 'hdbt/job-search';
 }
 

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.1",
+    "@sentry/react": "^7.66.0",
     "@sideway/address": "^5.0.0",
     "@sideway/formula": "^3.0.0",
     "@sideway/pinpoint": "^2.0.0",

src/js/react/apps/district-and-project-search/containers/ResultsContainer.tsx

@@ -1,9 +1,11 @@
-import { LoadingSpinner } from 'hds-react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import useSWR from 'swr';
 import { SyntheticEvent, createRef } from 'react';
 
 import Pagination from '@/react/common/Pagination';
+import useScrollToResults from '@/react/common/hooks/useScrollToResults';
+import LoadingOverlay from '@/react/common/LoadingOverlay';
+import ResultsError from '@/react/common/ResultsError';
 import ResultCard from '../components/results/ResultCard';
 import ResultsSort from '../components/results/ResultsSort';
 import { configurationsAtom, pageAtom, setPageAtom, urlAtom } from '../store';
@@ -12,7 +14,6 @@ import Global from '../enum/Global';
 import Settings from '../enum/Settings';
 import type URLParams from '../types/URLParams';
 import Result from '../types/Result';
-import useScrollToResults from '@/react/common/hooks/useScrollToResults';
 
 const ResultsContainer = (): JSX.Element => {
   const { size } = Global;
@@ -27,8 +28,8 @@ const ResultsContainer = (): JSX.Element => {
   useScrollToResults(scrollTarget, choices);
 
   const fetcher = () => {
-    const proxyUrl = drupalSettings?.helfi_kymp_district_project_search?.elastic_proxy_url;
-    const url: string | undefined = proxyUrl || process.env.REACT_APP_ELASTIC_URL;
+    const proxyUrl = drupalSettings?.helfi_react_search?.elastic_proxy_url;
+    const url: string | undefined = proxyUrl;
 
     return fetch(`${url}/${Settings.INDEX}/_search`, {
       method: 'POST',
@@ -43,9 +44,22 @@ const ResultsContainer = (): JSX.Element => {
     revalidateOnFocus: false,
   });
 
-
   if (!data && !error) {
-    return <LoadingSpinner loadingText="" loadingFinishedText="" />;
+    return (
+      <div className='hdbt__loading-wrapper'>
+        <LoadingOverlay />
+      </div>
+    );
+  }
+
+  if (error || initializationError) {
+    return (
+      <ResultsError
+        error={error || initializationError}
+        className='district-project-search__results'
+        ref={scrollTarget}
+      />
+    );
   }
 
   if (!data?.hits?.hits.length) {
@@ -64,15 +78,6 @@ const ResultsContainer = (): JSX.Element => {
   const pages = Math.floor(total / size);
   const addLastPage = total > size && total % size;
 
-  if (error || initializationError) {
-    console.warn(`Error loading data. ${  error || initializationError}`);
-    return (
-      <div className='district-project-search__results' ref={scrollTarget}>
-        {Drupal.t('The website encountered an unexpected error. Please try again later.')}
-      </div>
-    );
-  }
-
   const updatePage = (e: SyntheticEvent<HTMLButtonElement>, index: number) => {
     e.preventDefault();
     setPage(index.toString());

src/js/react/apps/district-and-project-search/containers/SearchContainer.tsx

@@ -1,14 +1,17 @@
-
-import { LoadingSpinner } from 'hds-react';
 import { Suspense } from 'react';
 
+import LoadingOverlay from '@/react/common/LoadingOverlay';
 import FormContainer from './FormContainer';
 import ResultsContainer from './ResultsContainer';
 
 const SearchContainer = ():JSX.Element => (
   <>
     {/* For async atoms that need to load option values from elastic */}
-    <Suspense fallback={<LoadingSpinner loadingText="" loadingFinishedText="" />}>
+    <Suspense fallback={
+      <div className='hdbt__loading-wrapper'>
+        <LoadingOverlay />
+      </div>
+    }>
       <FormContainer />
       <ResultsContainer />
     </Suspense>

src/js/react/apps/district-and-project-search/index.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import initSentry from '@/react/common/helpers/Sentry';
 import SearchContainer from './containers/SearchContainer';
 
+initSentry();
+
 const rootSelector: string = 'helfi-kymp-district-project-search';
 const rootElement: HTMLElement | null = document.getElementById(rootSelector);
 

src/js/react/apps/district-and-project-search/store.tsx

@@ -75,8 +75,8 @@ export const setPageAtom = atom(null, (get, set, page: string) => {
 export const pageAtom = atom((get) => Number(get(urlAtom)?.page) || 1);
 
 export const configurationsAtom = atom(async(): Promise<configurations> => {
-  const proxyUrl = drupalSettings?.helfi_kymp_district_project_search.elastic_proxy_url;
-  const url: string | undefined = proxyUrl || process.env.REACT_APP_ELASTIC_URL;
+  const proxyUrl = drupalSettings?.helfi_react_search.elastic_proxy_url;
+  const url: string | undefined = proxyUrl;
 
   const body = JSON.stringify(AGGREGATIONS);
 
@@ -96,15 +96,19 @@ export const configurationsAtom = atom(async(): Promise<configurations> => {
         error: new Error(
           'Initialization failed.'
         ),
-        aggs:{}
+        aggs: {}
       };
     }
 
     return {
       error: null,
       aggs: aggregations
     };
-  });
+  })
+  .catch(error => ({
+    error,
+    aggs: {}
+  }));
 });
 
 export const titleAtom = atom('');

src/js/react/apps/job-search/components/results/ResultsList.tsx

@@ -1,21 +1,21 @@
-import Job from '../../types/Job';
 import Result from '@/types/Result';
+import Job from '../../types/Job';
 import ResultCard from './ResultCard';
 
 type ResultsListProps = {
   hits: Result<Job>[]
 };
 
 const ResultsList = ({ hits }: ResultsListProps) => (
-    <>
-      {hits.map(hit => (
-        <ResultCard
-          key={hit._id}
-          innerHits={hit?.inner_hits.translations.hits.hits || null}
-          job={hit._source}
-        />
-      ))}
-    </>
-  ); 
+  <>
+    {hits.map(hit => (
+      <ResultCard
+        key={hit._id}
+        innerHits={hit?.inner_hits.translations.hits.hits || null}
+        job={hit._source}
+      />
+    ))}
+  </>
+);
 
 export default ResultsList;

src/js/react/apps/job-search/containers/FormContainer.tsx

@@ -2,9 +2,9 @@ import { Button, Checkbox, Select, TextInput } from 'hds-react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import React, { useEffect } from 'react';
 
+import bucketToMap from '@/react/common/helpers/Aggregations';
 import CustomIds from '../enum/CustomTermIds';
 import SearchComponents from '../enum/SearchComponents';
-import bucketToMap from '@/react/common/helpers/Aggregations';
 import { getInitialLanguage } from '../helpers/Language';
 import transformDropdownsValues from '../helpers/Params';
 import {

src/js/react/apps/job-search/containers/PromotedResultsContainer.tsx

@@ -1,19 +1,20 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { SyntheticEvent, createRef } from 'react';
+
+import Pagination from '@/react/common/Pagination';
+import ResultWrapper from '@/react/common/ResultWrapper';
+import useScrollToResults from '@/react/common/hooks/useScrollToResults';
+import ResultsError from '@/react/common/ResultsError';
 import Global from '../enum/Global';
 import URLParams from '../types/URLParams';
 import { configurationsAtom, pageAtom, setPageAtom, urlAtom } from '../store';
 import usePromotedQuery from '../hooks/usePromotedQuery';
 import useIndexQuery from '../hooks/useIndexQuery';
 import NoResults from '../components/results/NoResults';
-import ResultsError from '../components/results/ResultsError';
 import IndexFields from '../enum/IndexFields';
 import ResultsSort from '../components/results/ResultsSort';
 import ResultsCount from '../components/results/ResultsCount';
 import ResultsList from '../components/results/ResultsList';
-import Pagination from '@/react/common/Pagination';
-import ResultWrapper from '@/react/common/ResultWrapper';
-import useScrollToResults from '@/react/common/hooks/useScrollToResults';
 
 const PromotedResultsContainer = () => {
   const { size } = Global;
@@ -44,10 +45,11 @@ const PromotedResultsContainer = () => {
       return;
     }
 
-    if (error || initializationError|| data.error) {
+    if (error || initializationError || data.error) {
       return (
         <ResultsError
-          error={error||initializationError||data.error}
+          error={error || initializationError || data.error}
+          className='job-search__results'
           ref={scrollTarget}
         />
       );

src/js/react/apps/job-search/containers/SearchContainer.tsx

@@ -5,13 +5,13 @@ import FormContainer from './FormContainer';
 import ResultsContainer from './ResultsContainer';
 
 const SearchContainer = () => (
-    <div className='recruitment-search'>
-      {/* For async atoms that need to load option values from elastic */}
-      <Suspense fallback={<LoadingSpinner loadingText="" loadingFinishedText="" />}>
-        <FormContainer />
-        {!drupalSettings?.helfi_rekry_job_search?.results_page_path && <ResultsContainer />}
-      </Suspense>
-    </div>
-  );
+  <div className='recruitment-search'>
+    {/* For async atoms that need to load option values from elastic */}
+    <Suspense fallback={<LoadingSpinner loadingText="" loadingFinishedText="" />}>
+      <FormContainer />
+      {!drupalSettings?.helfi_rekry_job_search?.results_page_path && <ResultsContainer />}
+    </Suspense>
+  </div>
+);
 
 export default SearchContainer;

src/js/react/apps/job-search/containers/SimpleResultsContainer.tsx

@@ -1,19 +1,20 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { SyntheticEvent, createRef } from 'react';
+
+import Pagination from '@/react/common/Pagination';
+import ResultWrapper from '@/react/common/ResultWrapper';
+import useScrollToResults from '@/react/common/hooks/useScrollToResults';
+import ResultsError from '@/react/common/ResultsError';
 import URLParams from '../types/URLParams';
 import { urlAtom , configurationsAtom, pageAtom, setPageAtom } from '../store';
 import useQueryString from '../hooks/useQueryString';
 import useIndexQuery from '../hooks/useIndexQuery';
 import ResultsCount from '../components/results/ResultsCount';
 import NoResults from '../components/results/NoResults';
-import ResultsError from '../components/results/ResultsError';
 import ResultsSort from '../components/results/ResultsSort';
-import Pagination from '@/react/common/Pagination';
 import ResultsList from '../components/results/ResultsList';
 import Global from '../enum/Global';
 import IndexFields from '../enum/IndexFields';
-import ResultWrapper from '@/react/common/ResultWrapper';
-import useScrollToResults from '@/react/common/hooks/useScrollToResults';
 
 const SimpleResultsContainer = () => {
   const { size } = Global;
@@ -38,12 +39,18 @@ const SimpleResultsContainer = () => {
       return;
     }
 
-    if (!data?.hits?.hits.length) {
-      return <NoResults ref={scrollTarget} />;
+    if (error || initializationError) {
+      return (
+        <ResultsError
+          error={error || initializationError}
+          className='job-search__results'
+          ref={scrollTarget}
+        />
+      );
     }
 
-    if (error || initializationError) {
-      return <ResultsError error={error||initializationError} ref={scrollTarget}/>;
+    if (!data?.hits?.hits.length) {
+      return <NoResults ref={scrollTarget} />;
     }
 
     const results = data.hits.hits;

src/js/react/apps/job-search/hooks/useIndexQuery.tsx

@@ -12,8 +12,8 @@ type UseIndexQueryProps = {
 
 const useIndexQuery = ({ query, multi, ...rest }: UseIndexQueryProps) => {
   const fetcher = () => {
-    const proxyUrl = drupalSettings?.helfi_rekry_job_search?.elastic_proxy_url;
-    const url: string|undefined = proxyUrl || process.env.REACT_APP_ELASTIC_URL;
+    const proxyUrl = drupalSettings?.helfi_react_search?.elastic_proxy_url;
+    const url: string|undefined = proxyUrl;
     const endpoint = multi ? '_msearch' : '_search';
     const contentType = `application/${multi ? 'x-ndjson' : 'json'}`;
 

src/js/react/apps/job-search/index.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import initSentry from '@/react/common/helpers/Sentry';
 import SearchContainer from './containers/SearchContainer';
 
+initSentry();
+
 const rootSelector: string = 'helfi-rekry-job-search';
 const rootElement: HTMLElement | null = document.getElementById(rootSelector);