@backstage/frontend-defaults 0.3.1-next.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @backstage/frontend-defaults
 
+## 0.3.1
+
+### Patch Changes
+
+- 6516c3d: The default app now leverages the new error reporting functionality from `@backstage/frontend-app-api`. If there are critical errors during startup, an error screen that shows a summary of all errors will now be shown, rather than leaving the screen blank. Other errors will be logged as warnings in the console.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.12.0
+  - @backstage/plugin-app@0.3.0
+  - @backstage/core-components@0.18.0
+  - @backstage/frontend-app-api@0.13.0
+
 ## 0.3.1-next.0
 
 ### Patch Changes

package/dist/createApp.esm.js

@@ -9,6 +9,7 @@ import { createSpecializedApp } from '@backstage/frontend-app-api';
 import appPlugin from '@backstage/plugin-app';
 import { discoverAvailableFeatures } from './discovery.esm.js';
 import { resolveAsyncFeatures } from './resolution.esm.js';
+import { maybeCreateErrorPage } from './maybeCreateErrorPage.esm.js';
 
 function createApp(options) {
   let suspenseFallback = options?.advanced?.loadingElement;
@@ -30,6 +31,10 @@ function createApp(options) {
       bindRoutes: options?.bindRoutes,
       advanced: options?.advanced
     });
+    const errorPage = maybeCreateErrorPage(app);
+    if (errorPage) {
+      return { default: () => errorPage };
+    }
     const rootEl = app.tree.root.instance.getData(
       coreExtensionData.reactElement
     );

