Speed up unfurls by reusing puppeteer sessions
This commit is contained in:
Mononaut
parent
0257c83873
commit
fa51a1272a
@ -44,7 +44,6 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.openGraphService.setPreviewLoading();
|
||||
this.stateService.networkChanged$.subscribe((network) => this.network = network);
|
||||
|
||||
this.addressLoadingStatus$ = this.route.paramMap
|
||||
@ -56,6 +55,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
|
||||
this.mainSubscription = this.route.paramMap
|
||||
.pipe(
|
||||
switchMap((params: ParamMap) => {
|
||||
this.openGraphService.waitFor('address-data');
|
||||
this.error = undefined;
|
||||
this.isLoadingAddress = true;
|
||||
this.loadedConfirmedTxCount = 0;
|
||||
@ -90,7 +90,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
|
||||
this.address = address;
|
||||
this.updateChainStats();
|
||||
this.isLoadingAddress = false;
|
||||
this.openGraphService.setPreviewReady();
|
||||
this.openGraphService.waitOver('address-data');
|
||||
})
|
||||
)
|
||||
.subscribe(() => {},
|
||||
|
||||
@ -18,6 +18,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
|
||||
@Input() orientation = 'left';
|
||||
@Input() flip = true;
|
||||
@Output() txClickEvent = new EventEmitter<TransactionStripped>();
|
||||
@Output() readyEvent = new EventEmitter();
|
||||
|
||||
@ViewChild('blockCanvas')
|
||||
canvas: ElementRef<HTMLCanvasElement>;
|
||||
@ -37,6 +38,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
|
||||
selectedTx: TxView | void;
|
||||
tooltipPosition: Position;
|
||||
|
||||
readyNextFrame = false;
|
||||
|
||||
constructor(
|
||||
readonly ngZone: NgZone,
|
||||
readonly elRef: ElementRef,
|
||||
@ -78,6 +81,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
|
||||
setup(transactions: TransactionStripped[]): void {
|
||||
if (this.scene) {
|
||||
this.scene.setup(transactions);
|
||||
this.readyNextFrame = true;
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
@ -258,6 +262,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
|
||||
this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.readyNextFrame) {
|
||||
this.readyNextFrame = false;
|
||||
this.readyEvent.emit();
|
||||
}
|
||||
}
|
||||
|
||||
/* LOOP */
|
||||
|
||||
@ -30,44 +30,42 @@
|
||||
<td i18n="block.weight">Weight</td>
|
||||
<td [innerHTML]="'‎' + (block?.weight | wuBytes: 2)"></td>
|
||||
</tr>
|
||||
<ng-template [ngIf]="webGlEnabled">
|
||||
<tr *ngIf="block?.extras?.medianFee != undefined">
|
||||
<td class="td-width" i18n="block.median-fee">Median fee</td>
|
||||
<td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
|
||||
</tr>
|
||||
<ng-template [ngIf]="fees !== undefined">
|
||||
<tr>
|
||||
<td i18n="block.total-fees|Total fees in a block">Total fees</td>
|
||||
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
|
||||
<app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
|
||||
<tr *ngIf="block?.extras?.medianFee != undefined">
|
||||
<td class="td-width" i18n="block.median-fee">Median fee</td>
|
||||
<td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
|
||||
</tr>
|
||||
<ng-template [ngIf]="fees !== undefined">
|
||||
<tr>
|
||||
<td i18n="block.total-fees|Total fees in a block">Total fees</td>
|
||||
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
|
||||
<app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
|
||||
</td>
|
||||
<ng-template #liquidTotalFees>
|
||||
<td>
|
||||
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
|
||||
</td>
|
||||
<ng-template #liquidTotalFees>
|
||||
<td>
|
||||
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
|
||||
</td>
|
||||
</ng-template>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
|
||||
<td i18n="block.miner">Miner</td>
|
||||
<td *ngIf="stateService.env.MINING_DASHBOARD">
|
||||
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
|
||||
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
|
||||
{{ block?.extras.pool.name }}
|
||||
</a>
|
||||
</td>
|
||||
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
|
||||
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
|
||||
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
|
||||
{{ block?.extras.pool.name }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
|
||||
<td i18n="block.miner">Miner</td>
|
||||
<td *ngIf="stateService.env.MINING_DASHBOARD">
|
||||
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
|
||||
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
|
||||
{{ block?.extras.pool.name }}
|
||||
</a>
|
||||
</td>
|
||||
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
|
||||
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
|
||||
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
|
||||
{{ block?.extras.pool.name }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-sm chart-container" *ngIf="webGlEnabled">
|
||||
<div class="col-sm chart-container">
|
||||
<app-block-overview-graph
|
||||
#blockGraph
|
||||
[isLoading]="false"
|
||||
@ -75,7 +73,7 @@
|
||||
[blockLimit]="stateService.blockVSize"
|
||||
[orientation]="'top'"
|
||||
[flip]="false"
|
||||
(txClickEvent)="onTxClick($event)"
|
||||
(readyEvent)="onGraphReady()"
|
||||
></app-block-overview-graph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,153 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { BlockComponent } from './block.component';
|
||||
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 { of, Subscription, asyncScheduler } from 'rxjs';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { OpenGraphService } from 'src/app/services/opengraph.service';
|
||||
import { BlockExtended, TransactionStripped } from 'src/app/interfaces/node-api.interface';
|
||||
import { ApiService } from 'src/app/services/api.service';
|
||||
import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-block-preview',
|
||||
templateUrl: './block-preview.component.html',
|
||||
styleUrls: ['./block.component.scss', './block-preview.component.scss']
|
||||
styleUrls: ['./block-preview.component.scss']
|
||||
})
|
||||
export class BlockPreviewComponent extends BlockComponent {
|
||||
|
||||
export class BlockPreviewComponent implements OnInit, OnDestroy {
|
||||
network = '';
|
||||
block: BlockExtended;
|
||||
blockHeight: number;
|
||||
blockHash: string;
|
||||
isLoadingBlock = true;
|
||||
strippedTransactions: TransactionStripped[];
|
||||
overviewTransitionDirection: string;
|
||||
isLoadingOverview = true;
|
||||
error: any;
|
||||
blockSubsidy: number;
|
||||
fees: number;
|
||||
overviewError: any = null;
|
||||
|
||||
overviewSubscription: Subscription;
|
||||
networkChangedSubscription: Subscription;
|
||||
|
||||
@ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private electrsApiService: ElectrsApiService,
|
||||
public stateService: StateService,
|
||||
private seoService: SeoService,
|
||||
private openGraphService: OpenGraphService,
|
||||
private apiService: ApiService
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.network = this.stateService.network;
|
||||
|
||||
const block$ = this.route.paramMap.pipe(
|
||||
switchMap((params: ParamMap) => {
|
||||
this.openGraphService.waitFor('block-viz');
|
||||
this.openGraphService.waitFor('block-data');
|
||||
|
||||
const blockHash: string = params.get('id') || '';
|
||||
this.block = undefined;
|
||||
this.error = undefined;
|
||||
this.fees = undefined;
|
||||
|
||||
let isBlockHeight = false;
|
||||
if (/^[0-9]+$/.test(blockHash)) {
|
||||
isBlockHeight = true;
|
||||
} else {
|
||||
this.blockHash = blockHash;
|
||||
}
|
||||
|
||||
this.isLoadingBlock = true;
|
||||
this.isLoadingOverview = true;
|
||||
|
||||
if (isBlockHeight) {
|
||||
return this.electrsApiService.getBlockHashFromHeight$(parseInt(blockHash, 10))
|
||||
.pipe(
|
||||
switchMap((hash) => {
|
||||
this.blockHash = hash;
|
||||
return this.apiService.getBlock$(hash);
|
||||
})
|
||||
);
|
||||
}
|
||||
return this.apiService.getBlock$(blockHash);
|
||||
}),
|
||||
tap((block: BlockExtended) => {
|
||||
this.block = block;
|
||||
this.blockHeight = block.height;
|
||||
|
||||
this.seoService.setTitle($localize`:@@block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.id}:BLOCK_ID:`);
|
||||
this.isLoadingBlock = false;
|
||||
this.setBlockSubsidy();
|
||||
if (block?.extras?.reward !== undefined) {
|
||||
this.fees = block.extras.reward / 100000000 - this.blockSubsidy;
|
||||
}
|
||||
this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
|
||||
this.isLoadingOverview = true;
|
||||
this.overviewError = null;
|
||||
|
||||
this.openGraphService.waitOver('block-data');
|
||||
}),
|
||||
throttleTime(50, asyncScheduler, { leading: true, trailing: true }),
|
||||
shareReplay(1)
|
||||
);
|
||||
|
||||
this.overviewSubscription = block$.pipe(
|
||||
startWith(null),
|
||||
pairwise(),
|
||||
switchMap(([prevBlock, block]) => this.apiService.getStrippedBlockTransactions$(block.id)
|
||||
.pipe(
|
||||
catchError((err) => {
|
||||
this.overviewError = err;
|
||||
return of([]);
|
||||
}),
|
||||
switchMap((transactions) => {
|
||||
return of({ transactions, direction: 'down' });
|
||||
})
|
||||
)
|
||||
),
|
||||
)
|
||||
.subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => {
|
||||
this.strippedTransactions = transactions;
|
||||
this.isLoadingOverview = false;
|
||||
if (this.blockGraph) {
|
||||
this.blockGraph.destroy();
|
||||
this.blockGraph.setup(this.strippedTransactions);
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
this.error = error;
|
||||
this.isLoadingOverview = false;
|
||||
if (this.blockGraph) {
|
||||
this.blockGraph.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
this.networkChangedSubscription = this.stateService.networkChanged$
|
||||
.subscribe((network) => this.network = network);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.overviewSubscription) {
|
||||
this.overviewSubscription.unsubscribe();
|
||||
}
|
||||
if (this.networkChangedSubscription) {
|
||||
this.networkChangedSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
// TODO - Refactor this.fees/this.reward for liquid because it is not
|
||||
// used anymore on Bitcoin networks (we use block.extras directly)
|
||||
setBlockSubsidy() {
|
||||
this.blockSubsidy = 0;
|
||||
}
|
||||
|
||||
onGraphReady(): void {
|
||||
this.openGraphService.waitOver('block-viz');
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Injectable, NgZone } from '@angular/core';
|
||||
import { Meta } from '@angular/platform-browser';
|
||||
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
|
||||
import { filter, map, switchMap } from 'rxjs/operators';
|
||||
@ -12,8 +12,11 @@ import { LanguageService } from './language.service';
|
||||
export class OpenGraphService {
|
||||
network = '';
|
||||
defaultImageUrl = '';
|
||||
previewLoadingEvents = {};
|
||||
previewLoadingCount = 0;
|
||||
|
||||
constructor(
|
||||
private ngZone: NgZone,
|
||||
private metaService: Meta,
|
||||
private stateService: StateService,
|
||||
private LanguageService: LanguageService,
|
||||
@ -39,6 +42,9 @@ export class OpenGraphService {
|
||||
this.clearOgImage();
|
||||
}
|
||||
});
|
||||
|
||||
// expose this service to global scope, so we can access it from the unfurler
|
||||
window['ogService'] = this;
|
||||
}
|
||||
|
||||
setOgImage() {
|
||||
@ -59,13 +65,44 @@ export class OpenGraphService {
|
||||
this.metaService.updateTag({ property: 'og:image:height', content: '500' });
|
||||
}
|
||||
|
||||
/// signal that the unfurler should wait for a 'ready' signal before taking a screenshot
|
||||
setPreviewLoading() {
|
||||
this.metaService.updateTag({ property: 'og:loading', content: 'loading'});
|
||||
/// register an event that needs to resolve before we can take a screenshot
|
||||
waitFor(event) {
|
||||
if (!this.previewLoadingEvents[event]) {
|
||||
this.previewLoadingEvents[event] = 1;
|
||||
this.previewLoadingCount++;
|
||||
} else {
|
||||
this.previewLoadingEvents[event]++;
|
||||
}
|
||||
this.metaService.updateTag({ property: 'og:preview:loading', content: 'loading'});
|
||||
}
|
||||
|
||||
// signal to the unfurler that the page is ready for a screenshot
|
||||
setPreviewReady() {
|
||||
this.metaService.updateTag({ property: 'og:ready', content: 'ready'});
|
||||
// signal that an event has resolved
|
||||
// if all registered events have resolved, signal we are ready for a screenshot
|
||||
waitOver(event) {
|
||||
if (this.previewLoadingEvents[event]) {
|
||||
this.previewLoadingEvents[event]--;
|
||||
if (this.previewLoadingEvents[event] === 0) {
|
||||
delete this.previewLoadingEvents[event]
|
||||
this.previewLoadingCount--;
|
||||
}
|
||||
}
|
||||
if (this.previewLoadingCount === 0) {
|
||||
this.metaService.updateTag({ property: 'og:preview:ready', content: 'ready'});
|
||||
}
|
||||
}
|
||||
|
||||
resetLoading() {
|
||||
this.previewLoadingEvents = {};
|
||||
this.previewLoadingCount = 0;
|
||||
this.metaService.removeTag("property='og:preview:loading'");
|
||||
this.metaService.removeTag("property='og:preview:ready'");
|
||||
this.metaService.removeTag("property='og:meta:ready'");
|
||||
}
|
||||
|
||||
loadPage(path) {
|
||||
this.resetLoading();
|
||||
this.ngZone.run(() => {
|
||||
this.router.navigateByUrl(path);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,12 +21,14 @@ export class SeoService {
|
||||
this.titleService.setTitle(newTitle + ' - ' + this.getTitle());
|
||||
this.metaService.updateTag({ property: 'og:title', content: newTitle});
|
||||
this.metaService.updateTag({ property: 'twitter:title', content: newTitle});
|
||||
this.metaService.updateTag({ property: 'og:meta:ready', content: 'ready'});
|
||||
}
|
||||
|
||||
resetTitle(): void {
|
||||
this.titleService.setTitle(this.getTitle());
|
||||
this.metaService.updateTag({ property: 'og:title', content: this.getTitle()});
|
||||
this.metaService.updateTag({ property: 'twitter:title', content: this.getTitle()});
|
||||
this.metaService.updateTag({ property: 'og:meta:ready', content: 'ready'});
|
||||
}
|
||||
|
||||
setEnterpriseTitle(title: string) {
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
},
|
||||
"PUPPETEER": {
|
||||
"CLUSTER_SIZE": 2,
|
||||
"EXEC_PATH": "/usr/local/bin/chrome" // optional
|
||||
"EXEC_PATH": "/usr/local/bin/chrome", // optional
|
||||
"MAX_PAGE_AGE": 86400 // maximum lifetime of a page session (in seconds)
|
||||
}
|
||||
}
|
||||
|
||||
119
unfurler/src/concurrency/ReusablePage.ts
Normal file
119
unfurler/src/concurrency/ReusablePage.ts
Normal file
@ -0,0 +1,119 @@
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import ConcurrencyImplementation, { ResourceData } from 'puppeteer-cluster/dist/concurrency/ConcurrencyImplementation';
|
||||
import { timeoutExecute } from 'puppeteer-cluster/dist/util';
|
||||
|
||||
import config from '../config';
|
||||
const mempoolHost = config.MEMPOOL.HTTP_HOST + (config.MEMPOOL.HTTP_PORT ? ':' + config.MEMPOOL.HTTP_PORT : '');
|
||||
|
||||
const BROWSER_TIMEOUT = 5000;
|
||||
// maximum lifetime of a single page session
|
||||
const maxAgeMs = (config.PUPPETEER.MAX_PAGE_AGE || (24 * 60 * 60)) * 1000;
|
||||
|
||||
interface repairablePage extends puppeteer.Page {
|
||||
repairRequested?: boolean;
|
||||
}
|
||||
|
||||
export default class ReusablePage extends ConcurrencyImplementation {
|
||||
|
||||
protected browser: puppeteer.Browser | null = null;
|
||||
protected currentPage: repairablePage | null = null;
|
||||
protected pageCreatedAt: number = 0;
|
||||
private repairing: boolean = false;
|
||||
private repairRequested: boolean = false;
|
||||
private openInstances: number = 0;
|
||||
private waitingForRepairResolvers: (() => void)[] = [];
|
||||
|
||||
public constructor(options: puppeteer.LaunchOptions, puppeteer: any) {
|
||||
super(options, puppeteer);
|
||||
}
|
||||
|
||||
private async repair() {
|
||||
if (this.openInstances !== 0 || this.repairing) {
|
||||
// already repairing or there are still pages open? wait for start/finish
|
||||
await new Promise<void>(resolve => this.waitingForRepairResolvers.push(resolve));
|
||||
return;
|
||||
}
|
||||
|
||||
this.repairing = true;
|
||||
console.log('Starting repair');
|
||||
|
||||
try {
|
||||
// will probably fail, but just in case the repair was not necessary
|
||||
await (<puppeteer.Browser>this.browser).close();
|
||||
} catch (e) {
|
||||
console.log('Unable to close browser.');
|
||||
}
|
||||
|
||||
try {
|
||||
this.browser = await this.puppeteer.launch(this.options) as puppeteer.Browser;
|
||||
} catch (err) {
|
||||
throw new Error('Unable to restart chrome.');
|
||||
}
|
||||
this.currentPage = null;
|
||||
this.repairRequested = false;
|
||||
this.repairing = false;
|
||||
this.waitingForRepairResolvers.forEach(resolve => resolve());
|
||||
this.waitingForRepairResolvers = [];
|
||||
await this.createResources();
|
||||
}
|
||||
|
||||
public async init() {
|
||||
this.browser = await this.puppeteer.launch(this.options);
|
||||
}
|
||||
|
||||
public async close() {
|
||||
await (this.browser as puppeteer.Browser).close();
|
||||
}
|
||||
|
||||
protected async createResources(): Promise<ResourceData> {
|
||||
if (!this.currentPage) {
|
||||
this.currentPage = await (this.browser as puppeteer.Browser).newPage();
|
||||
this.pageCreatedAt = Date.now();
|
||||
const defaultUrl = mempoolHost + '/preview/block/1';
|
||||
this.currentPage.on('pageerror', (err) => {
|
||||
this.repairRequested = true;
|
||||
});
|
||||
await this.currentPage.goto(defaultUrl, { waitUntil: "load" });
|
||||
}
|
||||
return {
|
||||
page: this.currentPage
|
||||
}
|
||||
}
|
||||
|
||||
public async workerInstance() {
|
||||
let resources: ResourceData;
|
||||
|
||||
return {
|
||||
jobInstance: async () => {
|
||||
if (this.repairRequested || this.currentPage?.repairRequested) {
|
||||
await this.repair();
|
||||
}
|
||||
|
||||
await timeoutExecute(BROWSER_TIMEOUT, (async () => {
|
||||
resources = await this.createResources();
|
||||
})());
|
||||
this.openInstances += 1;
|
||||
|
||||
return {
|
||||
resources,
|
||||
|
||||
close: async () => {
|
||||
this.openInstances -= 1; // decrement first in case of error
|
||||
|
||||
if (this.repairRequested || this.currentPage?.repairRequested || (Date.now() - this.pageCreatedAt > maxAgeMs)) {
|
||||
await this.repair();
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
close: async () => {},
|
||||
|
||||
repair: async () => {
|
||||
console.log('Repair requested');
|
||||
this.repairRequested = true;
|
||||
await this.repair();
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,7 @@ interface IConfig {
|
||||
PUPPETEER: {
|
||||
CLUSTER_SIZE: number;
|
||||
EXEC_PATH?: string;
|
||||
MAX_PAGE_AGE?: number;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import { Application, Request, Response, NextFunction } from 'express';
|
||||
import * as http from 'http';
|
||||
import config from './config';
|
||||
import { Cluster } from 'puppeteer-cluster';
|
||||
import ReusablePage from './concurrency/ReusablePage';
|
||||
const puppeteerConfig = require('../puppeteer.config.json');
|
||||
|
||||
if (config.PUPPETEER.EXEC_PATH) {
|
||||
@ -32,7 +33,7 @@ class Server {
|
||||
;
|
||||
|
||||
this.cluster = await Cluster.launch({
|
||||
concurrency: Cluster.CONCURRENCY_CONTEXT,
|
||||
concurrency: ReusablePage,
|
||||
maxConcurrency: config.PUPPETEER.CLUSTER_SIZE,
|
||||
puppeteerOptions: puppeteerConfig,
|
||||
});
|
||||
@ -52,47 +53,40 @@ class Server {
|
||||
this.app.get('*', (req, res) => { return this.renderHTML(req, res) })
|
||||
}
|
||||
|
||||
async clusterTask({ page, data: { url, action } }) {
|
||||
await page.goto(url, { waitUntil: "networkidle0" });
|
||||
switch (action) {
|
||||
case 'screenshot': {
|
||||
await page.evaluate(async () => {
|
||||
// wait for all images to finish loading
|
||||
const imgs = Array.from(document.querySelectorAll("img"));
|
||||
await Promise.all([
|
||||
document.fonts.ready,
|
||||
...imgs.map((img) => {
|
||||
if (img.complete) {
|
||||
if (img.naturalHeight !== 0) return;
|
||||
throw new Error("Image failed to load");
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
img.addEventListener("load", resolve);
|
||||
img.addEventListener("error", reject);
|
||||
});
|
||||
}),
|
||||
]);
|
||||
});
|
||||
const waitForReady = await page.$('meta[property="og:loading"]');
|
||||
const alreadyReady = await page.$('meta[property="og:ready"]');
|
||||
if (waitForReady != null && alreadyReady == null) {
|
||||
try {
|
||||
await page.waitForSelector('meta[property="og:ready]"', { timeout: 10000 });
|
||||
} catch (e) {
|
||||
// probably timed out
|
||||
async clusterTask({ page, data: { url, path, action } }) {
|
||||
try {
|
||||
if (action === 'screenshot' || action === 'html') {
|
||||
const loaded = await page.evaluate(async (path) => {
|
||||
if (window['ogService']) {
|
||||
window['ogService'].loadPage(path);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}, path)
|
||||
|
||||
if (!loaded) {
|
||||
throw new Error('failed to access open graph service');
|
||||
}
|
||||
return page.screenshot();
|
||||
} break;
|
||||
default: {
|
||||
try {
|
||||
await page.waitForSelector('meta[property="og:title"]', { timeout: 10000 })
|
||||
const tag = await page.$('meta[property="og:title"]');
|
||||
} catch (e) {
|
||||
// probably timed out
|
||||
|
||||
if (action === 'screenshot') {
|
||||
const waitForReady = await page.$('meta[property="og:preview:loading"]');
|
||||
const alreadyReady = await page.$('meta[property="og:preview:ready"]');
|
||||
if (waitForReady != null && alreadyReady == null) {
|
||||
await page.waitForSelector('meta[property="og:preview:ready"]', { timeout: 8000 });
|
||||
}
|
||||
return page.screenshot();
|
||||
} else if (action === 'html') {
|
||||
const alreadyReady = await page.$('meta[property="og:meta:ready"]');
|
||||
if (alreadyReady == null) {
|
||||
await page.waitForSelector('meta[property="og:meta:ready"]', { timeout: 8000 });
|
||||
}
|
||||
return page.content();
|
||||
}
|
||||
return page.content();
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(`failed to render page for ${action}`, e instanceof Error ? e.message : e);
|
||||
page.repairRequested = true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,8 +94,11 @@ class Server {
|
||||
try {
|
||||
// strip default language code for compatibility
|
||||
const path = req.params[0].replace('/en/', '/');
|
||||
const img = await this.cluster?.execute({ url: this.mempoolHost + path, action: 'screenshot' });
|
||||
const img = await this.cluster?.execute({ url: this.mempoolHost + path, path: path, action: 'screenshot' });
|
||||
|
||||
if (!img) {
|
||||
throw new Error('failed to render preview image');
|
||||
}
|
||||
res.contentType('image/png');
|
||||
res.send(img);
|
||||
} catch (e) {
|
||||
@ -120,9 +117,14 @@ class Server {
|
||||
}
|
||||
|
||||
try {
|
||||
let html = await this.cluster?.execute({ url: this.mempoolHost + req.params[0], action: 'html' });
|
||||
// strip default language code for compatibility
|
||||
const path = req.params[0].replace('/en/', '/');
|
||||
|
||||
res.send(html)
|
||||
let html = await this.cluster?.execute({ url: this.mempoolHost + req.params[0], path: req.params[0], action: 'html' });
|
||||
if (!html) {
|
||||
throw new Error('failed to render preview image');
|
||||
}
|
||||
res.send(html);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
res.status(500).send(e instanceof Error ? e.message : e);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user