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

@@ -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.

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: {