diff --git a/packages/core/src/api/app/AppBuilder.tsx b/packages/core/src/api/app/AppBuilder.tsx
index ccc1303ccb..0af21f5c8d 100644
--- a/packages/core/src/api/app/AppBuilder.tsx
+++ b/packages/core/src/api/app/AppBuilder.tsx
@@ -21,6 +21,8 @@ import { App } from './types';
import BackstagePlugin from 'api/plugin/Plugin';
import { FeatureFlagsRegistryItem } from './FeatureFlags';
import { featureFlagsApiRef } from 'api/apis/definitions/featureFlags';
+import ErrorPage from '../../layout/ErrorPage';
+
import {
IconComponent,
SystemIcons,
@@ -115,7 +117,11 @@ export default class AppBuilder {
let rendered = (
{routes}
- 404 Not Found} />
+ (
+
+ )}
+ />
);
diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx
new file mode 100644
index 0000000000..1309fdf474
--- /dev/null
+++ b/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import ErrorPage from './ErrorPage';
+import { wrapInThemedTestApp } from '@backstage/test-utils';
+
+describe('', () => {
+ it('should render with status code, status message and go back link', () => {
+ const rendered = render(
+ wrapInThemedTestApp(
+ {} }}
+ />,
+ ),
+ );
+ rendered.getByText(/page not found/i);
+ rendered.getByText(/404/i);
+ rendered.getByText(/Looks like someone dropped the mic!/i);
+ expect(rendered.getByTestId('go-back-link')).toBeDefined();
+ });
+});
diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000000..ea593dbb49
--- /dev/null
+++ b/packages/core/src/layout/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { Typography, Link, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { BackstageTheme } from '@backstage/theme';
+import MicDrop from './MicDrop';
+
+interface IErrorPageProps {
+ status: string;
+ statusMessage: string;
+ history: {
+ goBack: () => void;
+ };
+}
+
+const useStyles = makeStyles(theme => ({
+ container: {
+ padding: theme.spacing(8),
+ },
+ title: {
+ paddingBottom: theme.spacing(5),
+ },
+ subtitle: {
+ color: theme.palette.textSubtle,
+ },
+}));
+
+const ErrorPage = ({ status, statusMessage, history }: IErrorPageProps) => {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ ERROR {status}: {statusMessage}
+
+
+ Looks like someone dropped the mic!
+
+
+
+ Go back
+
+ ... or if you think this is a bug, please file an{' '}
+ issue.
+
+
+
+ );
+};
+
+export default ErrorPage;
diff --git a/packages/core/src/layout/ErrorPage/MicDrop.js b/packages/core/src/layout/ErrorPage/MicDrop.js
new file mode 100644
index 0000000000..f951830574
--- /dev/null
+++ b/packages/core/src/layout/ErrorPage/MicDrop.js
@@ -0,0 +1,162 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+ micDrop: {
+ maxWidth: '60%',
+ bottom: 10,
+ right: 10,
+ position: 'absolute',
+ },
+});
+
+const MicDrop = () => {
+ const classes = useStyles();
+ return (
+
+ );
+};
+
+export default MicDrop;
diff --git a/packages/core/src/layout/ErrorPage/index.ts b/packages/core/src/layout/ErrorPage/index.ts
new file mode 100644
index 0000000000..872e5cce2d
--- /dev/null
+++ b/packages/core/src/layout/ErrorPage/index.ts
@@ -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 { default } from './ErrorPage';