From d2e3bf67375300165d8eadf5fc83dff539063bb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= <g.rantila@gmail.com>
Date: Wed, 30 Nov 2022 11:24:09 +0100
Subject: [PATCH] Make AlertDisplay not crash on undefined error message
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
---
 .changeset/modern-jokes-attack.md                            | 5 +++++
 .../src/components/AlertDisplay/AlertDisplay.tsx             | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/modern-jokes-attack.md

diff --git a/.changeset/modern-jokes-attack.md b/.changeset/modern-jokes-attack.md
new file mode 100644
index 0000000000..34b4741d14
--- /dev/null
+++ b/.changeset/modern-jokes-attack.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Made AlertDisplay not crash on undefined error messages
diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
index 3af261da23..48cc4aba1d 100644
--- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
+++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
@@ -42,7 +42,7 @@ export type AlertDisplayProps = {
 
 /** @public */
 export function AlertDisplay(props: AlertDisplayProps) {
-  const [messages, setMessages] = useState<Array<AlertMessage>>([]);
+  const [messages, setMessages] = useState<Array<Partial<AlertMessage>>>([]);
   const alertApi = useApi(alertApiRef);
 
   const { anchorOrigin = { vertical: 'top', horizontal: 'center' } } = props;
@@ -83,7 +83,7 @@ export function AlertDisplay(props: AlertDisplayProps) {
         severity={firstMessage.severity}
       >
         <span>
-          {firstMessage.message.toString()}
+          {`${firstMessage?.message}`}
           {messages.length > 1 && (
             <em>{` (${messages.length - 1} older ${pluralize(
               'message',