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