package/dist/createApp.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"createApp.esm.js","sources":["../src/createApp.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { JSX, lazy, ReactNode, Suspense } from 'react';\nimport {\n  ConfigApi,\n  coreExtensionData,\n  ExtensionFactoryMiddleware,\n  FrontendFeature,\n  FrontendFeatureLoader,\n} from '@backstage/frontend-plugin-api';\nimport { Progress } from '@backstage/core-components';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { defaultConfigLoaderSync } from '../../core-app-api/src/app/defaultConfigLoader';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { overrideBaseUrlConfigs } from '../../core-app-api/src/app/overrideBaseUrlConfigs';\nimport { ConfigReader } from '@backstage/config';\nimport {\n  CreateAppRouteBinder,\n  createSpecializedApp,\n  FrontendPluginInfoResolver,\n} from '@backstage/frontend-app-api';\nimport appPlugin from '@backstage/plugin-app';\nimport { discoverAvailableFeatures } from './discovery';\nimport { resolveAsyncFeatures } from './resolution';\n\n/**\n * Options for {@link createApp}.\n *\n * @public\n */\nexport interface CreateAppOptions {\n  /**\n   * The list of features to load.\n   */\n  features?: (FrontendFeature | FrontendFeatureLoader)[];\n\n  /**\n   * Allows for the binding of plugins' external route refs within the app.\n   */\n  bindRoutes?(context: { bind: CreateAppRouteBinder }): void;\n\n  /**\n   * Advanced, more rarely used options.\n   */\n  advanced?: {\n    /**\n     * If set to true, the system will silently accept and move on if\n     * encountering config for extensions that do not exist. The default is to\n     * reject such config to help catch simple mistakes.\n     *\n     * This flag can be useful in some scenarios where you have a dynamic set of\n     * extensions enabled at different times, but also increases the risk of\n     * accidentally missing e.g. simple typos in your config.\n     */\n    allowUnknownExtensionConfig?: boolean;\n\n    /**\n     * Sets a custom config loader, replacing the builtin one.\n     *\n     * This can be used e.g. if you have the need to source config out of custom\n     * storages.\n     */\n    configLoader?: () => Promise<{ config: ConfigApi }>;\n\n    /**\n     * Applies one or more middleware on every extension, as they are added to\n     * the application.\n     *\n     * This is an advanced use case for modifying extension data on the fly as\n     * it gets emitted by extensions being instantiated.\n     */\n    extensionFactoryMiddleware?:\n      | ExtensionFactoryMiddleware\n      | ExtensionFactoryMiddleware[];\n\n    /**\n     * The element to render while loading the app (waiting for config, features, etc).\n     *\n     * This is the `<Progress />` component from `@backstage/core-components` by default.\n     * If set to `null` then no loading fallback element is rendered at all.\n     */\n    loadingElement?: ReactNode;\n\n    /**\n     * Allows for customizing how plugin info is retrieved.\n     */\n    pluginInfoResolver?: FrontendPluginInfoResolver;\n  };\n}\n\n/**\n * Creates a new Backstage frontend app instance. See https://backstage.io/docs/frontend-system/building-apps/index\n *\n * @public\n */\nexport function createApp(options?: CreateAppOptions): {\n  createRoot(): JSX.Element;\n} {\n  let suspenseFallback = options?.advanced?.loadingElement;\n  if (suspenseFallback === undefined) {\n    suspenseFallback = <Progress />;\n  }\n\n  async function appLoader() {\n    const config =\n      (await options?.advanced?.configLoader?.().then(c => c.config)) ??\n      ConfigReader.fromConfigs(\n        overrideBaseUrlConfigs(defaultConfigLoaderSync()),\n      );\n\n    const { features: discoveredFeaturesAndLoaders } =\n      discoverAvailableFeatures(config);\n    const { features: loadedFeatures } = await resolveAsyncFeatures({\n      config,\n      features: [...discoveredFeaturesAndLoaders, ...(options?.features ?? [])],\n    });\n\n    const app = createSpecializedApp({\n      features: [appPlugin, ...loadedFeatures],\n      config,\n      bindRoutes: options?.bindRoutes,\n      advanced: options?.advanced,\n    });\n\n    const rootEl = app.tree.root.instance!.getData(\n      coreExtensionData.reactElement,\n    );\n\n    return { default: () => rootEl };\n  }\n\n  const LazyApp = lazy(appLoader);\n\n  return {\n    createRoot() {\n      return (\n        <Suspense fallback={suspenseFallback}>\n          <LazyApp />\n        </Suspense>\n      );\n    },\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA6GO,SAAS,UAAU,OAAA,EAExB;AACA,EAAA,IAAI,gBAAA,GAAmB,SAAS,QAAA,EAAU,cAAA;AAC1C,EAAA,IAAI,qBAAqB,MAAA,EAAW;AAClC,IAAA,gBAAA,uBAAoB,QAAA,EAAA,EAAS,CAAA;AAAA,EAC/B;AAEA,EAAA,eAAe,SAAA,GAAY;AACzB,IAAA,MAAM,MAAA,GACH,MAAM,OAAA,EAAS,QAAA,EAAU,YAAA,IAAe,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,MAAM,CAAA,IAC7D,YAAA,CAAa,WAAA;AAAA,MACX,sBAAA,CAAuB,yBAAyB;AAAA,KAClD;AAEF,IAAA,MAAM,EAAE,QAAA,EAAU,4BAAA,EAA6B,GAC7C,0BAA0B,MAAM,CAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAe,GAAI,MAAM,oBAAA,CAAqB;AAAA,MAC9D,MAAA;AAAA,MACA,QAAA,EAAU,CAAC,GAAG,4BAAA,EAA8B,GAAI,OAAA,EAAS,QAAA,IAAY,EAAG;AAAA,KACzE,CAAA;AAED,IAAA,MAAM,MAAM,oBAAA,CAAqB;AAAA,MAC/B,QAAA,EAAU,CAAC,SAAA,EAAW,GAAG,cAAc,CAAA;AAAA,MACvC,MAAA;AAAA,MACA,YAAY,OAAA,EAAS,UAAA;AAAA,MACrB,UAAU,OAAA,EAAS;AAAA,KACpB,CAAA;AAED,IAAA,MAAM,MAAA,GAAS,GAAA,CAAI,IAAA,CAAK,IAAA,CAAK,QAAA,CAAU,OAAA;AAAA,MACrC,iBAAA,CAAkB;AAAA,KACpB;AAEA,IAAA,OAAO,EAAE,OAAA,EAAS,MAAM,MAAA,EAAO;AAAA,EACjC;AAEA,EAAA,MAAM,OAAA,GAAU,KAAK,SAAS,CAAA;AAE9B,EAAA,OAAO;AAAA,IACL,UAAA,GAAa;AACX,MAAA,2BACG,QAAA,EAAA,EAAS,QAAA,EAAU,gBAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,WAAQ,CAAA,EACX,CAAA;AAAA,IAEJ;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"createApp.esm.js","sources":["../src/createApp.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { JSX, lazy, ReactNode, Suspense } from 'react';\nimport {\n  ConfigApi,\n  coreExtensionData,\n  ExtensionFactoryMiddleware,\n  FrontendFeature,\n  FrontendFeatureLoader,\n} from '@backstage/frontend-plugin-api';\nimport { Progress } from '@backstage/core-components';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { defaultConfigLoaderSync } from '../../core-app-api/src/app/defaultConfigLoader';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { overrideBaseUrlConfigs } from '../../core-app-api/src/app/overrideBaseUrlConfigs';\nimport { ConfigReader } from '@backstage/config';\nimport {\n  CreateAppRouteBinder,\n  createSpecializedApp,\n  FrontendPluginInfoResolver,\n} from '@backstage/frontend-app-api';\nimport appPlugin from '@backstage/plugin-app';\nimport { discoverAvailableFeatures } from './discovery';\nimport { resolveAsyncFeatures } from './resolution';\nimport { maybeCreateErrorPage } from './maybeCreateErrorPage';\n\n/**\n * Options for {@link createApp}.\n *\n * @public\n */\nexport interface CreateAppOptions {\n  /**\n   * The list of features to load.\n   */\n  features?: (FrontendFeature | FrontendFeatureLoader)[];\n\n  /**\n   * Allows for the binding of plugins' external route refs within the app.\n   */\n  bindRoutes?(context: { bind: CreateAppRouteBinder }): void;\n\n  /**\n   * Advanced, more rarely used options.\n   */\n  advanced?: {\n    /**\n     * If set to true, the system will silently accept and move on if\n     * encountering config for extensions that do not exist. The default is to\n     * reject such config to help catch simple mistakes.\n     *\n     * This flag can be useful in some scenarios where you have a dynamic set of\n     * extensions enabled at different times, but also increases the risk of\n     * accidentally missing e.g. simple typos in your config.\n     */\n    allowUnknownExtensionConfig?: boolean;\n\n    /**\n     * Sets a custom config loader, replacing the builtin one.\n     *\n     * This can be used e.g. if you have the need to source config out of custom\n     * storages.\n     */\n    configLoader?: () => Promise<{ config: ConfigApi }>;\n\n    /**\n     * Applies one or more middleware on every extension, as they are added to\n     * the application.\n     *\n     * This is an advanced use case for modifying extension data on the fly as\n     * it gets emitted by extensions being instantiated.\n     */\n    extensionFactoryMiddleware?:\n      | ExtensionFactoryMiddleware\n      | ExtensionFactoryMiddleware[];\n\n    /**\n     * The element to render while loading the app (waiting for config, features, etc).\n     *\n     * This is the `<Progress />` component from `@backstage/core-components` by default.\n     * If set to `null` then no loading fallback element is rendered at all.\n     */\n    loadingElement?: ReactNode;\n\n    /**\n     * Allows for customizing how plugin info is retrieved.\n     */\n    pluginInfoResolver?: FrontendPluginInfoResolver;\n  };\n}\n\n/**\n * Creates a new Backstage frontend app instance. See https://backstage.io/docs/frontend-system/building-apps/index\n *\n * @public\n */\nexport function createApp(options?: CreateAppOptions): {\n  createRoot(): JSX.Element;\n} {\n  let suspenseFallback = options?.advanced?.loadingElement;\n  if (suspenseFallback === undefined) {\n    suspenseFallback = <Progress />;\n  }\n\n  async function appLoader() {\n    const config =\n      (await options?.advanced?.configLoader?.().then(c => c.config)) ??\n      ConfigReader.fromConfigs(\n        overrideBaseUrlConfigs(defaultConfigLoaderSync()),\n      );\n\n    const { features: discoveredFeaturesAndLoaders } =\n      discoverAvailableFeatures(config);\n    const { features: loadedFeatures } = await resolveAsyncFeatures({\n      config,\n      features: [...discoveredFeaturesAndLoaders, ...(options?.features ?? [])],\n    });\n\n    const app = createSpecializedApp({\n      features: [appPlugin, ...loadedFeatures],\n      config,\n      bindRoutes: options?.bindRoutes,\n      advanced: options?.advanced,\n    });\n\n    const errorPage = maybeCreateErrorPage(app);\n    if (errorPage) {\n      return { default: () => errorPage };\n    }\n\n    const rootEl = app.tree.root.instance!.getData(\n      coreExtensionData.reactElement,\n    );\n\n    return { default: () => rootEl };\n  }\n\n  const LazyApp = lazy(appLoader);\n\n  return {\n    createRoot() {\n      return (\n        <Suspense fallback={suspenseFallback}>\n          <LazyApp />\n        </Suspense>\n      );\n    },\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8GO,SAAS,UAAU,OAAA,EAExB;AACA,EAAA,IAAI,gBAAA,GAAmB,SAAS,QAAA,EAAU,cAAA;AAC1C,EAAA,IAAI,qBAAqB,MAAA,EAAW;AAClC,IAAA,gBAAA,uBAAoB,QAAA,EAAA,EAAS,CAAA;AAAA,EAC/B;AAEA,EAAA,eAAe,SAAA,GAAY;AACzB,IAAA,MAAM,MAAA,GACH,MAAM,OAAA,EAAS,QAAA,EAAU,YAAA,IAAe,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,MAAM,CAAA,IAC7D,YAAA,CAAa,WAAA;AAAA,MACX,sBAAA,CAAuB,yBAAyB;AAAA,KAClD;AAEF,IAAA,MAAM,EAAE,QAAA,EAAU,4BAAA,EAA6B,GAC7C,0BAA0B,MAAM,CAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAe,GAAI,MAAM,oBAAA,CAAqB;AAAA,MAC9D,MAAA;AAAA,MACA,QAAA,EAAU,CAAC,GAAG,4BAAA,EAA8B,GAAI,OAAA,EAAS,QAAA,IAAY,EAAG;AAAA,KACzE,CAAA;AAED,IAAA,MAAM,MAAM,oBAAA,CAAqB;AAAA,MAC/B,QAAA,EAAU,CAAC,SAAA,EAAW,GAAG,cAAc,CAAA;AAAA,MACvC,MAAA;AAAA,MACA,YAAY,OAAA,EAAS,UAAA;AAAA,MACrB,UAAU,OAAA,EAAS;AAAA,KACpB,CAAA;AAED,IAAA,MAAM,SAAA,GAAY,qBAAqB,GAAG,CAAA;AAC1C,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAO,EAAE,OAAA,EAAS,MAAM,SAAA,EAAU;AAAA,IACpC;AAEA,IAAA,MAAM,MAAA,GAAS,GAAA,CAAI,IAAA,CAAK,IAAA,CAAK,QAAA,CAAU,OAAA;AAAA,MACrC,iBAAA,CAAkB;AAAA,KACpB;AAEA,IAAA,OAAO,EAAE,OAAA,EAAS,MAAM,MAAA,EAAO;AAAA,EACjC;AAEA,EAAA,MAAM,OAAA,GAAU,KAAK,SAAS,CAAA;AAE9B,EAAA,OAAO;AAAA,IACL,UAAA,GAAa;AACX,MAAA,2BACG,QAAA,EAAA,EAAS,QAAA,EAAU,gBAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,WAAQ,CAAA,EACX,CAAA;AAAA,IAEJ;AAAA,GACF;AACF;;;;"}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, JSX } from 'react';
 import { FrontendFeature, FrontendFeatureLoader, ConfigApi, ExtensionFactoryMiddleware } from '@backstage/frontend-plugin-api';
-import { CreateAppRouteBinder, FrontendPluginInfoResolver } from '@backstage/frontend-app-api';
+import { CreateAppRouteBinder, FrontendPluginInfoResolver, AppError, AppErrorTypes } from '@backstage/frontend-app-api';
 import { Config } from '@backstage/config';
 
 /**
@@ -96,4 +96,16 @@ declare function resolveAsyncFeatures(options: {
     features: FrontendFeature[];
 }>;
 
-export { type CreateAppOptions, createApp, createPublicSignInApp, discoverAvailableFeatures, resolveAsyncFeatures };
+/**
+ * If there are any unrecoverable errors in the app, this will return an error page in the form of a JSX element.
+ *
+ * If there are any recoverable errors, they will always be logged as warnings in the console.
+ * @public
+ */
+declare function maybeCreateErrorPage(app: {
+    errors?: AppError[];
+}, options?: {
+    warningCodes?: Array<keyof AppErrorTypes>;
+}): JSX.Element | undefined;
+
+export { type CreateAppOptions, createApp, createPublicSignInApp, discoverAvailableFeatures, maybeCreateErrorPage, resolveAsyncFeatures };

package/dist/index.esm.js

@@ -2,4 +2,5 @@ export { createApp } from './createApp.esm.js';
 export { createPublicSignInApp } from './createPublicSignInApp.esm.js';
 export { discoverAvailableFeatures } from './discovery.esm.js';
 export { resolveAsyncFeatures } from './resolution.esm.js';
+export { maybeCreateErrorPage } from './maybeCreateErrorPage.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/maybeCreateErrorPage.esm.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+const DEFAULT_WARNING_CODES = [
+  "EXTENSION_IGNORED",
+  "INVALID_EXTENSION_CONFIG_KEY",
+  "EXTENSION_INPUT_DATA_IGNORED",
+  "EXTENSION_OUTPUT_IGNORED"
+];
+function AppErrorItem(props) {
+  const { context } = props.error;
+  const node = "node" in context ? context.node : void 0;
+  const extensionId = "extensionId" in context ? context.extensionId : node?.spec.id;
+  const routeId = "routeId" in context ? context.routeId : void 0;
+  const plugin = "plugin" in context ? context.plugin : node?.spec.plugin;
+  const pluginId = plugin?.id ?? "N/A";
+  const [info, setInfo] = useState(void 0);
+  useEffect(() => {
+    plugin?.info().then(setInfo, (error) => {
+      console.error(`Failed to load info for plugin ${plugin.id}: ${error}`);
+    });
+  }, [plugin]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("b", { children: props.error.code }),
+    ": ",
+    props.error.message,
+    /* @__PURE__ */ jsxs("pre", { style: { marginLeft: "1rem" }, children: [
+      extensionId && /* @__PURE__ */ jsxs("div", { children: [
+        "extensionId: ",
+        extensionId
+      ] }),
+      routeId && /* @__PURE__ */ jsxs("div", { children: [
+        "routeId: ",
+        routeId
+      ] }),
+      pluginId && /* @__PURE__ */ jsxs("div", { children: [
+        "pluginId: ",
+        pluginId
+      ] }),
+      info && /* @__PURE__ */ jsxs("div", { children: [
+        "package: ",
+        info.packageName,
+        "@",
+        info.version
+      ] })
+    ] })
+  ] });
+}
+function AppErrorPage(props) {
+  return /* @__PURE__ */ jsxs("div", { style: { margin: "1rem" }, children: [
+    /* @__PURE__ */ jsx("h2", { children: "App startup failed" }),
+    props.errors.map((error, index) => /* @__PURE__ */ jsx(AppErrorItem, { error }, index))
+  ] });
+}
+function maybeCreateErrorPage(app, options) {
+  if (!app.errors) {
+    return void 0;
+  }
+  const errors = new Array();
+  const warnings = new Array();
+  const warningCodes = new Set(options?.warningCodes ?? DEFAULT_WARNING_CODES);
+  for (const error of app.errors) {
+    if (warningCodes.has(error.code)) {
+      warnings.push(error);
+    } else {
+      errors.push(error);
+    }
+  }
+  if (warnings.length > 0) {
+    console.warn("App startup encountered warnings:");
+    for (const warning of warnings) {
+      console.warn(`${warning.code}: ${warning.message}`);
+    }
+  }
+  if (errors.length === 0) {
+    return void 0;
+  }
+  return /* @__PURE__ */ jsx(AppErrorPage, { errors });
+}
+
+export { maybeCreateErrorPage };
+//# sourceMappingURL=maybeCreateErrorPage.esm.js.map

