From 53d1114c6373385dc25acf5699519a39a85f9ebd Mon Sep 17 00:00:00 2001
From: Calvin Allen <calvinallen@newrelic.com>
Date: Thu, 20 Mar 2025 14:10:49 -0400
Subject: [PATCH] NR-381373

- Trying to add an actual exception to the front-end
- Add sourcemap upload step to docker build, but only when API_KEY is present, so it won't do it on a normal build, only a publish
---
 .github/workflows/publish_image.yml |  1 +
 Dockerfile                          | 12 ++++++++++
 client/src/App.tsx                  |  4 ++--
 client/src/pages/Error.tsx          | 20 ----------------
 client/src/pages/ErrorPage.tsx      | 37 +++++++++++++++++++++++++++++
 5 files changed, 52 insertions(+), 22 deletions(-)
 delete mode 100644 client/src/pages/Error.tsx
 create mode 100644 client/src/pages/ErrorPage.tsx

diff --git a/.github/workflows/publish_image.yml b/.github/workflows/publish_image.yml
index 1700792..97367cc 100644
--- a/.github/workflows/publish_image.yml
+++ b/.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
diff --git a/Dockerfile b/Dockerfile
index 1faa600..3ef2124 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -30,6 +30,7 @@ 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
@@ -37,6 +38,7 @@ 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 .
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 087c171..21c69a9 100644
--- a/client/src/App.tsx
+++ b/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">
diff --git a/client/src/pages/Error.tsx b/client/src/pages/Error.tsx
deleted file mode 100644
index 26509ed..0000000
--- a/client/src/pages/Error.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import pets from '/src/assets/images/pets.png';
-
-export const Error = () => {
-
-
-    const numbers = [0,1,2];
-    const theNumber = numbers[10];
-
-  return (
-    <>
-      <div className="row">
-        <div className="col-md-12">
-          <img className="img-responsive" src={pets} />
-        </div>
-      </div>
-      <h2>Something happened...</h2>
-        <h3>{theNumber}</h3>
-    </>
-  );
-};
diff --git a/client/src/pages/ErrorPage.tsx b/client/src/pages/ErrorPage.tsx
new file mode 100644
index 0000000..c1deb09
--- /dev/null
+++ b/client/src/pages/ErrorPage.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>
+        </>
+    );
+};