diff --git a/.env.example b/.env.example
index 7eeb02aa..e7e8553b 100644
--- a/.env.example
+++ b/.env.example
@@ -13,13 +13,17 @@ API_CACHE=false # Optional, controls whether or not api responses are cached
DC_URL='' # OR https://qa-digitalcollections.nypl.org OR https://digitalcollections.nypl.org
# Feedback form
+CLIENT_ID= # Available in parameter store
+CLIENT_SECRET= # Available in parameter store
+CLIENT_EMAIL= # Available in parameter store
+
GOOGLE_SHEETS_PRIVATE_KEY=[YOUR KEY] # Available in parameter store
GOOGLE_SHEETS_CLIENT_EMAIL=[YOUR ACCOUNT EMAIL] # Available in parameter store
SPREADSHEET_ID=[YOU CAN GET THIS ON URL OF YOUR SHEETS] # Available in parameter store
# New Relic
NEW_RELIC_LICENSE_KEY=[NEWRELIC LICENSE KEY] # Available in parameter store
+NEW_RELIC_APP_NAME="Facelift QA"
# Adobe Analytics
ADOBE_EMBED_URL=https://assets.adobedtm.com/1a9376472d37/8519dfce636d/launch-bf8436264b01-development.min.js
-APP_ENV=development
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ce57420..cb3e8076 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## Unreleased
+### Updated
+
+- Updated cards to use Next Image (DR-3056)
+
+## [0.1.16] 2024-10-31
+
+### Updated
+
+- Updated links in QA to point internally for reverse proxy (DR-3237)
+- Updated how env vars are read for New Relic Browser implementation (DR-3235)
+- Refactored collections/items grid into one `CardsGrid` component (DR-3193)
+- Updated 500 and 404 error page designs, adding link to open feedback box (DR-3203)
+
## [0.1.15] 2024-10-10
+
### Updated
- Refactored collection/item lanes into one `Lane` component (DR-3191)
diff --git a/Dockerfile b/Dockerfile
index bc00a372..309867a3 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -20,9 +20,15 @@ COPY . .
ENV APP_ENV=${APP_ENV}
ENV NEW_RELIC_LICENSE_KEY=${NEW_RELIC_LICENSE_KEY}
+ENV NEW_RELIC_APP_NAME="Facelift ${APP_ENV}"
ENV API_URL=${API_URL}
ENV AUTH_TOKEN=${AUTH_TOKEN}
+# Create a `.env.prod` file with the environment variables
+# This is a workaround to use environment variables in the `newrelic.js` file
+RUN echo "NEW_RELIC_LICENSE_KEY=${NEW_RELIC_LICENSE_KEY}" >> /etc/.env.prod
+RUN echo "NEW_RELIC_APP_NAME=${NEW_RELIC_APP_NAME}" >> /etc/.env.prod
+
# Set environment variables. NODE_ENV is set early because we
# want to use it when running `npm install` and `npm run build`.
ENV PATH /app/node_modules/.bin:$PATH
@@ -35,4 +41,4 @@ RUN npm run build
EXPOSE 3000
# CMD is the default command when running the docker container.
-CMD [ "npm", "start" ]
\ No newline at end of file
+CMD [ "npm", "run", "start:newrelic" ]
\ No newline at end of file
diff --git a/ENVIRONMENTVARS.md b/ENVIRONMENTVARS.md
index 5c151eb7..13eb8e77 100644
--- a/ENVIRONMENTVARS.md
+++ b/ENVIRONMENTVARS.md
@@ -30,3 +30,15 @@ These environment variables control how certain elements on the page render and
| `GOOGLE_SHEETS_PRIVATE_KEY` | string | "" | |
| `SPREADSHEET_ID` | string | "" | |
| `NEW_RELIC_LICENSE_KEY` | string | "true" | |
+
+## New Relic Variables
+
+The following variables are needed in the global env var scope in order for New
+Relic to pick up the values, specifically in the `newrelic.js` file.
+
+These env vars are not picked up by default in Next.js' `.env.local` file. In order for this to work, the `dotenv` package is used to declare these env vars when running either `npm run dev:newrelic` or `npm run start:newrelic`.
+
+| Variable | Type | Value Example | Description |
+| ----------------------- | ------ | -------------- | -------------------------------------------------- |
+| `NEW_RELIC_LICENSE_KEY` | string | "true" | Private license key. Available in parameter store. |
+| `NEW_RELIC_APP_NAME` | string | "Facelift QA" | |
diff --git a/README.md b/README.md
index c26b380e..3bf0849b 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,10 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd
The `app/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+### New Relic Start
+
+If New Relic needs to run locally, run `npm run dev:newrelic`. You must have `NEW_NEW_RELIC_LICENSE_KEY` and `NEW_RELIC_APP_NAME` declared in `.env.local` in order for this to run successfully.
+
## Environment Variables
A quick note on environment variables
diff --git a/__tests__/pages/errorpage.test.tsx b/__tests__/pages/errorpage.test.tsx
new file mode 100644
index 00000000..0af7606f
--- /dev/null
+++ b/__tests__/pages/errorpage.test.tsx
@@ -0,0 +1,47 @@
+import PageLayout from "@/src/components/pageLayout/pageLayout";
+import ErrorPage from "@/src/components/pages/errorPage/errorPage";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+jest.mock("next/navigation", () => ({
+ useRouter: jest.fn(),
+}));
+
+describe("Error Page", () => {
+ it("renders an error message", () => {
+ (useRouter as jest.Mock).mockImplementation(() => ({
+ pathname: "/test-error",
+ }));
+
+ render(
+
+
+
+ );
+
+ const heading = screen.getByRole("heading", {
+ name: /Something went wrong on our end./i,
+ });
+ expect(heading).toBeInTheDocument();
+ });
+
+ it("has a link that can open the feedback box", async () => {
+ (useRouter as jest.Mock).mockImplementation(() => ({
+ pathname: "/test-error",
+ }));
+
+ render(
+
+
+
+ );
+
+ const button = screen.getByText(/contact us/);
+ fireEvent.click(button);
+
+ expect(
+ screen.getByText(/What is your feedback about?/)
+ ).toBeInTheDocument();
+ });
+});
diff --git a/__tests__/pages/notfoundpage.test.tsx b/__tests__/pages/notfoundpage.test.tsx
index 4ebc7191..9b3c1539 100644
--- a/__tests__/pages/notfoundpage.test.tsx
+++ b/__tests__/pages/notfoundpage.test.tsx
@@ -14,7 +14,9 @@ describe("Not Found Page", () => {
}));
render();
- const heading = screen.getByRole("heading", { name: /404/i });
+ const heading = screen.getByRole("heading", {
+ name: /We couldn't find that page./i,
+ });
expect(heading).toBeInTheDocument();
});
});
diff --git a/app/error.tsx b/app/error.tsx
index 2b16b974..12fe3fdc 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -1,9 +1,9 @@
"use client";
-import { Box, Heading } from "@nypl/design-system-react-components";
-import Link from "next/link";
-import PageLayout from "./src/components/pageLayout/pageLayout";
import { useEffect } from "react";
+import PageLayout from "./src/components/pageLayout/pageLayout";
+import ErrorPage from "./src/components/pages/errorPage/errorPage";
+
export default function Error({
error,
}: {
@@ -11,26 +11,16 @@ export default function Error({
}) {
useEffect(() => {
console.error(error);
+
+ // Send error to New Relic
+ if ((window as any).newrelic) {
+ (window as any).newrelic.noticeError(error);
+ }
}, [error]);
+
return (
-
- Error
-