-
Notifications
You must be signed in to change notification settings - Fork 260
/
browser.js
431 lines (376 loc) · 11.6 KB
/
browser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
/*******************************************************************************
Highcharts Export Server
Copyright (c) 2016-2024, Highsoft
Licenced under the MIT licence.
Additionally a valid Highcharts license is required for use.
See LICENSE file in root for details.
*******************************************************************************/
import { readFileSync } from 'fs';
import path from 'path';
import puppeteer from 'puppeteer';
import { getCachePath } from './cache.js';
import { getOptions } from './config.js';
import { setupHighcharts } from './highcharts.js';
import { log, logWithStack } from './logger.js';
import { __dirname } from './utils.js';
import ExportError from './errors/ExportError.js';
// Get the template for the page
const template = readFileSync(__dirname + '/templates/template.html', 'utf8');
let browser;
/**
* Retrieves the existing Puppeteer browser instance.
*
* @returns {Promise<object>} A Promise resolving to the Puppeteer browser
* instance.
*
* @throws {ExportError} Throws an ExportError if no valid browser has been
* created.
*/
export function get() {
if (!browser) {
throw new ExportError('[browser] No valid browser has been created.');
}
return browser;
}
/**
* Creates a Puppeteer browser instance with the specified arguments.
*
* @param {Array} puppeteerArgs - Additional arguments for Puppeteer launch.
*
* @returns {Promise<object>} A Promise resolving to the Puppeteer browser
* instance.
*
* @throws {ExportError} Throws an ExportError if max retries to open a browser
* instance are reached, or if no browser instance is found after retries.
*/
export async function create(puppeteerArgs) {
// Get debug and other options
const { debug, other } = getOptions();
// Get the debug options
const { enable: enabledDebug, ...debugOptions } = debug;
const launchOptions = {
headless: other.browserShellMode ? 'shell' : true,
userDataDir: './tmp/',
args: puppeteerArgs,
handleSIGINT: false,
handleSIGTERM: false,
handleSIGHUP: false,
waitForInitialPage: false,
defaultViewport: null,
...(enabledDebug && debugOptions)
};
// Create a browser
if (!browser) {
let tryCount = 0;
const open = async () => {
try {
log(
3,
`[browser] Attempting to get a browser instance (try ${++tryCount}).`
);
browser = await puppeteer.launch(launchOptions);
} catch (error) {
logWithStack(
1,
error,
'[browser] Failed to launch a browser instance.'
);
// Retry to launch browser until reaching max attempts
if (tryCount < 25) {
log(3, `[browser] Retry to open a browser (${tryCount} out of 25).`);
await new Promise((response) => setTimeout(response, 4000));
await open();
} else {
throw error;
}
}
};
try {
await open();
// Shell mode inform
if (launchOptions.headless === 'shell') {
log(3, `[browser] Launched browser in shell mode.`);
}
// Debug mode inform
if (enabledDebug) {
log(3, `[browser] Launched browser in debug mode.`);
}
} catch (error) {
throw new ExportError(
'[browser] Maximum retries to open a browser instance reached.'
).setError(error);
}
if (!browser) {
throw new ExportError('[browser] Cannot find a browser to open.');
}
}
// Return a browser promise
return browser;
}
/**
* Closes the Puppeteer browser instance if it is connected.
*
* @returns {Promise<boolean>} A Promise resolving to true after the browser
* is closed.
*/
export async function close() {
// Close the browser when connnected
if (browser?.connected) {
await browser.close();
}
log(4, '[browser] Closed the browser.');
}
/**
* Creates a new Puppeteer Page within an existing browser instance.
*
* If the browser instance is not available, returns false.
*
* The function creates a new page, disables caching, sets content using
* setPageContent(), and returns the created Puppeteer Page.
*
* @returns {(boolean|object)} Returns false if the browser instance is not
* available, or a Puppeteer Page object representing the newly created page.
*/
export async function newPage() {
if (!browser) {
return false;
}
// Create a page
const page = await browser.newPage();
// Disable cache
await page.setCacheEnabled(false);
// Set the content
await setPageContent(page);
// Set page events
setPageEvents(page);
return page;
}
/**
* Clears the content of a Puppeteer Page based on the specified mode.
*
* @param {Object} page - The Puppeteer Page object to be cleared.
* @param {boolean} hardReset - A flag indicating the type of clearing
* to be performed. If true, navigates to 'about:blank' and resets content
* and scripts. If false, clears the body content by setting a predefined HTML
* structure.
*
* @throws {Error} Logs thrown error if clearing the page content fails.
*/
export async function clearPage(page, hardReset = false) {
try {
if (!page.isClosed()) {
if (hardReset) {
// Navigate to about:blank
await page.goto('about:blank', { waitUntil: 'domcontentloaded' });
// Set the content and and scripts again
await setPageContent(page);
} else {
// Clear body content
await page.evaluate(() => {
document.body.innerHTML =
'<div id="chart-container"><div id="container"></div></div>';
});
}
}
} catch (error) {
logWithStack(
2,
error,
'[browser] Could not clear the content of the page.'
);
}
}
/**
* Adds custom JS and CSS resources to a Puppeteer Page based on the specified
* options.
*
* @param {Object} page - The Puppeteer Page object to which resources will be
* added.
* @param {Object} options - All options and configuration.
*
* @returns {Promise<Array<Object>>} - Promise resolving to an array of injected
* resources.
*/
export async function addPageResources(page, options) {
// Injected resources array
const injectedResources = [];
// Use resources
const resources = options.customLogic.resources;
if (resources) {
const injectedJs = [];
// Load custom JS code
if (resources.js) {
injectedJs.push({
content: resources.js
});
}
// Load scripts from all custom files
if (resources.files) {
for (const file of resources.files) {
const isLocal = !file.startsWith('http') ? true : false;
// Add each custom script from resources' files
injectedJs.push(
isLocal
? {
content: readFileSync(file, 'utf8')
}
: {
url: file
}
);
}
}
for (const jsResource of injectedJs) {
try {
injectedResources.push(await page.addScriptTag(jsResource));
} catch (error) {
logWithStack(2, error, `[export] The JS resource cannot be loaded.`);
}
}
injectedJs.length = 0;
// Load CSS
const injectedCss = [];
if (resources.css) {
let cssImports = resources.css.match(/@import\s*([^;]*);/g);
if (cssImports) {
// Handle css section
for (let cssImportPath of cssImports) {
if (cssImportPath) {
cssImportPath = cssImportPath
.replace('url(', '')
.replace('@import', '')
.replace(/"/g, '')
.replace(/'/g, '')
.replace(/;/, '')
.replace(/\)/g, '')
.trim();
// Add each custom css from resources
if (cssImportPath.startsWith('http')) {
injectedCss.push({
url: cssImportPath
});
} else if (options.customLogic.allowFileResources) {
injectedCss.push({
path: path.join(__dirname, cssImportPath)
});
}
}
}
}
// The rest of the CSS section will be content by now
injectedCss.push({
content: resources.css.replace(/@import\s*([^;]*);/g, '') || ' '
});
for (const cssResource of injectedCss) {
try {
injectedResources.push(await page.addStyleTag(cssResource));
} catch (error) {
logWithStack(2, error, `[export] The CSS resource cannot be loaded.`);
}
}
injectedCss.length = 0;
}
}
return injectedResources;
}
/**
* Clears out all state set on the page with addScriptTag/addStyleTag. Removes
* injected resources and resets CSS and script tags on the page. Additionally,
* it destroys previously existing charts.
*
* @param {Object} page - The Puppeteer Page object from which resources will
* be cleared.
* @param {Array<Object>} injectedResources - Array of injected resources
* to be cleared.
*/
export async function clearPageResources(page, injectedResources) {
for (const resource of injectedResources) {
await resource.dispose();
}
// Destroy old charts after export is done and reset all CSS and script tags
await page.evaluate(() => {
// We are not guaranteed that Highcharts is loaded, e,g, when doing SVG
// exports
if (typeof Highcharts !== 'undefined') {
// eslint-disable-next-line no-undef
const oldCharts = Highcharts.charts;
// Check in any already existing charts
if (Array.isArray(oldCharts) && oldCharts.length) {
// Destroy old charts
for (const oldChart of oldCharts) {
oldChart && oldChart.destroy();
// eslint-disable-next-line no-undef
Highcharts.charts.shift();
}
}
}
// eslint-disable-next-line no-undef
const [...scriptsToRemove] = document.getElementsByTagName('script');
// eslint-disable-next-line no-undef
const [, ...stylesToRemove] = document.getElementsByTagName('style');
// eslint-disable-next-line no-undef
const [...linksToRemove] = document.getElementsByTagName('link');
// Remove tags
for (const element of [
...scriptsToRemove,
...stylesToRemove,
...linksToRemove
]) {
element.remove();
}
});
}
/**
* Sets the content for a Puppeteer Page using a predefined template
* and additional scripts. Also, sets the pageerror in order to catch
* and display errors from the window context.
*
* @param {Object} page - The Puppeteer Page object for which the content
* is being set.
*/
async function setPageContent(page) {
await page.setContent(template, { waitUntil: 'domcontentloaded' });
// Add all registered Higcharts scripts, quite demanding
await page.addScriptTag({ path: `${getCachePath()}/sources.js` });
// Set the initial animObject
await page.evaluate(setupHighcharts);
}
/**
* Set events for a Puppeteer Page.
*
* @param {Object} page - The Puppeteer Page object to set events to.
*/
function setPageEvents(page) {
// Get debug options
const { debug } = getOptions();
// Set the console listener, if needed
if (debug.enable && debug.listenToConsole) {
page.on('console', (message) => {
console.log(`[debug] ${message.text()}`);
});
}
// Set the pageerror listener
page.on('pageerror', async (error) => {
// TODO: Consider adding a switch here that turns on log(0) logging
// on page errors.
await page.$eval(
'#container',
(element, errorMessage) => {
// eslint-disable-next-line no-undef
if (window._displayErrors) {
element.innerHTML = errorMessage;
}
},
`<h1>Chart input data error: </h1>${error.toString()}`
);
});
}
export default {
get,
create,
close,
newPage,
clearPage,
addPageResources,
clearPageResources
};