Triggering Traces with Checkly

Checkly provides a better way to monitor your APIs and site click flows, by running a headless Chrome browser, controlled by the Puppeteer library, across multiple data centers to visit your website. Combined with Tideways, this allows you to automatically trigger a PHP profiler for your most important site functionality — even if its using complex JavaScript and Ajax requests.

The beauty of Checkly is that you only need to upload your Puppeteer scripts, written in JavaScript, and don’t have to deal with running a headless Chrome browser on your infrastructure.

And integration with Tideways requires very little; specifically:

  1. Log into your Checkly account and click on "Code Snippets" (<> Icon) in the left menu.

  2. Click on "+ ADD CODE SNIPPET"

  3. Create a snippet with the name "tideways_helpers" and the following code and save it.

    var crypto = require('crypto-js');
    
    const tideways_add_header = page => {
      if (typeof(process.env.TIDEWAYS_APIKEY) == 'undefined') {
        return
      }
    
      let time = (new Date(Date.now() + 1000*60*30).valueOf())
      let payload = 'method=&amp;time=' + time + '&amp;user='
      let apiKey = crypto.MD5(process.env.TIDEWAYS_APIKEY)
        .toString(crypto.enc.Hex)
      let hash = crypto.HmacSHA256(payload, apiKey)
    
      page.setExtraHTTPHeaders(
        {
          "X-Tideways-Profiler": "hash=" + hash.toString(crypto.enc.Hex) + "&amp;" + payload
        }
      );
    }
The snippet can be re-used across your browser checks.
  1. Create a new check to include the tideways_helpers snippet with the template syntax {{> tideways_helpers}}, and call the function tideways_add_header(page).

    Example of how to query a single page on example.com
    {{> tideways_helpers}}
    
    const puppeteer = require("puppeteer");
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // adds the necessary HTTP headers to trigger callgraphs on every request.
    await tideways_add_header(page);
    await page.goto("https://example.com");
    await browser.close();
  2. Open the "VARIABLES" tab in the check and add a new variable called "TIDEWAYS_APIKEY".

  3. Copy the Tideways API key from your application, and don’t forget to click Save Check.

image

The Checkly check will now generate callgraph traces on your page, whenever it is running.

Still need help? Email [email protected]