spike: Tracing POC tool

[colinmurphy]

Overview

This requires further research into how we build a POC for adding custom headers to FE requests and subsequent GraphQL requests so a developer/admin can correlate these requests with backend requests when debugging performance issues.

Some considerations include building an initial POC package for Faust.js and making it framework agnostic.

We should also consider

• Have a unique UUID for all requests for that page
• Pass the CF Ray ID if using Cloudflare to subsequent GraphQL requests for that page

Outcomes for this task

The goal of this research task is:

1. Research and explore different approaches to building a tracing tool
2. Define what this tool should be (package, maybe it is a tutorial with a snippet of code)

[colinmurphy]

@wpengine/headless-open-source-contributors

This is as far as I got with experimenting with using Faust to add custom headers so far

import { FaustHooks } from "@faustwp/core";
import { HttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";


export class addCustomTracingPlugin {
  /**
   * @param {FaustHooks} hooks
   */
  apply(hooks) {
    const { addAction, addFilter } = hooks;

    addFilter(
      "apolloClientOptions",
      "wpengine-custom-name-apolloClientOptions",
      (apolloClientOptions) => {
        console.log("Custom tracing plugin applied");
        console.log("Apollo Client Options:", apolloClientOptions);
        const baseLink = apolloClientOptions.link || new HttpLink();

        const headerLink = setContext((_, { headers }) => {
          return {
            headers: {
              ...headers,
              'X-Custom-Tracing-ID': 'custom-tracing-id'
            }
          };
        });

        return {
          ...apolloClientOptions,
          link: headerLink.concat(baseLink)
        };
      }
    );
  }
}