diff --git a/karma.conf.js b/karma.conf.js index a9dc7af0..d87d3cb3 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -63,7 +63,7 @@ module.exports = function (config) { proxies: { '/tests/': '/base/tests/', - '/lib/components/Redoc/redoc-loading-styles.css': '/base/.tmp/lib/components/Redoc/redoc-loading-styles.css', + '/lib/components/Redoc/redoc-initial-styles.css': '/base/.tmp/lib/components/Redoc/redoc-initial-styles.css', '/lib/': '/base/lib/', '/jspm_packages/': '/base/jspm_packages/', '/node_modules/': '/base/node_modules/', diff --git a/lib/components/Redoc/redoc-loading-styles.scss b/lib/components/Redoc/redoc-initial-styles.scss similarity index 92% rename from lib/components/Redoc/redoc-loading-styles.scss rename to lib/components/Redoc/redoc-initial-styles.scss index a9da11a6..008b946d 100644 --- a/lib/components/Redoc/redoc-loading-styles.scss +++ b/lib/components/Redoc/redoc-initial-styles.scss @@ -48,3 +48,20 @@ redoc.loading:after { redoc.loading-remove:before, redoc.loading-remove:after { opacity: 0; } + +.redoc-error { + padding: 20px; + text-align: center; + color: #cc0000; + + > h2 { + color: #cc0000; + font-size: 40px; + } +} + +.redoc-error-details { + max-width: 750px; + margin: 0 auto; + font-size: 18px; +} diff --git a/lib/components/Redoc/redoc.js b/lib/components/Redoc/redoc.js index b7c43cb4..b30de6f7 100644 --- a/lib/components/Redoc/redoc.js +++ b/lib/components/Redoc/redoc.js @@ -15,7 +15,7 @@ import SchemaManager from '../../utils/SchemaManager'; import { OptionsService, RedocEventsService } from '../../services/index'; import detectScollParent from 'scrollparent'; -import './redoc-loading-styles.css!css'; +import './redoc-initial-styles.css!css'; var dom = new BrowserDomAdapter(); var _modeLocked = false; @@ -86,17 +86,15 @@ export class Redoc extends BaseComponent { } return bootstrap(Redoc, providers); }) - .then( - (appRef) => { - Redoc.hideLoadingAnimation(); - Redoc.appRef = appRef; - console.log('ReDoc bootstrapped!'); - }, - error => { - console.log(error); - throw error; - } - ); + .then(appRef => { + Redoc.hideLoadingAnimation(); + Redoc.appRef = appRef; + console.log('ReDoc bootstrapped!'); + }, err => { + console.log(err); + Redoc.hideLoadingAnimation(); + Redoc.displayError(err); + }); } static autoInit() { @@ -109,6 +107,17 @@ export class Redoc extends BaseComponent { } } + static displayError(err) { + console.log(err); + let redocEl = dom.query('redoc'); + let heading = 'Oops... ReDoc failed to render this spec'; + let details = err.message; + let erroHtml = `