show error and helpful message if plugin loading failed

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Repository names may not end with ".git" ([#1277](https://github.com/scm-manager/scm-manager/pull/1277))
+- Show error message if plugin loading failed ([#1289](https://github.com/scm-manager/scm-manager/pull/1289))
 
 ## [2.3.1] - 2020-08-04
 ### Added

scm-ui/ui-webapp/src/containers/PluginLoader.tsx

@@ -22,10 +22,11 @@
  * SOFTWARE.
  */
 import React, { ReactNode } from "react";
-import { apiClient, Loading } from "@scm-manager/ui-components";
+import { apiClient, Loading, ErrorNotification, ErrorBoundary, Icon } from "@scm-manager/ui-components";
 import { getUiPluginsLink } from "../modules/indexResource";
 import { connect } from "react-redux";
 import loadBundle from "./loadBundle";
+import styled from "styled-components";
 
 type Props = {
   loaded: boolean;
@@ -36,6 +37,8 @@ type Props = {
 
 type State = {
   message: string;
+  errorMessage?: string;
+  error?: Error;
 };
 
 type Plugin = {
@@ -43,6 +46,22 @@ type Plugin = {
   bundles: string[];
 };
 
+const BigIcon = styled(Icon)`
+  font-size: 10rem;
+`;
+
+const Centered = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const ErrorMessage = styled.span`
+  font-size: 20px;
+  margin: 1.5rem 0;
+`;
+
 class PluginLoader extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -96,14 +115,33 @@ class PluginLoader extends React.Component<Props, State> {
 
     const promises = [];
     for (const bundle of plugin.bundles) {
-      promises.push(loadBundle(bundle));
+      promises.push(
+        loadBundle(bundle).catch(error => this.setState({ error, errorMessage: `loading ${plugin.name} failed` }))
+      );
     }
     return Promise.all(promises);
   };
 
   render() {
     const { loaded } = this.props;
-    const { message } = this.state;
+    const { message, error, errorMessage } = this.state;
+
+    if (error) {
+      return (
+        <section className="section">
+          <div className="container">
+            <ErrorBoundary>
+              <Centered>
+                <BigIcon name="exclamation-triangle" color="danger" />
+                <ErrorMessage>{errorMessage}</ErrorMessage>
+              </Centered>
+              <ErrorNotification error={error} />
+            </ErrorBoundary>
+          </div>
+        </section>
+      );
+    }
+
     if (loaded) {
       return <div>{this.props.children}</div>;
     }