Merge pull request #622 from highcharts/enhancement/dev-tools-protocol-limit

enhancement/dev-tools-protocol-limit

Author: cvasseng

CHANGELOG.md

@@ -11,7 +11,9 @@ _Fixes:_
 - Fixed an issue where the chart constructor was sometimes incorrectly set, causing the export to fail
 - Added referrers to CDN cache fetches on first startup/install. 
 - Fixed an issue that would sometimes cause cause a crash due to fail due to `Accept-Ranges` headers
--  Corrected the `Node.js Module` example in the README.
+- Wrapped the `clearPageResources` function in a try-catch to handle potential page resources errors.
+- Secured against errors caused by `dev-tools` protocol data size limitations.
+- Corrected the `Node.js Module` example in the README.
 - Fixed the warning message when the the default `resources.json` file is not found.
 - Fixed the problem with the lack of the `instr` value, when the `options` is set instead
 
@@ -20,7 +22,6 @@ _New Features:_
 - Added proxy authentication [(#631)](https://github.com/highcharts/node-export-server/issues/631).
 - Made the temporary Puppeteer directory (`PUPPETEER_TEMP_DIR`) (till now, `'./tmp'`) configurable by the user [(#567)](https://github.com/highcharts/node-export-server/issues/567).
 
-
 # 4.0.2
 
 _Hotfix_:

dist/index.cjs

@@ -331,45 +331,49 @@ export async function addPageResources(page, options) {
  * to be cleared.
  */
 export async function clearPageResources(page, injectedResources) {
-  for (const resource of injectedResources) {
-    await resource.dispose();
-  }
+  try {
+    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();
+    // 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();
-    }
-  });
+      // 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();
+      }
+    });
+  } catch (error) {
+    logWithStack(2, error, `[browser] Could not clear page's resources.`);
+  }
 }
 
 /**

dist/index.esm.js

@@ -128,8 +128,34 @@ const createSVG = (page) =>
  *
  * @returns {Promise<void>} Promise resolving after the configuration is set.
  */
-const setAsConfig = async (page, chart, options, displayErrors) =>
-  page.evaluate(triggerExport, chart, options, displayErrors);
+const setAsConfig = async (page, chart, options, displayErrors) => {
+  // Get rid of the redunant string data
+  options.export.instr = null;
+  options.export.infile = null;
+
+  // Get the size of the export input
+  const totalSize = Buffer.byteLength(
+    options.export?.strInj ? options.export?.strInj : JSON.stringify(chart),
+    'utf-8'
+  );
+
+  // Log the size in MB
+  log(
+    3,
+    `[export] The current total size of data passed to a page is around ${(
+      totalSize /
+      (1024 * 1024)
+    ).toFixed(2)} MB`
+  );
+
+  // Check the size of data passed to the page
+  if (totalSize >= 100 * 1024 * 1024) {
+    throw new ExportError(`[export] The data passed to a page exceeded 100MB.`);
+  }
+
+  // Trigger the Highcharts chart creation
+  return page.evaluate(triggerExport, chart, options, displayErrors);
+};
 
 /**
  * Exports to a chart from a page using Puppeteer.