Improve unfurler client-side error handling
This commit is contained in:
		
							parent
							
								
									54355b61d6
								
							
						
					
					
						commit
						0631f357b6
					
				@ -73,7 +73,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
                this.isLoadingAddress = false;
 | 
					                this.isLoadingAddress = false;
 | 
				
			||||||
                this.error = err;
 | 
					                this.error = err;
 | 
				
			||||||
                console.log(err);
 | 
					                console.log(err);
 | 
				
			||||||
                this.openGraphService.waitOver('address-data');
 | 
					                this.openGraphService.fail('address-data');
 | 
				
			||||||
                return of(null);
 | 
					                return of(null);
 | 
				
			||||||
              })
 | 
					              })
 | 
				
			||||||
            );
 | 
					            );
 | 
				
			||||||
@ -99,7 +99,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
          console.log(error);
 | 
					          console.log(error);
 | 
				
			||||||
          this.error = error;
 | 
					          this.error = error;
 | 
				
			||||||
          this.isLoadingAddress = false;
 | 
					          this.isLoadingAddress = false;
 | 
				
			||||||
          this.openGraphService.waitOver('address-data');
 | 
					          this.openGraphService.fail('address-data');
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      );
 | 
					      );
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
				
			|||||||
@ -80,8 +80,8 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
              }),
 | 
					              }),
 | 
				
			||||||
              catchError((err) => {
 | 
					              catchError((err) => {
 | 
				
			||||||
                this.error = err;
 | 
					                this.error = err;
 | 
				
			||||||
                this.openGraphService.waitOver('block-data');
 | 
					                this.openGraphService.fail('block-data');
 | 
				
			||||||
                this.openGraphService.waitOver('block-viz');
 | 
					                this.openGraphService.fail('block-viz');
 | 
				
			||||||
                return of(null);
 | 
					                return of(null);
 | 
				
			||||||
              }),
 | 
					              }),
 | 
				
			||||||
            );
 | 
					            );
 | 
				
			||||||
@ -116,7 +116,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
        .pipe(
 | 
					        .pipe(
 | 
				
			||||||
          catchError((err) => {
 | 
					          catchError((err) => {
 | 
				
			||||||
            this.overviewError = err;
 | 
					            this.overviewError = err;
 | 
				
			||||||
            this.openGraphService.waitOver('block-viz');
 | 
					            this.openGraphService.fail('block-viz');
 | 
				
			||||||
            return of([]);
 | 
					            return of([]);
 | 
				
			||||||
          }),
 | 
					          }),
 | 
				
			||||||
          switchMap((transactions) => {
 | 
					          switchMap((transactions) => {
 | 
				
			||||||
@ -136,8 +136,8 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
 | 
				
			|||||||
    (error) => {
 | 
					    (error) => {
 | 
				
			||||||
      this.error = error;
 | 
					      this.error = error;
 | 
				
			||||||
      this.isLoadingOverview = false;
 | 
					      this.isLoadingOverview = false;
 | 
				
			||||||
      this.openGraphService.waitOver('block-viz');
 | 
					      this.openGraphService.fail('block-viz');
 | 
				
			||||||
      this.openGraphService.waitOver('block-data');
 | 
					      this.openGraphService.fail('block-data');
 | 
				
			||||||
      if (this.blockGraph) {
 | 
					      if (this.blockGraph) {
 | 
				
			||||||
        this.blockGraph.destroy();
 | 
					        this.blockGraph.destroy();
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
				
			|||||||
@ -93,11 +93,18 @@ export class OpenGraphService {
 | 
				
			|||||||
    }
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  fail(event) {
 | 
				
			||||||
 | 
					    if (this.previewLoadingEvents[event]) {
 | 
				
			||||||
 | 
					      this.metaService.updateTag({ property: 'og:preview:fail', content: 'fail'});
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  resetLoading() {
 | 
					  resetLoading() {
 | 
				
			||||||
    this.previewLoadingEvents = {};
 | 
					    this.previewLoadingEvents = {};
 | 
				
			||||||
    this.previewLoadingCount = 0;
 | 
					    this.previewLoadingCount = 0;
 | 
				
			||||||
    this.metaService.removeTag("property='og:preview:loading'");
 | 
					    this.metaService.removeTag("property='og:preview:loading'");
 | 
				
			||||||
    this.metaService.removeTag("property='og:preview:ready'");
 | 
					    this.metaService.removeTag("property='og:preview:ready'");
 | 
				
			||||||
 | 
					    this.metaService.removeTag("property='og:preview:fail'");
 | 
				
			||||||
    this.metaService.removeTag("property='og:meta:ready'");
 | 
					    this.metaService.removeTag("property='og:meta:ready'");
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -102,10 +102,20 @@ class Server {
 | 
				
			|||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      const waitForReady = await page.$('meta[property="og:preview:loading"]');
 | 
					      const waitForReady = await page.$('meta[property="og:preview:loading"]');
 | 
				
			||||||
 | 
					      let success = true;
 | 
				
			||||||
      if (waitForReady != null) {
 | 
					      if (waitForReady != null) {
 | 
				
			||||||
        await page.waitForSelector('meta[property="og:preview:ready"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 });
 | 
					        success = await Promise.race([
 | 
				
			||||||
 | 
					          page.waitForSelector('meta[property="og:preview:ready"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => true),
 | 
				
			||||||
 | 
					          page.waitForSelector('meta[property="og:preview:fail"]', { timeout: config.PUPPETEER.RENDER_TIMEOUT || 3000 }).then(() => false)
 | 
				
			||||||
 | 
					        ])
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      if (success) {
 | 
				
			||||||
 | 
					        const screenshot = await page.screenshot();
 | 
				
			||||||
 | 
					        return screenshot;
 | 
				
			||||||
 | 
					      } else {
 | 
				
			||||||
 | 
					        console.log(`failed to render page preview for ${action} due to client-side error. probably requested an invalid ID`);
 | 
				
			||||||
 | 
					        page.repairRequested = true;
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      return page.screenshot();
 | 
					 | 
				
			||||||
    } catch (e) {
 | 
					    } catch (e) {
 | 
				
			||||||
      console.log(`failed to render page for ${action}`, e instanceof Error ? e.message : e);
 | 
					      console.log(`failed to render page for ${action}`, e instanceof Error ? e.message : e);
 | 
				
			||||||
      page.repairRequested = true;
 | 
					      page.repairRequested = true;
 | 
				
			||||||
@ -118,11 +128,11 @@ class Server {
 | 
				
			|||||||
      const img = await this.cluster?.execute({ url: this.mempoolHost + path, path: path, action: 'screenshot' });
 | 
					      const img = await this.cluster?.execute({ url: this.mempoolHost + path, path: path, action: 'screenshot' });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      if (!img) {
 | 
					      if (!img) {
 | 
				
			||||||
        throw new Error('failed to render preview image');
 | 
					        res.status(500).send('failed to render page preview');
 | 
				
			||||||
 | 
					      } else {
 | 
				
			||||||
 | 
					        res.contentType('image/png');
 | 
				
			||||||
 | 
					        res.send(img);
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					 | 
				
			||||||
      res.contentType('image/png');
 | 
					 | 
				
			||||||
      res.send(img);
 | 
					 | 
				
			||||||
    } catch (e) {
 | 
					    } catch (e) {
 | 
				
			||||||
      console.log(e);
 | 
					      console.log(e);
 | 
				
			||||||
      res.status(500).send(e instanceof Error ? e.message : e);
 | 
					      res.status(500).send(e instanceof Error ? e.message : e);
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user