replacing errors thrown with console.warn

Author: EdwinGuzman

CHANGELOG.md

@@ -20,6 +20,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the `viewport` preview options in Storybook to align with the Reservoir breakpoints.
 - Updates the Storybook font styles.
 - Updates the docs for the `Template` component.
+- Replaces the error thrown with a console.warn for the `Breadcrumbs`, `Heading`, and `Image` components.
 
 ## Prerelease
 
@@ -35,7 +36,6 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updated the `"filter"` variant of `TagSet` to remove tag button wrapper when `isDismissible` and `onClick` are false.
 - Updates `Image` to include 'fourByOne' and 'twoByThree' aspect ratio options.
 
-
 ## 3.5.4 (February 13, 2025)
 
 ### Adds

src/components/Breadcrumbs/Breadcrumbs.mdx

@@ -9,10 +9,10 @@ import Link from "../Link/Link";
 
 # Breadcrumbs
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.3`    |
-| Latest            | `3.5.3`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.0.3`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -76,8 +76,11 @@ describe("Breadcrumbs", () => {
     expect(container.querySelector(".breadcrumbs-icon")).toBeInTheDocument();
   });
 
-  it("Throws error when nothing is passed into Breadcrumb", () => {
-    expect(() => render(<Breadcrumbs breadcrumbsData={[]} />)).toThrowError(
+  it("logs a warning when nothing is passed into Breadcrumb", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Breadcrumbs breadcrumbsData={[]} />);
+
+    expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop."
     );
   });

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -155,7 +155,7 @@ export const Breadcrumbs: ChakraComponent<
     } = props;
 
     if (!breadcrumbsData || breadcrumbsData.length === 0) {
-      throw new Error(
+      console.warn(
         "NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop."
       );
     }

src/components/Breadcrumbs/breadcrumbsChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: ["Replaces the error thrown with a console.warn."],
+  },
   {
     date: "2025-01-30",
     version: "3.5.3",

src/components/Heading/Heading.mdx

@@ -12,7 +12,7 @@ import { changelogData } from "./headingChangelogData";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `3.5.3`    |
+| Latest            | `Prelease` |
 
 ## Table of Contents
 

src/components/Heading/Heading.test.tsx

@@ -95,21 +95,25 @@ describe("Heading", () => {
     );
   });
 
-  it("throws error when neither child nor text is passed", () => {
-    expect(() => render(<Heading id="h1" level="h1" />)).toThrow(
+  it("logs a warning when neither child nor text is passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Heading id="h1" level="h1" />);
+    expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Heading: No children or value was passed to the `text` prop."
     );
   });
 
-  it("throws error when heading with many children is passed", () => {
-    expect(() =>
-      render(
-        <Heading id="h1" level="h4">
-          <span>too</span>
-          <span>many</span>
-        </Heading>
-      )
-    ).toThrow("NYPL Reservoir Heading: Only pass one child into Heading.");
+  it("logs a warning when heading with many children is passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Heading id="h1" level="h4">
+        <span>too</span>
+        <span>many</span>
+      </Heading>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Heading: Only pass one child into Heading."
+    );
   });
 
   it("uses custom display size", () => {

src/components/Heading/Heading.tsx

@@ -138,14 +138,14 @@ export const Heading: ChakraComponent<
       const asHeading: any = finalLevel;
 
       if (!props.children && !text) {
-        throw new Error(
+        console.warn(
           "NYPL Reservoir Heading: No children or value was passed to the `text` prop."
         );
       }
 
       if (React.Children.count(props.children) > 1) {
         // Catching the error because React's error isn't as helpful.
-        throw new Error(
+        console.warn(
           "NYPL Reservoir Heading: Only pass one child into Heading."
         );
       }

src/components/Heading/headingChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: ["Replaces the error thrown with a console.warn."],
+  },
   {
     date: "2025-01-30",
     version: "3.5.3",

src/components/Image/Image.test.tsx

@@ -93,10 +93,10 @@ describe("Image", () => {
     expect(screen.getByText("credit")).toBeInTheDocument();
   });
 
-  it("throws error when alt text is too long", () => {
-    expect(() =>
-      render(<Image src="test.png" alt={tooManyChars} />)
-    ).toThrowError(
+  it("logs an error when alt text is too long", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Image src="test.png" alt={tooManyChars} />);
+    expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir Image: Alt text must be less than 300 characters."
     );
   });