Handle IO errors in components.

src/component/NavigationComponent.ts

@@ -78,7 +78,14 @@ export class NavigationComponent extends Component<IComponentConfiguration> {
     private _createVNode(direction: EdgeDirection, name: string): vd.VNode {
         return vd.h(
             `span.Direction.Direction${name}`,
-            {onclick: (ev: Event): void => { this._navigator.moveDir(direction).first().subscribe(); }},
+            {
+                onclick: (ev: Event): void => {
+                    this._navigator.moveDir(direction)
+                        .subscribe(
+                            (node: Node): void => { return; },
+                            (error: Error): void => { console.error(error); });
+                },
+            },
             []);
     }
 }

src/component/direction/DirectionComponent.ts

@@ -137,7 +137,14 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
                     return node.spatialEdges$
                         .withLatestFrom(
                             configuration.distinguishSequence ?
-                                this._navigator.newGraphService.cacheSequence$(node.sequenceKey) :
+                                this._navigator.newGraphService
+                                    .cacheSequence$(node.sequenceKey)
+                                    .catch(
+                                        (error: Error, caught: Observable<Sequence>): Observable<Sequence> => {
+                                            console.error(`Failed to cache sequence (${node.sequenceKey})`, error);
+
+                                            return Observable.empty<Sequence>();
+                                        }) :
                                 Observable.of<Sequence>(null));
                 })
             .subscribe(

src/component/direction/DirectionDOMRenderer.ts

@@ -388,7 +388,12 @@ export class DirectionDOMRenderer {
         shiftVertically?: boolean): vd.VNode {
 
         let onClick: (e: Event) => void =
-            (e: Event): void => { navigator.moveToKey(key).subscribe(); };
+            (e: Event): void => {
+                navigator.moveToKey(key)
+                    .subscribe(
+                        (node: Node): void => { return; },
+                        (error: Error): void => { console.error(error); });
+            };
 
         return this._createVNode(
             key,
@@ -409,7 +414,12 @@ export class DirectionDOMRenderer {
         direction: EdgeDirection): vd.VNode {
 
         let onClick: (e: Event) => void =
-            (e: Event): void => { navigator.moveDir(direction).subscribe(); };
+            (e: Event): void => {
+                navigator.moveDir(direction)
+                    .subscribe(
+                        (node: Node): void => { return; },
+                        (error: Error): void => { console.error(error); });
+            };
 
         return this._createVNode(
             key,
@@ -428,7 +438,12 @@ export class DirectionDOMRenderer {
         direction: EdgeDirection): vd.VNode {
 
         let onClick: (e: Event) => void =
-            (e: Event): void => { navigator.moveDir(direction).subscribe(); };
+            (e: Event): void => {
+                navigator.moveDir(direction)
+                    .subscribe(
+                        (node: Node): void => { return; },
+                        (error: Error): void => { console.error(error); });
+            };
 
         let style: any = {
             height: this._calculator.turnCircleSizeCss,

src/component/imageplane/ImagePlaneComponent.ts

@@ -117,7 +117,38 @@ export class ImagePlaneComponent extends Component<IImagePlaneConfiguration> {
                 })
             .subscribe(this._rendererOperation$);
 
-        this._nodeSubscription = this._navigator.stateService.currentNode$
+        this._catchRecursively(this._highResRendererOperation(this._navigator.stateService.currentNode$))
+            .subscribe(this._rendererOperation$);
+    }
+
+    protected _deactivate(): void {
+        this._rendererDisposer$.next(null);
+
+        this._rendererSubscription.unsubscribe();
+        this._stateSubscription.unsubscribe();
+        this._nodeSubscription.unsubscribe();
+    }
+
+    protected _getDefaultConfiguration(): IImagePlaneConfiguration {
+        return { maxPanoramaResolution: "none" };
+    }
+
+    private _catchRecursively(source$: Observable<IImagePlaneGLRendererOperation>):
+        Observable<IImagePlaneGLRendererOperation> {
+        return source$
+            .catch(
+                (error: Error, caught: Observable<IImagePlaneGLRendererOperation>):
+                    Observable<IImagePlaneGLRendererOperation> => {
+                        console.error("Failed to fetch high res image", error);
+
+                        return this._catchRecursively(
+                            this._highResRendererOperation(
+                                this._navigator.stateService.currentNode$.skip(1)));
+                    });
+    }
+
+    private _highResRendererOperation(node$: Observable<Node>): Observable<IImagePlaneGLRendererOperation> {
+        return node$
             .debounceTime(1000)
             .withLatestFrom(
                 this._navigator.stateService.currentTransform$,
@@ -182,20 +213,7 @@ export class ImagePlaneComponent extends Component<IImagePlaneConfiguration> {
 
                         return renderer;
                     };
-                })
-            .subscribe(this._rendererOperation$);
-    }
-
-    protected _deactivate(): void {
-        this._rendererDisposer$.next(null);
-
-        this._rendererSubscription.unsubscribe();
-        this._stateSubscription.unsubscribe();
-        this._nodeSubscription.unsubscribe();
-    }
-
-    protected _getDefaultConfiguration(): IImagePlaneConfiguration {
-        return { maxPanoramaResolution: "none" };
+                });
     }
 }
 

src/component/sequence/SequenceComponent.ts

@@ -422,6 +422,7 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                     this._navigator.stateService.appendNodes([node]);
                 },
                 (error: Error): void => {
+                    console.error(error);
                     this.stop();
                 }
             );

