diff --git a/packages/frontend-app-api/src/extensions/components.tsx b/packages/frontend-app-api/src/extensions/components.tsx index fa9187a831..e13c1b2f3b 100644 --- a/packages/frontend-app-api/src/extensions/components.tsx +++ b/packages/frontend-app-api/src/extensions/components.tsx @@ -14,10 +14,15 @@ * limitations under the License. */ +import React from 'react'; +// TODO: Dependency on MUI should be removed from core packages +import { Button } from '@material-ui/core'; + import { createComponentExtension, coreComponentsRefs, } from '@backstage/frontend-plugin-api'; +import { ErrorPanel } from '@backstage/core-components'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports import { components as defaultComponents } from '../../../app-defaults/src/defaults'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports @@ -39,5 +44,18 @@ export const DefaultNotFoundErrorPageComponent = createComponentExtension({ export const DefaultErrorBoundaryComponent = createComponentExtension({ ref: coreComponentsRefs.errorBoundaryFallback, - component: { sync: () => defaultComponents.ErrorBoundaryFallback }, + component: { + sync: () => props => { + const { plugin, error, resetError } = props; + const title = `Error in ${plugin?.id}`; + + return ( + + + + ); + }, + }, }); diff --git a/packages/frontend-plugin-api/api-report.md b/packages/frontend-plugin-api/api-report.md index e8f4f16e97..e578c181fb 100644 --- a/packages/frontend-plugin-api/api-report.md +++ b/packages/frontend-plugin-api/api-report.md @@ -22,7 +22,6 @@ import { AuthProviderInfo } from '@backstage/core-plugin-api'; import { AuthRequestOptions } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; import { BackstageIdentityResponse } from '@backstage/core-plugin-api'; -import { BackstagePlugin as BackstagePlugin_2 } from '@backstage/core-plugin-api'; import { BackstageUserIdentity } from '@backstage/core-plugin-api'; import { bitbucketAuthApiRef } from '@backstage/core-plugin-api'; import { bitbucketServerAuthApiRef } from '@backstage/core-plugin-api'; @@ -340,7 +339,7 @@ export const coreComponentsRefs: { // @public (undocumented) export type CoreErrorBoundaryFallbackComponent = ComponentType< PropsWithChildren<{ - plugin?: BackstagePlugin_2; + plugin?: BackstagePlugin; error: Error; resetError: () => void; }> diff --git a/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx b/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx index 1191b75a1d..e3765be386 100644 --- a/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx +++ b/packages/frontend-plugin-api/src/components/ErrorBoundary.tsx @@ -15,34 +15,13 @@ */ import React, { Component, PropsWithChildren } from 'react'; -// TODO: Dependency on MUI should be removed from core packages -import { Button } from '@material-ui/core'; -import { ErrorPanel } from '@backstage/core-components'; import { BackstagePlugin } from '../wiring'; +import { CoreErrorBoundaryFallbackComponent } from '../types'; -type DefaultErrorBoundaryFallbackProps = PropsWithChildren<{ +type ErrorBoundaryProps = PropsWithChildren<{ plugin?: BackstagePlugin; - error: Error; - resetError: () => void; + fallback: CoreErrorBoundaryFallbackComponent; }>; - -const DefaultErrorBoundaryFallback = ({ - plugin, - error, - resetError, -}: DefaultErrorBoundaryFallbackProps) => { - const title = `Error in ${plugin?.id}`; - - return ( - - - - ); -}; - -type ErrorBoundaryProps = PropsWithChildren<{ plugin?: BackstagePlugin }>; type ErrorBoundaryState = { error?: Error }; /** @internal */ @@ -62,12 +41,11 @@ export class ErrorBoundary extends Component< render() { const { error } = this.state; - const { plugin, children } = this.props; + const { plugin, children, fallback: Fallback } = this.props; if (error) { - // TODO: use a configurable error boundary fallback return ( - - + {children} diff --git a/packages/frontend-plugin-api/src/types.ts b/packages/frontend-plugin-api/src/types.ts index f3f68c362c..3c79bcdf35 100644 --- a/packages/frontend-plugin-api/src/types.ts +++ b/packages/frontend-plugin-api/src/types.ts @@ -14,8 +14,8 @@ * limitations under the License. */ -import { BackstagePlugin } from '@backstage/core-plugin-api'; import { ComponentType, PropsWithChildren } from 'react'; +import { BackstagePlugin } from './wiring'; // TODO(Rugvip): This might be a quite useful utility type, maybe add to @backstage/types? /**