Server-Timing response headers for Apollo Server

This Apollo Server plugin aims to improve GraphQL observability characteristics by exposing resolver execution timing information to standard browser developer tools via HTTP response headers.

Caveat: This plugin has the potential to create large response headers; it's probably best to use as a development aid rather than indiscriminately in production.

This serialization of the resolver paths is inspired by @stipson's approach proposed here: apollographql/apollo-server#1490.

Quick start

Pre-requisites

• Node.js v8 LTS or higher
• Apollo Server v1.1.0 or higher (this plugin requires tracing: true for timing instrumentation)

Install the dependency:

npm i @jmandzik/apollo-server-plugin-server-timing

Register the plugin with your Apollo Server:

const ServerTimingPlugin = require("@jmandzik/apollo-server-plugin-server-timing");

const server = new ApolloServer({
  typeDefs,
  resolvers,
  // Tracing must be enabled for this plugin to add the headers
  tracing: true,
  // Register the plugin
  plugins: [ServerTimingPlugin]
});

Timing visualization

Chrome

Just a heads up, Chrome truncates metric names after 22 characters. Deeply nested paths or long query/field names will be difficult to disambiguate.

Safari

Safari does a better job and doesn't truncate.

JS API

Some interesting use cases here might be to send a Beacon request and log slow queries.

An example server can be run to see it in action:

git clone [email protected]:jmandzik/apollo-server-plugin-server-timing.git
cd apollo-server-plugin-server-timing
npm install
node example.js

Open up http://localhost:4000 and run the following query:

{
  books {
    title
    author
  }
  fastBook: book(id: 1) {
    title
    author
  }
  slowBook: book(id: 2) {
    title
    author
  }
  someReallyLongNameThat: book(id: 2) {
    title
    author
  }
}