Improve unfurler client-side error handling

This commit is contained in:
Mononaut 2022-08-12 16:34:41 +00:00
parent 54355b61d6
commit 0631f357b6
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
4 changed files with 30 additions and 13 deletions

View File

@ -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');
} }
); );
} }

View File

@ -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();
} }

View File

@ -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'");
} }

View File

@ -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);