mirror of
https://github.com/Redocly/redoc.git
synced 2025-01-31 18:14:07 +03:00
Redoc error handler refactor
This commit is contained in:
parent
c95755718f
commit
44cd7784aa
|
@ -1,15 +1,18 @@
|
||||||
@import url('//fonts.googleapis.com/css?family=Roboto:300,400,700');
|
@import url('//fonts.googleapis.com/css?family=Roboto:300,400,700');
|
||||||
@import url('//fonts.googleapis.com/css?family=Montserrat:400,700');
|
@import url('//fonts.googleapis.com/css?family=Montserrat:400,700');
|
||||||
|
|
||||||
redoc.loading {
|
:host.loading {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
min-height:350px;
|
min-height: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rotate {
|
@keyframes rotate {
|
||||||
0% {transform: rotate(0deg)}
|
0% {
|
||||||
100% {transform: rotate(360deg)}
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
redoc.loading:before {
|
redoc.loading:before {
|
||||||
|
@ -33,7 +36,7 @@ redoc.loading:before {
|
||||||
}
|
}
|
||||||
|
|
||||||
redoc.loading:after {
|
redoc.loading:after {
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512" height="512" viewBox="0 0 512 512"><g></g><path d="M275.682 147.999c0 10.864-8.837 19.661-19.682 19.661v0c-10.875 0-19.681-8.796-19.681-19.661v-96.635c0-10.885 8.806-19.661 19.681-19.661v0c10.844 0 19.682 8.776 19.682 19.661v96.635z" fill="#0033a0"/><path d="M275.682 460.615c0 10.865-8.837 19.682-19.682 19.682v0c-10.875 0-19.681-8.817-19.681-19.682v-96.604c0-10.885 8.806-19.681 19.681-19.681v0c10.844 0 19.682 8.796 19.682 19.682v96.604z" fill="#0033a0"/><path d="M147.978 236.339c10.885 0 19.681 8.755 19.681 19.641v0c0 10.885-8.796 19.702-19.681 19.702h-96.624c-10.864 0-19.661-8.817-19.661-19.702v0c0-10.885 8.796-19.641 19.661-19.641h96.624z" fill="#0033a0"/><path d="M460.615 236.339c10.865 0 19.682 8.755 19.682 19.641v0c0 10.885-8.817 19.702-19.682 19.702h-96.584c-10.885 0-19.722-8.817-19.722-19.702v0c0-10.885 8.837-19.641 19.722-19.641h96.584z" fill="#0033a0"/><path d="M193.546 165.703c7.69 7.66 7.68 20.142 0 27.822v0c-7.701 7.701-20.162 7.701-27.853 0.020l-68.311-68.322c-7.68-7.701-7.68-20.142 0-27.863v0c7.68-7.68 20.121-7.68 27.822 0l68.342 68.342z" fill="#0033a0"/><path d="M414.597 386.775c7.7 7.68 7.7 20.163 0.021 27.863v0c-7.7 7.659-20.142 7.659-27.843-0.062l-68.311-68.26c-7.68-7.7-7.68-20.204 0-27.863v0c7.68-7.7 20.163-7.7 27.842 0l68.291 68.322z" fill="#0033a0"/><path d="M165.694 318.464c7.69-7.7 20.153-7.7 27.853 0v0c7.68 7.659 7.69 20.163 0 27.863l-68.342 68.322c-7.67 7.659-20.142 7.659-27.822-0.062v0c-7.68-7.68-7.68-20.122 0-27.801l68.311-68.322z" fill="#0033a0"/><path d="M386.775 97.362c7.7-7.68 20.142-7.68 27.822 0v0c7.7 7.68 7.7 20.183 0.021 27.863l-68.322 68.311c-7.68 7.68-20.163 7.68-27.843-0.020v0c-7.68-7.68-7.68-20.162 0-27.822l68.322-68.332z" fill="#0033a0"/></svg>');
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512" height="512" viewBox="0 0 512 512"><g></g><path d="M275.682 147.999c0 10.864-8.837 19.661-19.682 19.661v0c-10.875 0-19.681-8.796-19.681-19.661v-96.635c0-10.885 8.806-19.661 19.681-19.661v0c10.844 0 19.682 8.776 19.682 19.661v96.635z" fill="#0033a0"/><path d="M275.682 460.615c0 10.865-8.837 19.682-19.682 19.682v0c-10.875 0-19.681-8.817-19.681-19.682v-96.604c0-10.885 8.806-19.681 19.681-19.681v0c10.844 0 19.682 8.796 19.682 19.682v96.604z" fill="#0033a0"/><path d="M147.978 236.339c10.885 0 19.681 8.755 19.681 19.641v0c0 10.885-8.796 19.702-19.681 19.702h-96.624c-10.864 0-19.661-8.817-19.661-19.702v0c0-10.885 8.796-19.641 19.661-19.641h96.624z" fill="#0033a0"/><path d="M460.615 236.339c10.865 0 19.682 8.755 19.682 19.641v0c0 10.885-8.817 19.702-19.682 19.702h-96.584c-10.885 0-19.722-8.817-19.722-19.702v0c0-10.885 8.837-19.641 19.722-19.641h96.584z" fill="#0033a0"/><path d="M193.546 165.703c7.69 7.66 7.68 20.142 0 27.822v0c-7.701 7.701-20.162 7.701-27.853 0.020l-68.311-68.322c-7.68-7.701-7.68-20.142 0-27.863v0c7.68-7.68 20.121-7.68 27.822 0l68.342 68.342z" fill="#0033a0"/><path d="M414.597 386.775c7.7 7.68 7.7 20.163 0.021 27.863v0c-7.7 7.659-20.142 7.659-27.843-0.062l-68.311-68.26c-7.68-7.7-7.68-20.204 0-27.863v0c7.68-7.7 20.163-7.7 27.842 0l68.291 68.322z" fill="#0033a0"/><path d="M165.694 318.464c7.69-7.7 20.153-7.7 27.853 0v0c7.68 7.659 7.69 20.163 0 27.863l-68.342 68.322c-7.67 7.659-20.142 7.659-27.822-0.062v0c-7.68-7.68-7.68-20.122 0-27.801l68.311-68.322z" fill="#0033a0"/><path d="M386.775 97.362c7.7-7.68 20.142-7.68 27.822 0v0c7.7 7.68 7.7 20.183 0.021 27.863l-68.322 68.311c-7.68 7.68-20.163 7.68-27.843-0.020v0c-7.68-7.68-7.68-20.162 0-27.822l68.322-68.332z" fill="#0033a0"/></svg>');
|
||||||
animation: 2s rotate linear infinite;
|
animation: 2s rotate linear infinite;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
@ -51,20 +54,3 @@ redoc.loading:after {
|
||||||
redoc.loading-remove:before, redoc.loading-remove:after {
|
redoc.loading-remove:before, redoc.loading-remove:after {
|
||||||
opacity: 0;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="redoc-error" *ngIf="error">
|
<div class="redoc-error" *ngIf="error">
|
||||||
<h1>Oops... ReDoc failed to render this spec</h1>
|
<h1>Oops... ReDoc failed to render this spec</h1>
|
||||||
<div class='redoc-error-details'>{{_error.message}}</div>
|
<div class='redoc-error-details'>{{error.message}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="redoc-wrap" *ngIf="specLoaded && !error">
|
<div class="redoc-wrap" *ngIf="specLoaded && !error">
|
||||||
<div class="menu-content" sticky-sidebar [scrollParent]="options.$scrollParent" [scrollYOffset]="options.scrollYOffset">
|
<div class="menu-content" sticky-sidebar [scrollParent]="options.$scrollParent" [scrollYOffset]="options.scrollYOffset">
|
||||||
|
|
|
@ -256,3 +256,19 @@ footer {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
|
@ -82,8 +82,14 @@ export class Redoc extends BaseComponent implements OnInit {
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.appState.error.subscribe(_err => {
|
this.appState.error.subscribe(_err => {
|
||||||
this.error = _err;
|
// do not show errors that occuered after spec has been already loaded
|
||||||
this.changeDetector.detectChanges();
|
// TODO: change this in future to show in e.g. popup
|
||||||
|
//if (this.specLoaded) return;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.error = _err;
|
||||||
|
this.changeDetector.detectChanges()
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
if (this.specUrl) {
|
if (this.specUrl) {
|
||||||
|
|
|
@ -2,11 +2,12 @@ import { ErrorHandler, Injectable } from '@angular/core';
|
||||||
import { AppStateService } from '../services/app-state.service';
|
import { AppStateService } from '../services/app-state.service';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class CustomErrorHandler implements ErrorHandler {
|
export class CustomErrorHandler extends ErrorHandler {
|
||||||
constructor(private appState: AppStateService) {
|
constructor(private appState: AppStateService) {
|
||||||
|
super(true);
|
||||||
}
|
}
|
||||||
handleError(error) {
|
handleError(error) {
|
||||||
console.log(error);
|
|
||||||
this.appState.error.next(error);
|
this.appState.error.next(error);
|
||||||
|
super.handleError(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user