src/component/sequence/SequenceDOMRenderer.ts

@@ -8,7 +8,7 @@ import {
     SequenceDOMInteraction,
 } from "../../Component";
 import {EdgeDirection} from "../../Edge";
-import {IEdgeStatus} from "../../Graph";
+import {IEdgeStatus, Node} from "../../Graph";
 import {Navigator} from "../../Viewer";
 
 export class SequenceDOMRenderer {
@@ -119,7 +119,12 @@ export class SequenceDOMRenderer {
 
         let nextProperties: vd.createProperties = {
             onclick: nextKey != null ?
-                (e: Event): void => { navigator.moveDir(EdgeDirection.Next).subscribe(); } :
+                (e: Event): void => {
+                    navigator.moveDir(EdgeDirection.Next)
+                        .subscribe(
+                            (node: Node): void => { return; },
+                            (error: Error): void => { console.error(error); });
+                } :
                 null,
             onmouseenter: (e: MouseEvent): void => { interaction.mouseEnterDirection$.next(EdgeDirection.Next); },
             onmouseleave: (e: MouseEvent): void => { interaction.mouseLeaveDirection$.next(EdgeDirection.Next); },
@@ -130,7 +135,12 @@ export class SequenceDOMRenderer {
 
         let prevProperties: vd.createProperties = {
             onclick: prevKey != null ?
-                (e: Event): void => { navigator.moveDir(EdgeDirection.Prev).subscribe(); } :
+                (e: Event): void => {
+                    navigator.moveDir(EdgeDirection.Prev)
+                        .subscribe(
+                            (node: Node): void => { return; },
+                            (error: Error): void => { console.error(error); });
+                } :
                 null,
             onmouseenter: (e: MouseEvent): void => { interaction.mouseEnterDirection$.next(EdgeDirection.Prev); },
             onmouseleave: (e: MouseEvent): void => { interaction.mouseLeaveDirection$.next(EdgeDirection.Prev); },

src/viewer/SpriteService.ts

@@ -216,6 +216,10 @@ export class SpriteService {
             image.src = window.URL.createObjectURL(blob);
         };
 
+        imageXmlHTTP.onerror = (error: Event) => {
+            console.error(new Error(`Failed to fetch sprite sheet (${sprite}${format}.png)`));
+        };
+
         imageXmlHTTP.send();
 
         let jsonXmlHTTP: XMLHttpRequest = new XMLHttpRequest();
@@ -232,6 +236,10 @@ export class SpriteService {
                     });
         };
 
+        jsonXmlHTTP.onerror = (error: Event) => {
+            console.error(new Error(`Failed to fetch sheet (${sprite}${format}.json)`));
+        };
+
         jsonXmlHTTP.send();
     }