Handle missing blocks/addresses in preview

frontend/src/app/components/address/address-preview.component.ts

@@ -73,6 +73,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
                 this.isLoadingAddress = false;
                 this.error = err;
                 console.log(err);
+                this.openGraphService.waitOver('address-data');
                 return of(null);
               })
             );
@@ -98,6 +99,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
           console.log(error);
           this.error = error;
           this.isLoadingAddress = false;
+          this.openGraphService.waitOver('address-data');
         }
       );
   }

frontend/src/app/components/block/block-preview.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise } from 'rxjs/operators';
+import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
 import { of, Subscription, asyncScheduler } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
@@ -54,6 +54,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
         const blockHash: string = params.get('id') || '';
         this.block = undefined;
         this.error = undefined;
+        this.overviewError = undefined;
         this.fees = undefined;
 
         let isBlockHeight = false;
@@ -70,13 +71,24 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
           return this.electrsApiService.getBlockHashFromHeight$(parseInt(blockHash, 10))
             .pipe(
               switchMap((hash) => {
+                if (hash) {
                   this.blockHash = hash;
                   return this.apiService.getBlock$(hash);
-              })
+                } else {
+                  return null;
+                }
+              }),
+              catchError((err) => {
+                this.error = err;
+                this.openGraphService.waitOver('block-data');
+                this.openGraphService.waitOver('block-viz');
+                return of(null);
+              }),
             );
         }
         return this.apiService.getBlock$(blockHash);
       }),
+      filter((block: BlockExtended | void) => block != null),
       tap((block: BlockExtended) => {
         this.block = block;
         this.blockHeight = block.height;
@@ -104,6 +116,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
         .pipe(
           catchError((err) => {
             this.overviewError = err;
+            this.openGraphService.waitOver('block-viz');
             return of([]);
           }),
           switchMap((transactions) => {
@@ -123,6 +136,8 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
     (error) => {
       this.error = error;
       this.isLoadingOverview = false;
+      this.openGraphService.waitOver('block-viz');
+      this.openGraphService.waitOver('block-data');
       if (this.blockGraph) {
         this.blockGraph.destroy();
       }

frontend/src/app/services/opengraph.service.ts

@@ -43,8 +43,10 @@ export class OpenGraphService {
       }
     });
 
-    // expose this service to global scope, so we can access it from the unfurler
+    // expose routing method to global scope, so we can access it from the unfurler
-    window['ogService'] = this;
+    window['ogService'] = {
+      loadPage: (path) => { return this.loadPage(path) }
+    };
   }
 
   setOgImage() {

unfurler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-unfurl",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Renderer for mempool open graph link preview images",
   "repository": {
     "type": "git",

unfurler/src/index.ts

@@ -193,11 +193,11 @@ class Server {
   getDefaultImageUrl() {
     switch (this.network) {
       case 'liquid':
-        return '/resources/liquid/liquid-network-preview.png';
+        return this.mempoolHost + '/resources/liquid/liquid-network-preview.png';
       case 'bisq':
-        return '/resources/bisq/bisq-markets-preview.png';
+        return this.mempoolHost + '/resources/bisq/bisq-markets-preview.png';
       default:
-        return '/resources/mempool-space-preview.png';
+        return this.mempoolHost + '/resources/mempool-space-preview.png';
     }
   }
 }