@codecademy/brand 3.21.0-alpha.c60fb49007.0 → 3.22.0-alpha.c6b0e83449.0

package/dist/AppHeader/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useMemo, useRef } from 'react';
+import { useContext, useMemo, useRef } from 'react';
+import { LogErrorContext } from '..';
 import { HeaderHeightArea } from '../HeaderHeightArea';
 import { NotificationsDropdown } from '../Notifications/NotificationsDropdown';
 import { useHeaderNotifications } from '../Notifications/useHeaderNotifications';
@@ -41,8 +42,24 @@ export const AppHeader = ({
     }
     return [...defaultItems, ...items.right];
   }, [searchButton, notificationsBell, hideRightButtonDefaults, items, isTeams]);
+  const {
+    logError
+  } = useContext(LogErrorContext);
   const mapItemsToElement = (items, side) => {
-    return items.map((item, index) => {
+    // logging error to help with debugging
+    if (items && items.some(item => !item)) {
+      try {
+        const itemTypesString = items.map(item => item.type).join(', ');
+        logError?.(`Error: Found an undefined app header item on the ${side} side of the header.`, {
+          message: `The current array of items includes the following header item types: ${itemTypesString}`
+        });
+      } catch (e) {
+        logError?.(`Error while logging undefined header items: ${e}`);
+      }
+    }
+    return items
+    // preventative measure to handle a possibly undefined item from being rendered
+    .filter(item => !!item).map((item, index) => {
       const margin = appHeaderSpacing[type];
       return /*#__PURE__*/_jsx(AppHeaderListItem, {
         mr: margin,

package/dist/GlobalPage/index.d.ts

@@ -3,6 +3,14 @@ import * as React from 'react';
 import { EnhancedBannerProps } from '../Banner/EnhancedBanner';
 import { GlobalFooterProps } from '../GlobalFooter';
 import { GlobalHeaderProps } from '../GlobalHeader';
+type ErrorContext = {
+    message?: string;
+    [k: string]: any;
+};
+type LogErrorContextType = {
+    logError?: (error: unknown, context?: ErrorContext | string) => void;
+};
+export declare const LogErrorContext: React.Context<LogErrorContextType>;
 export type GlobalPageBackgroundColor = 'beige' | 'background' | 'background-contrast' | 'navy' | 'paleBlue' | 'paleGreen' | 'palePink' | 'paleYellow' | 'white';
 export interface GlobalPageProps extends WithChildrenProp {
     backgroundColor?: GlobalPageBackgroundColor;
@@ -30,5 +38,11 @@ export interface GlobalPageProps extends WithChildrenProp {
      * Custom element ID to link to by the SkipToContent control, if not a default one at the beginning of the page.
      */
     skipToContentId?: string;
+    /**
+     * Temporary function called with error and context when an error occurs to
+     * help with debugging.
+     */
+    onError?: (error: unknown, context?: ErrorContext | string) => void;
 }
 export declare const GlobalPage: React.FC<GlobalPageProps>;
+export {};

package/dist/GlobalPage/index.js

@@ -6,6 +6,7 @@ import { EnhancedBanner } from '../Banner/EnhancedBanner';
 import { GlobalFooter } from '../GlobalFooter';
 import { GlobalHeader } from '../GlobalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LogErrorContext = /*#__PURE__*/React.createContext({});
 const defaultSkipToContentId = 'page-skip-to-content-target';
 const RestrictedBackground = /*#__PURE__*/forwardRef(({
   children,
@@ -28,7 +29,8 @@ export const GlobalPage = ({
   footer,
   header,
   modal,
-  skipToContentId
+  skipToContentId,
+  onError
 }) => {
   return /*#__PURE__*/_jsxs(GlobalPageWrapper, {
     bg: backgroundColor,
@@ -37,8 +39,13 @@ export const GlobalPage = ({
       contentId: skipToContentId || defaultSkipToContentId
     }), banner && /*#__PURE__*/_jsx(EnhancedBanner, {
       ...banner
-    }), !header.hideEnterpriseHeader && /*#__PURE__*/_jsx(GlobalHeader, {
-      ...header
+    }), /*#__PURE__*/_jsx(LogErrorContext.Provider, {
+      value: {
+        logError: onError
+      },
+      children: !header.hideEnterpriseHeader && /*#__PURE__*/_jsx(GlobalHeader, {
+        ...header
+      })
     }), !skipToContentId && /*#__PURE__*/_jsx(SkipToContentTarget, {
       id: defaultSkipToContentId
     }), /*#__PURE__*/_jsx(AppWrapper, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.21.0-alpha.c60fb49007.0",
+  "version": "3.22.0-alpha.c6b0e83449.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",