From 4a4681b1b960081fa44c4b1f54f20f4e108e617b Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 1 Apr 2021 14:42:07 +0200
Subject: [PATCH] core-api: improve error message and component naming for
 routable extension mounting errorsr

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/funny-donkeys-jam.md                 |  6 ++++++
 packages/core-api/src/extensions/extensions.tsx | 16 ++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/funny-donkeys-jam.md

diff --git a/.changeset/funny-donkeys-jam.md b/.changeset/funny-donkeys-jam.md
new file mode 100644
index 0000000000..0c45d4b5ff
--- /dev/null
+++ b/.changeset/funny-donkeys-jam.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-api': patch
+'@backstage/core': patch
+---
+
+Improved error messaging for routable extension errors, making it easier to identify the component and mount point that caused the error.
diff --git a/packages/core-api/src/extensions/extensions.tsx b/packages/core-api/src/extensions/extensions.tsx
index 191e4c4fb7..9463e437e3 100644
--- a/packages/core-api/src/extensions/extensions.tsx
+++ b/packages/core-api/src/extensions/extensions.tsx
@@ -41,20 +41,28 @@ export function createRoutableExtension<
     component: {
       lazy: () =>
         component().then(InnerComponent => {
-          const RoutableExtensionWrapper = ((props: any) => {
+          const RoutableExtensionWrapper: any = (props: any) => {
             // Validate that the routing is wired up correctly in the App.tsx
             try {
               useRouteRef(mountPoint);
             } catch {
               throw new Error(
-                'Routable extension component was not discovered in the app element tree. ' +
+                `Routable extension component with mount point ${mountPoint} was not discovered in the app element tree. ` +
                   'Routable extension components may not be rendered by other components and must be ' +
                   'directly available as an element within the App provider component.',
               );
             }
             return <InnerComponent {...props} />;
-          }) as T;
-          return RoutableExtensionWrapper;
+          };
+
+          const componentName =
+            (InnerComponent as { displayName?: string }).displayName ||
+            InnerComponent.name ||
+            'LazyComponent';
+
+          RoutableExtensionWrapper.displayName = `RoutableExtension(${componentName})`;
+
+          return RoutableExtensionWrapper as T;
         }),
     },
     data: {