paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Adds error boundary to extensions

Browse Source 
Signed-off-by: Juan Lulkin <jmaiz@spotify.com>
This commit is contained in:
Juan Lulkin
2021-05-11 13:34:43 +02:00
committed by Fredrik Adelöw
parent 26375458b1
commit 75b8537ce1
15 changed files with 345 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/few-cats-type.md
+33
View File
@@ -0,0 +1,33 @@
---
'@backstage/core': minor
'@backstage/core-api': patch
---
This change adds error boundary on extensions.
This means all exposed parts of a plugin are wrapped in a general error boundary component, that is plugin aware. The default design for the error box is borrowed from @backstage/errors. To override the default "fallback" one must provide a component named `ErrorBoundaryFallback` to `createApp`, like so:
```ts
const app = createApp({
components: {
ErrorBoundaryFallback: props => {
// a custom fallback component
return (
<>
<h1>Oops.</h1>
<h2>
The plugin {props.plugin.getId()} failed with {props.error.message}
</h2>
<button onClick={props.resetError}>Try again</button>
</>
);
},
},
});
```
The props here include:
- `error`. An Error object or something that inherits it that represents the error that was thrown from any inner component.
- `resetError`. A callback that will simply mount the children of the error boundary again.
- `plugin`. A BackstagePlugin that can be used to lookup info to be presented in the error message. For instance, you may want to keep a map of your internal plugins and team names or slack channels and present these when an error occurs. Typically, you'll do that by getting the plugin id with `plugin.getId()`.
packages/app/src/App.tsx
+4
View File
@@ -20,6 +20,7 @@ import {
FlatRoutes,
OAuthRequestDialog,
SignInPage,
ErrorBoundaryFallback,
} from '@backstage/core';
import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
import {
@@ -66,6 +67,9 @@ const app = createApp({
alert: AlarmIcon,
},
components: {
ErrorBoundaryFallback: props => {
return <ErrorBoundaryFallback {...props} />;
},
SignInPage: props => {
return (
<SignInPage
packages/core-api/src/app/App.test.tsx
+1
View File
@@ -161,6 +161,7 @@ describe('Integration Test', () => {
BootErrorPage: () => null,
Progress: () => null,
Router: BrowserRouter,
ErrorBoundaryFallback: () => null,
};
it('runs happy paths', async () => {
packages/core-api/src/app/types.ts
+9 -3
View File
@@ -14,13 +14,14 @@
* limitations under the License.
*/
import { AppConfig } from '@backstage/config';
import { ComponentType } from 'react';
import { AppTheme, ProfileInfo } from '../apis/definitions';
import { AnyApiFactory } from '../apis/system';
import type { ErrorBoundaryFallbackProps } from '../extensions/PluginErrorBoundary';
import { IconComponent, IconComponentMap, IconKey } from '../icons/types';
import { AnyExternalRoutes, BackstagePlugin } from '../plugin/types';
import { ExternalRouteRef, RouteRef, SubRouteRef } from '../routing/types';
import { AnyApiFactory } from '../apis/system';
import { AppTheme, ProfileInfo } from '../apis/definitions';
import { AppConfig } from '@backstage/config';
export type BootErrorPageProps = {
step: 'load-config' | 'load-chunk';
@@ -58,6 +59,11 @@ export type AppComponents = {
BootErrorPage: ComponentType<BootErrorPageProps>;
Progress: ComponentType<{}>;
Router: ComponentType<{}>;
ErrorBoundaryFallback: ComponentType<
ErrorBoundaryFallbackProps & {
plugin: BackstagePlugin;
}
>;
/**
* An optional sign-in page that will be rendered instead of the AppRouter at startup.
packages/core-api/src/extensions/PluginErrorBoundary.tsx
+56
View File
@@ -0,0 +1,56 @@
/*
* Copyright 2021 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
export type ErrorBoundaryFallbackProps = {
error: Error;
resetError: () => void;
};
type FallbackRender = React.FunctionComponent<ErrorBoundaryFallbackProps>;
type Props = {
fallbackRender: FallbackRender;
};
type State = { error?: Error };
export class PluginErrorBoundary extends React.Component<Props, State> {
static getDerivedStateFromError(error: Error) {
return { error };
}
state: State = { error: undefined };
resetError = () => {
this.setState({ error: undefined });
};
render() {
const { error } = this.state;
const { fallbackRender } = this.props;
if (error) {
return fallbackRender({
error,
resetError: this.resetError,
});
}
return this.props.children;
}
}
packages/core-api/src/extensions/extensions.test.tsx
+49
View File
@@ -14,7 +14,13 @@
* limitations under the License.
*/
import { errorApiRef } from '../apis/definitions/ErrorApi';
import { ApiRegistry } from '../apis/system/ApiRegistry';
import { ApiProvider } from '../apis/system/ApiProvider';
import { withLogCollector } from '@backstage/test-utils-core';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { AppContextProvider } from '../app/AppContext';
import { createPlugin } from '../plugin';
import { createRouteRef } from '../routing';
import { getComponentData } from './componentData';
@@ -23,6 +29,9 @@ import {
createReactExtension,
createRoutableExtension,
} from './extensions';
import { AppComponents } from '../app/types';
import { AppContext } from '../app';
import { MockErrorApi } from '@backstage/test-utils';
const plugin = createPlugin({
id: 'my-plugin',
@@ -73,4 +82,44 @@ describe('extensions', () => {
expect(getComponentData(element2, 'core.plugin')).toBe(plugin);
expect(getComponentData(element2, 'core.mountPoint')).toBe(routeRef);
});
it('should wrap extended component with error boundary', async () => {
const extension = createComponentExtension({
component: {
sync: () => {
throw new Error('Test error');
},
},
});
const BrokenComponent = plugin.provide(extension);
const errorApi = new MockErrorApi();
const apis = ApiRegistry.from([[errorApiRef, errorApi]]);
const MockFallback: AppComponents['ErrorBoundaryFallback'] = props => (
<>Error in {props.plugin.getId()}</>
);
const { error: errors } = await withLogCollector(['error'], async () => {
render(
<ApiProvider apis={apis}>
<AppContextProvider
appContext={
({
getComponents: () => ({
ErrorBoundaryFallback: MockFallback,
}),
} as unknown) as AppContext
}
>
<BrokenComponent />
</AppContextProvider>
</ApiProvider>,
);
});
screen.getByText('Error in my-plugin');
expect(errors[0]).toMatch('Test error');
});
});
packages/core-api/src/extensions/extensions.tsx
+23 -5
View File
@@ -19,6 +19,7 @@ import { useApp } from '../app';
import { BackstagePlugin, Extension } from '../plugin/types';
import { RouteRef, useRouteRef } from '../routing';
import { attachComponentData } from './componentData';
import { PluginErrorBoundary } from './PluginErrorBoundary';
type ComponentLoader<T> =
| {
@@ -123,11 +124,28 @@ export function createReactExtension<
return {
expose(plugin: BackstagePlugin<any, any>) {
const Result: any = (props: any) => (
<Suspense fallback="...">
<Component {...props} />
</Suspense>
);
const Result: any = (props: any) => {
const app = useApp();
const { ErrorBoundaryFallback } = app.getComponents();
return (
<Suspense fallback="...">
<PluginErrorBoundary
fallbackRender={({ error, resetError }) => {
return (
<ErrorBoundaryFallback
error={error}
resetError={resetError}
plugin={plugin}
/>
);
}}
>
<Component {...props} />
</PluginErrorBoundary>
</Suspense>
);
};
attachComponentData(Result, 'core.plugin', plugin);
for (const [key, value] of Object.entries(data)) {
packages/core-api/src/routing/hooks.test.tsx
+81 -67
View File
@@ -14,6 +14,7 @@
* limitations under the License.
*/
import { AppContext } from '../app';
import { render } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import React, {
@@ -23,6 +24,7 @@ import React, {
useContext,
} from 'react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { AppContextProvider } from '../app/AppContext';
import { createRoutableExtension } from '../extensions';
import {
childDiscoverer,
@@ -154,23 +156,27 @@ function withRoutingProvider(
);
}
const appContext = ({ getComponents: () => ({}) } as unknown) as AppContext;
describe('discovery', () => {
it('should handle simple routeRef path creation for routeRefs used in other parts of the app', async () => {
const root = (
<MemoryRouter initialEntries={['/foo/bar']}>
<Routes>
<Extension1 path="/foo">
<Extension2 path="/bar" name="inside" routeRef={ref2} />
<MockRouteSource name="insideExternal" routeRef={eRefA} />
</Extension1>
<Extension3 path="/baz" />
</Routes>
<MockRouteSource name="outside" routeRef={ref2} />
<MockRouteSource name="outsideExternal1" routeRef={eRefB} />
<MockRouteSource name="outsideExternal2" routeRef={eRefC} />
<MockRouteSource name="outsideExternal3" routeRef={eRefD} />
<MockRouteSource name="outsideExternal4" routeRef={eRefE} />
</MemoryRouter>
<AppContextProvider appContext={appContext}>
<MemoryRouter initialEntries={['/foo/bar']}>
<Routes>
<Extension1 path="/foo">
<Extension2 path="/bar" name="inside" routeRef={ref2} />
<MockRouteSource name="insideExternal" routeRef={eRefA} />
</Extension1>
<Extension3 path="/baz" />
</Routes>
<MockRouteSource name="outside" routeRef={ref2} />
<MockRouteSource name="outsideExternal1" routeRef={eRefB} />
<MockRouteSource name="outsideExternal2" routeRef={eRefC} />
<MockRouteSource name="outsideExternal3" routeRef={eRefD} />
<MockRouteSource name="outsideExternal4" routeRef={eRefE} />
</MemoryRouter>
</AppContextProvider>
);
const rendered = render(
@@ -205,23 +211,25 @@ describe('discovery', () => {
it('should handle routeRefs with parameters', async () => {
const root = (
<MemoryRouter initialEntries={['/foo/bar/wat']}>
<Routes>
<Extension1 path="/foo">
<Extension4
path="/bar/:id"
name="inside"
routeRef={ref4}
params={{ id: 'bleb' }}
/>
</Extension1>
</Routes>
<MockRouteSource
name="outside"
routeRef={ref4}
params={{ id: 'blob' }}
/>
</MemoryRouter>
<AppContextProvider appContext={appContext}>
<MemoryRouter initialEntries={['/foo/bar/wat']}>
<Routes>
<Extension1 path="/foo">
<Extension4
path="/bar/:id"
name="inside"
routeRef={ref4}
params={{ id: 'bleb' }}
/>
</Extension1>
</Routes>
<MockRouteSource
name="outside"
routeRef={ref4}
params={{ id: 'blob' }}
/>
</MemoryRouter>
</AppContextProvider>
);
const rendered = render(withRoutingProvider(root));
@@ -236,8 +244,37 @@ describe('discovery', () => {
it('should handle relative routing within parameterized routePaths', async () => {
const root = (
<MemoryRouter initialEntries={['/foo/blob/baz']}>
<React.Suspense fallback="loller">
<AppContextProvider appContext={appContext}>
<MemoryRouter initialEntries={['/foo/blob/baz']}>
<React.Suspense fallback="loller">
<Routes>
<Extension5 path="/foo/:id">
<Extension2 path="/bar" name="inside" routeRef={ref3} />
<Extension3 path="/baz" />
</Extension5>
</Routes>
<MockRouteSource name="outsideNoParams" routeRef={ref3} />
<MockRouteSource
name="outsideWithParams"
routeRef={ref3}
params={{ id: 'blob' }}
/>
</React.Suspense>
</MemoryRouter>
</AppContextProvider>
);
const rendered = render(withRoutingProvider(root));
await expect(
rendered.findByText('Path at inside: /foo/blob/baz'),
).resolves.toBeInTheDocument();
});
it('should throw errors for routing to other routeRefs with unsupported parameters', () => {
const root = (
<AppContextProvider appContext={appContext}>
<MemoryRouter initialEntries={['/']}>
<Routes>
<Extension5 path="/foo/:id">
<Extension2 path="/bar" name="inside" routeRef={ref3} />
@@ -250,33 +287,8 @@ describe('discovery', () => {
routeRef={ref3}
params={{ id: 'blob' }}
/>
</React.Suspense>
</MemoryRouter>
);
const rendered = render(withRoutingProvider(root));
await expect(
rendered.findByText('Path at inside: /foo/blob/baz'),
).resolves.toBeInTheDocument();
});
it('should throw errors for routing to other routeRefs with unsupported parameters', () => {
const root = (
<MemoryRouter initialEntries={['/']}>
<Routes>
<Extension5 path="/foo/:id">
<Extension2 path="/bar" name="inside" routeRef={ref3} />
<Extension3 path="/baz" />
</Extension5>
</Routes>
<MockRouteSource name="outsideNoParams" routeRef={ref3} />
<MockRouteSource
name="outsideWithParams"
routeRef={ref3}
params={{ id: 'blob' }}
/>
</MemoryRouter>
</MemoryRouter>
</AppContextProvider>
);
const rendered = render(withRoutingProvider(root));
@@ -295,13 +307,15 @@ describe('discovery', () => {
it('should handle relative routing of parameterized routePaths with duplicate param names', () => {
const root = (
<MemoryRouter>
<Routes>
<Extension5 path="/foo/:id">
<Extension4 path="/bar/:id" name="borked" routeRef={ref4} />
</Extension5>
</Routes>
</MemoryRouter>
<AppContextProvider appContext={appContext}>
<MemoryRouter>
<Routes>
<Extension5 path="/foo/:id">
<Extension4 path="/bar/:id" name="borked" routeRef={ref4} />
</Extension5>
</Routes>
</MemoryRouter>
</AppContextProvider>
);
const { routePaths, routeParents } = traverseElementTree({
packages/core/src/api-wrappers/createApp.tsx
+2
View File
@@ -30,6 +30,7 @@ import LightIcon from '@material-ui/icons/WbSunny';
import DarkIcon from '@material-ui/icons/Brightness2';
import { ErrorPage } from '../layout/ErrorPage';
import { Progress } from '../components/Progress';
import { ErrorBoundaryFallback } from '../components/ErrorBoundaryFallback';
import { defaultApis } from './defaultApis';
import { lightTheme, darkTheme } from '@backstage/theme';
import { AppConfig, JsonObject } from '@backstage/config';
@@ -130,6 +131,7 @@ export function createApp(options?: AppOptions) {
BootErrorPage: DefaultBootErrorPage,
Progress: Progress,
Router: BrowserRouter,
ErrorBoundaryFallback: ErrorBoundaryFallback,
...options?.components,
};
const themes = options?.themes ?? [
packages/core/src/components/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx
+41
View File
@@ -0,0 +1,41 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// TODO align this design with the backend errors
import React from 'react';
import { AppComponents } from '../..';
import { ResponseErrorPanel } from '../ResponseErrorPanel';
import { Button } from '@material-ui/core';
export const ErrorBoundaryFallback: AppComponents['ErrorBoundaryFallback'] = ({
error,
resetError,
plugin,
}) => {
return (
<ResponseErrorPanel
title={`Error in ${plugin.getId()}`}
defaultExpanded
error={error}
actions={
<Button variant="outlined" onClick={resetError}>
Retry
</Button>
}
/>
);
};
packages/core/src/components/ErrorBoundaryFallback/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { ErrorBoundaryFallback } from './ErrorBoundaryFallback';
packages/core/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx
+24 -4
View File
@@ -45,6 +45,7 @@ type ResponseErrorListProps = {
request?: string;
stack?: string;
json?: string;
actions?: React.ReactNode;
};
const ResponseErrorList = ({
@@ -53,6 +54,7 @@ const ResponseErrorList = ({
message,
stack,
json,
actions,
}: ResponseErrorListProps) => {
const classes = useStyles();
@@ -107,12 +109,21 @@ const ResponseErrorList = ({
</ListItem>
</>
)}
{actions && (
<>
<Divider component="li" className={classes.divider} />
<ListItem alignItems="flex-start">{actions}</ListItem>
</>
)}
</List>
);
};
type Props = {
error: Error;
defaultExpanded?: boolean;
title?: string;
actions?: React.ReactNode;
};
/**
@@ -121,13 +132,14 @@ type Props = {
* Has special treatment for ResponseError errors, to display rich
* server-provided information about what happened.
*/
export const ResponseErrorDetails = ({ error }: Props) => {
export const ResponseErrorDetails = ({ error, actions }: Props) => {
if (error.name !== 'ResponseError') {
return (
<ResponseErrorList
error={error.name}
message={error.message}
stack={error.stack}
actions={actions}
/>
);
}
@@ -158,10 +170,18 @@ export const ResponseErrorDetails = ({ error }: Props) => {
* Has special treatment for ResponseError errors, to display rich
* server-provided information about what happened.
*/
export const ResponseErrorPanel = ({ error }: Props) => {
export const ResponseErrorPanel = ({
title,
error,
defaultExpanded,
actions,
}: Props) => {
return (
<WarningPanel title={error.message}>
<ResponseErrorDetails error={error} />
<WarningPanel
title={title ?? error.message}
defaultExpanded={defaultExpanded}
>
<ResponseErrorDetails error={error} actions={actions} />
</WarningPanel>
);
};
packages/core/src/components/WarningPanel/WarningPanel.tsx
+3 -2
View File
@@ -77,6 +77,7 @@ type Props = {
title?: string;
severity?: 'warning' | 'error' | 'info';
message?: React.ReactNode;
defaultExpanded?: boolean;
children?: React.ReactNode;
};
@@ -96,14 +97,14 @@ const capitalize = (s: string) => {
*/
export const WarningPanel = (props: Props) => {
const classes = useStyles(props);
const { severity, title, message, children } = props;
const { severity, title, message, children, defaultExpanded } = props;
// If no severity or title provided, the heading will read simply "Warning"
const subTitle =
(severity ? capitalize(severity) : 'Warning') + (title ? `: ${title}` : '');
return (
<Accordion className={classes.panel}>
<Accordion defaultExpanded={defaultExpanded} className={classes.panel}>
<AccordionSummary
expandIcon={<ExpandMoreIconStyled />}
className={classes.summary}
packages/core/src/components/index.ts
+1
View File
@@ -23,6 +23,7 @@ export * from './CopyTextButton';
export * from './DependencyGraph';
export * from './DismissableBanner';
export * from './EmptyState';
export * from './ErrorBoundaryFallback';
export * from './ResponseErrorPanel';
export * from './FeatureDiscovery';
export * from './HeaderIconLinkRow';
packages/test-utils/src/testUtils/appWrappers.tsx
+1
View File
@@ -96,6 +96,7 @@ export function wrapInTestApp(
Router: ({ children }) => (
<MemoryRouter initialEntries={routeEntries} children={children} />
),
ErrorBoundaryFallback: () => null,
},
icons: defaultSystemIcons,
plugins: [],