fix(🐛): Handle page and snapshot errors (#562)

Sometimes, due to various reasons, the running browser might disconnect from Puppeteer during asset
discovery causing a `target closed` error. This error can happen anytime CDP sends a message to the
browser, such as enabling JS or setting viewport options. Since it is unhandled it can result in the
local server being unable to respond to requests which can then result in request timeouts.

src/services/agent-service.ts

@@ -7,7 +7,7 @@ import * as path from 'path'
 import { Configuration } from '../configuration/configuration'
 import { SnapshotConfiguration } from '../configuration/snapshot-configuration'
 import { SnapshotOptions } from '../percy-agent-client/snapshot-options'
-import logger, { createFileLogger, profile } from '../utils/logger'
+import logger, { createFileLogger, addLogDate, profile } from '../utils/logger'
 import { HEALTHCHECK_PATH, SNAPSHOT_PATH, STOP_PATH } from './agent-service-constants'
 import BuildService from './build-service'
 import Constants from './constants'
@@ -33,7 +33,14 @@ export class AgentService {
     this.app.use(bodyParser.json({ limit: '50mb' }))
     this.app.use(express.static(this.publicDirectory))
 
-    this.app.post(SNAPSHOT_PATH, this.handleSnapshot.bind(this))
+    this.app.post(SNAPSHOT_PATH, async (request, response) => {
+      try { await this.handleSnapshot.call(this, request, response) } catch (error) {
+        logger.error(addLogDate(`${error.name} ${error.message}`))
+        logger.debug(addLogDate(error))
+        return response.json({ success: false })
+      }
+    })
+
     this.app.post(STOP_PATH, this.handleStop.bind(this))
     this.app.get(HEALTHCHECK_PATH, this.handleHealthCheck.bind(this))
 

src/services/asset-discovery-service.ts

@@ -215,12 +215,6 @@ export class AssetDiscoveryService extends PercyClientService {
     profile('--> assetDiscoveryService.pool.acquire', { url: rootResourceUrl })
     const page = await pool.acquire()
     profile('--> assetDiscoveryService.pool.acquire')
-    await page.setJavaScriptEnabled(enableJavaScript)
-    await page.setViewport(Object.assign(page.viewport(), { width }))
-    await page.setExtraHTTPHeaders(merge.all([
-      this.configuration['request-headers'],
-      requestHeaders,
-    ]) as {})
 
     page.on('request', async (request) => {
       const requestUrl = request.url()
@@ -296,6 +290,13 @@ export class AssetDiscoveryService extends PercyClientService {
     let maybeResources: any[] = []
 
     try {
+      await page.setJavaScriptEnabled(enableJavaScript)
+      await page.setViewport(Object.assign(page.viewport(), { width }))
+      await page.setExtraHTTPHeaders(merge.all([
+        this.configuration['request-headers'],
+        requestHeaders,
+      ]) as {})
+
       profile('--> assetDiscoveryService.page.goto', { url: rootResourceUrl })
       await page.goto(rootResourceUrl)
       profile('--> assetDiscoveryService.page.goto')