Merge pull request #820 from OpenKnowledgeMaps/bugfix/puppeteer-snapshots

snapshot bugfixes

Author: chreman

server/services/getChartSVG.js

@@ -6,12 +6,18 @@ function timeout(ms) {
 };
 
 (async() => {
-    const browser = await puppeteer.launch();
-    const page = await browser.newPage();
-    await page.setViewport({width: 1920, height: 1080})
-    await page.goto(process.argv[2], {waitUntil: 'networkidle2'});
-    await timeout(1000)
-    await page.screenshot({path: process.argv[3], clip: { x: 0, y: 0, width: 1150, height: 1080 }});
-    browser.close();
+    try {
+        const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
+        await timeout(1000)
+        const page = await browser.newPage();
+        await timeout(1000)
+        await page.setViewport({width: 1920, height: 1080})
+        await page.goto(process.argv[2], {waitUntil: 'networkidle2'});
+        await timeout(1000)
+        await page.screenshot({path: process.argv[3], clip: { x: 0, y: 0, width: 1150, height: 1080 }});
+        browser.close();
+    } catch (error) {
+        console.error('Error occurred while generating chart SVG:', error);
+    }
 
 })();

server/services/snapshot/headstart_snapshot.php

@@ -27,10 +27,40 @@
                 data_config.options = options_<?php echo htmlspecialchars($_GET['service']); ?>.dropdowns;
             }
         </script>
-        <script type="text/javascript" src="../../../dist/headstart.js"></script>
-        <link type="text/css" rel="stylesheet" href="../../../dist/headstart.css"></link>
+
+        <?php include "../../../dist/headstart.php"; ?>
+
+        <!-- The script below attempts to launch headstart by calling its start method.
+        However, because headstart loads asynchronously, it is necessary to wait some time. -->
         <script type="text/javascript">
-            headstart.start();
+            const DELAY_BETWEEN_ATTEMPTS_MS = 250;
+            const LIMIT_OF_ATTEMPTS = 10;
+            let numberOfAttempts = 0;
+
+            function checkThatInitializeMethodReady() {
+                return typeof headstart === "object" && typeof headstart.start === "function";
+            }
+
+            function initializeHeadstart() {
+                if (checkThatInitializeMethodReady()) {
+                    headstart.start();
+                    return;
+                }
+
+                if (numberOfAttempts < LIMIT_OF_ATTEMPTS) {
+                    let timerId = setTimeout(() => {
+                        clearTimeout(timerId);
+                        numberOfAttempts += 1;
+                        initializeHeadstart();
+                    }, DELAY_BETWEEN_ATTEMPTS_MS);
+
+                    return;
+                }
+
+                console.error("Unable to load headstart or its start method is not a function!");
+            }
+
+            document.addEventListener("DOMContentLoaded", initializeHeadstart);
         </script>
     </body>
 </html>