package/dist/maybeCreateErrorPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"maybeCreateErrorPage.esm.js","sources":["../src/maybeCreateErrorPage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { FrontendPluginInfo } from '@backstage/frontend-plugin-api';\nimport { JSX, useEffect, useState } from 'react';\nimport { AppError, AppErrorTypes } from '@backstage/frontend-app-api';\n\nconst DEFAULT_WARNING_CODES: Array<keyof AppErrorTypes> = [\n  'EXTENSION_IGNORED',\n  'INVALID_EXTENSION_CONFIG_KEY',\n  'EXTENSION_INPUT_DATA_IGNORED',\n  'EXTENSION_OUTPUT_IGNORED',\n];\n\nfunction AppErrorItem(props: { error: AppError }): JSX.Element {\n  const { context } = props.error;\n\n  const node = 'node' in context ? context.node : undefined;\n  const extensionId =\n    'extensionId' in context ? context.extensionId : node?.spec.id;\n  const routeId = 'routeId' in context ? context.routeId : undefined;\n  const plugin = 'plugin' in context ? context.plugin : node?.spec.plugin;\n  const pluginId = plugin?.id ?? 'N/A';\n\n  const [info, setInfo] = useState<FrontendPluginInfo | undefined>(undefined);\n  useEffect(() => {\n    plugin?.info().then(setInfo, error => {\n      // eslint-disable-next-line no-console\n      console.error(`Failed to load info for plugin ${plugin.id}: ${error}`);\n    });\n  }, [plugin]);\n\n  return (\n    <div>\n      <b>{props.error.code}</b>: {props.error.message}\n      <pre style={{ marginLeft: '1rem' }}>\n        {extensionId && <div>extensionId: {extensionId}</div>}\n        {routeId && <div>routeId: {routeId}</div>}\n        {pluginId && <div>pluginId: {pluginId}</div>}\n        {info && (\n          <div>\n            package: {info.packageName}@{info.version}\n          </div>\n        )}\n      </pre>\n    </div>\n  );\n}\n\nfunction AppErrorPage(props: { errors: AppError[] }): JSX.Element {\n  return (\n    <div style={{ margin: '1rem' }}>\n      <h2>App startup failed</h2>\n      {props.errors.map((error, index) => (\n        <AppErrorItem error={error} key={index} />\n      ))}\n    </div>\n  );\n}\n\n/**\n * If there are any unrecoverable errors in the app, this will return an error page in the form of a JSX element.\n *\n * If there are any recoverable errors, they will always be logged as warnings in the console.\n * @public\n */\nexport function maybeCreateErrorPage(\n  app: { errors?: AppError[] },\n  options?: {\n    warningCodes?: Array<keyof AppErrorTypes>;\n  },\n): JSX.Element | undefined {\n  if (!app.errors) {\n    return undefined;\n  }\n\n  const errors = new Array<AppError>();\n  const warnings = new Array<AppError>();\n\n  const warningCodes = new Set(options?.warningCodes ?? DEFAULT_WARNING_CODES);\n  for (const error of app.errors) {\n    if (warningCodes.has(error.code)) {\n      warnings.push(error);\n    } else {\n      errors.push(error);\n    }\n  }\n\n  if (warnings.length > 0) {\n    // eslint-disable-next-line no-console\n    console.warn('App startup encountered warnings:');\n    for (const warning of warnings) {\n      // eslint-disable-next-line no-console\n      console.warn(`${warning.code}: ${warning.message}`);\n    }\n  }\n\n  if (errors.length === 0) {\n    return undefined;\n  }\n\n  return <AppErrorPage errors={errors} />;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/frontend-defaults",
-  "version": "0.3.1-next.0",
+  "version": "0.3.1",
   "backstage": {
     "role": "web-library"
   },
@@ -31,18 +31,18 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/config": "1.3.3",
-    "@backstage/core-components": "0.17.6-next.0",
-    "@backstage/errors": "1.2.7",
-    "@backstage/frontend-app-api": "0.12.1-next.0",
-    "@backstage/frontend-plugin-api": "0.11.1-next.0",
-    "@backstage/plugin-app": "0.2.1-next.0",
+    "@backstage/config": "^1.3.3",
+    "@backstage/core-components": "^0.18.0",
+    "@backstage/errors": "^1.2.7",
+    "@backstage/frontend-app-api": "^0.13.0",
+    "@backstage/frontend-plugin-api": "^0.12.0",
+    "@backstage/plugin-app": "^0.3.0",
     "@react-hookz/web": "^24.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "0.34.2-next.1",
-    "@backstage/core-plugin-api": "1.10.9",
-    "@backstage/test-utils": "1.7.11",
+    "@backstage/cli": "^0.34.2",
+    "@backstage/core-plugin-api": "^1.11.0",
+    "@backstage/test-utils": "^1.7.11",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.0.0",