Merge pull request #30 from TeamCodeStream/feature/react-error

NR-381373

Author: CalvinAllen

.github/workflows/publish_image.yml

@@ -50,6 +50,7 @@ jobs:
                       FOSSA_API_KEY=${{ secrets.FOSSA_API_KEY }}
                       NEW_RELIC_METADATA_COMMIT=${{ github.sha }}
                       NEW_RELIC_METADATA_RELEASE_TAG=${{ github.ref_name }}
+                      NEW_RELIC_API_KEY=${{ secrets.NEW_RELIC_API_KEY }}
 
             - name: Generate artifact attestation
               uses: actions/attest-build-provenance@v1

Dockerfile

@@ -30,13 +30,15 @@ ARG BROWSER_TRUST_KEY
 ARG BROWSER_AGENT_ID
 ARG BROWSER_APPLICATION_ID
 ARG FOSSA_API_KEY
+ARG NEW_RELIC_API_KEY
 
 ENV BROWSER_LICENSE_KEY=$BROWSER_LICENSE_KEY
 ENV BROWSER_ACCOUNT_ID=$BROWSER_ACCOUNT_ID
 ENV BROWSER_TRUST_KEY=$BROWSER_TRUST_KEY
 ENV BROWSER_AGENT_ID=$BROWSER_AGENT_ID
 ENV BROWSER_APPLICATION_ID=$BROWSER_APPLICATION_ID
 ENV FOSSA_API_KEY=$FOSSA_API_KEY
+ENV NEW_RELIC_API_KEY=$NEW_RELIC_API_KEY
 
 RUN --mount=type=cache,target=/root/.gradle ./gradlew downloadNewRelicAgent --console=plain --info --no-daemon --no-watch-fs
 RUN --mount=type=cache,target=/root/.gradle ./gradlew build --console=plain --info --no-daemon --no-watch-fs
@@ -52,6 +54,16 @@ RUN if [ -z "$FOSSA_API_KEY" ] ; then \
         fossa analyze; \
     fi
 
+RUN if [ -z "$NEW_RELIC_API_KEY" ] ; then \
+    echo --SKIPPING SOURCE MAP UPLOAD ; \
+    else \
+      filename=$(ls /src/client/dist/assets/*.js | grep -v '.map.js' | xargs -n 1 basename) && \
+      curl -H "Api-Key: $NEW_RELIC_API_KEY" \
+           -F "sourcemap=/src/client/dist/assets/$filename.map" \
+           -F "javascriptUrl=https://petclinic-demogorgon.staging-service.nr-ops.net/react/assets/$filename" \
+           https://sourcemaps.service.newrelic.com/v2/applications/$BROWSER_APPLICATION_ID/sourcemaps ;\
+    fi
+
 FROM base AS final
 WORKDIR /app
 COPY --from=build /src/build/libs/petclinic-backend-1.0.0.jar .

client/src/App.tsx

@@ -3,7 +3,7 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { OwnerDetails } from 'src/pages/OwnerDetails';
 import { NavigationBar } from './navbar/NavigationBar';
-import { Error } from './pages/Error';
+import { ErrorPage } from './pages/ErrorPage.tsx';
 import { FindOwner } from './pages/FindOwner';
 import { Home } from './pages/Home';
 import { OwnerForm } from './pages/OwnerForm';
@@ -30,7 +30,7 @@ function App() {
         />
         <Routes>
           <Route index={true} path="/" element={<Home />} />
-          <Route path="/oups" element={<Error />} />
+          <Route path="/oups" element={<ErrorPage />} />
           <Route path="/home" element={<Home />} />
           <Route path="/vets" element={<Veterinarians />} />
           <Route path="owners">

client/src/pages/Error.tsx

@@ -0,0 +1,37 @@
+import pets from '/src/assets/images/pets.png';
+
+const mapping = new Map<number, string>([
+    [1,"Dogs"],
+    [2,"Cats"],
+    [3,"Horses"],
+    [4,"Iguanas"],
+    [5,"Goblin Sharks"]
+])
+
+export const ErrorPage = () => {
+    const renderListItem = (index: number) => {
+        const item = mapping.get(index);
+
+        if(!item){
+            throw new Error(`No mapping found for index: ${index}`);
+        }
+
+        return (
+            <li>{item}</li>
+        )
+    }
+
+    return (
+        <>
+          <div className="row">
+            <div className="col-md-12">
+              <img className="img-responsive" src={pets} />
+            </div>
+          </div>
+          <h3>We currently work with the following animal species:</h3>
+          <ol>
+              {[1,2,3,4,5,6].map(i => renderListItem(i))}
+          </ol>
+        </>
+    );
+};