@graphcommerce/graphql 3.4.6 → 3.4.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 3.4.7
+
+### Patch Changes
+
+- Updated dependencies [[`860b4afc0`](https://github.com/graphcommerce-org/graphcommerce/commit/860b4afc0a2f79b1e660a5f9ce204532ce4fca47)]:
+  - @graphcommerce/graphql-codegen-near-operation-file@3.0.18
+
 ## 3.4.6
 
 ### Patch Changes

package/measurePerformanceLink.ts

@@ -1,8 +1,11 @@
 /* eslint-disable no-console */
+import { text } from 'stream/consumers'
 import { ApolloLink } from '@apollo/client'
 
-const slowOperationThreshold = 1000
-const slowResolverThreshold = 300
+const running = new Map<
+  string,
+  { start: Date; end?: Date; internalStart?: Date; operationName: string }
+>()
 
 interface TracingFormat {
   version: 1
@@ -21,46 +24,150 @@ interface TracingFormat {
   }
 }
 
+const renderLine = (line: {
+  serverStart: number
+  requestStart: number
+  requestEnd: number
+  colDivider: number
+  additional: string[]
+}) => {
+  const duration = line.requestEnd - line.requestStart
+  const serverDuration = duration - line.serverStart
+  const waitTime = duration - serverDuration
+
+  const reqStart = Math.floor(line.requestStart / line.colDivider)
+  const startSpacing = reqStart >= 1 ? ' '.repeat(reqStart) : ''
+
+  const waitDotsRound = Math.floor(waitTime / line.colDivider - 1)
+  const waitDots = waitDotsRound >= 1 ? `${'╌'.repeat(waitDotsRound)}` : ''
+
+  const dashrepeat = Math.floor(serverDuration / line.colDivider)
+
+  const dashes =
+    dashrepeat >= 1 ? `${waitDotsRound > 1 ? '┼' : ''}${'─'.repeat(dashrepeat - 1)}` : ''
+  const result = `${startSpacing}├${waitDots}${dashes}┤`
+
+  return ['', ...line.additional, result]
+}
+
+let timeout: NodeJS.Timeout | undefined
+const markTimeout = () => {
+  if (timeout) {
+    clearTimeout(timeout)
+  }
+  timeout = setTimeout(() => {
+    const entries = Array.from(running.entries())
+    if (!entries.every(([k, v]) => v.end)) return
+
+    /**
+     * Print to the console a timeline that gives a visual reprentation of the starting time and
+     * duration of each operation like so;
+     *
+     * ╞═════════ QueryOne (250ms) ═════════╡ ╞══════════════════ Query Two (450ms)
+     * ══════════════════╡ ╞═════════ QueryThree ═════════╡
+     */
+
+    let start = Number.MAX_VALUE
+    let end = 0
+    entries.forEach(([key, value]) => {
+      if (value.start.getTime() < start) start = value.start.getTime()
+      if (value.end && value.end.getTime() > end) end = value.end.getTime()
+    })
+    end -= start
+
+    const colDivider = Math.max(Math.floor(end / 150), 20)
+
+    const lines = entries.map(([key, value]) => {
+      const requestStart = value.start.getTime() - start
+      const requestEnd = value.end ? value.end.getTime() - start : 0
+      const duration = requestEnd - requestStart
+
+      const serverStart = value.internalStart
+        ? value.internalStart.getTime() - value.start.getTime()
+        : 0
+
+      return renderLine({
+        serverStart,
+        requestStart,
+        requestEnd,
+        additional: [
+          value.operationName,
+          `${duration - (duration - serverStart)}ms`,
+          `${duration - serverStart}ms`,
+        ],
+        colDivider,
+      })
+    })
+
+    const items = [
+      ['', 'GraphQL requests', 'Bootup', 'Mesh', 'Waterfall'],
+      ['', '', '', '', ''],
+      ...lines,
+      renderLine({
+        serverStart: 0,
+        requestStart: 0,
+        requestEnd: end,
+        additional: [`Total time`, '', `${end}ms`],
+        colDivider,
+      }),
+    ]
+
+    // Rewrite the above so it can handle abritraty columns
+    const colWidths: number[] = Array(items[0].length).fill(0)
+    items.forEach((item) => {
+      item.forEach((t, index) => {
+        colWidths[index] = Math.max(colWidths[index], t.length)
+      })
+    })
+
+    // padd the items to the max length
+    items.forEach((item) => {
+      item.forEach((t, index) => {
+        item[index] = `${item[index].padEnd(colWidths[index], ' ')}${
+          index !== item.length - 1 ? ` │ ` : ''
+        }`
+      })
+    })
+
+    // render the items to a string
+    const output = [[''], ...items].map((item) => item.join(' ')).join('\n')
+    console.log(output)
+
+    running.clear()
+  }, 1000)
+}
+
 /**
  * This doesn't work with the current implementation of the Apollo client. We're using SchemaLink
  * which doesn't support additional links.
  */
 export const measurePerformanceLink = new ApolloLink((operation, forward) => {
-  if (typeof global.window !== 'undefined') {
-    return forward(operation)
-  }
-  // Called before operation is sent to server
-  operation.setContext({ measurePerformanceLinkStart: new Date().valueOf() })
-  return forward(operation).map((data) => {
-    // Called after server responds
-    const time: number =
-      new Date().valueOf() - (operation.getContext().measurePerformanceLinkStart as number)
-    let vars =
+  if (typeof window === 'undefined') {
+    // Called before operation is sent to server
+    operation.setContext({ measurePerformanceLinkStart: new Date() })
+    const vars =
       Object.keys(operation.variables).length > 0 ? `(${JSON.stringify(operation.variables)})` : ''
-    if (vars.length > 100) {
-      vars = `${vars.substring(0, 100)}…`
-    }
-
-    if (data.extensions?.tracing && time > slowOperationThreshold) {
-      const tracing = data.extensions?.tracing as TracingFormat
-
-      const duration = Math.round(tracing.duration / (1000 * 1000))
-
-      console.group(`GraphQL slow query/mutation '${operation.operationName}'${vars}`)
-      console.info(`operations ${duration}ms, mesh: ${time - duration}ms`)
-
-      tracing.execution.resolvers
-        .filter((resolver) => resolver.duration > slowResolverThreshold * 1000 * 1000)
-        .forEach((resolver) =>
-          console.info(
-            `${operation.operationName}.${resolver.path.join('.')}[${Math.round(
-              resolver.duration / (1000 * 1000),
-            )}ms]`,
-          ),
-        )
-      console.groupEnd()
-    }
-
-    return data
-  })
+    const operationString = `${operation.operationName}${vars}`
+
+    running.set(operationString, { start: new Date(), operationName: operation.operationName })
+    markTimeout()
+
+    // console.info(`GraphQL start ${operationString}`)
+    return forward(operation).map((data) => {
+      const tracing = data.extensions?.tracing as TracingFormat | undefined
+
+      // Called after server responds
+      running.set(operationString, {
+        internalStart: tracing ? new Date(tracing.startTime) : undefined,
+        start: operation.getContext().measurePerformanceLinkStart as Date,
+        end: new Date(),
+        operationName: operation.operationName,
+      })
+
+      markTimeout()
+
+      return data
+    })
+  }
+  return forward(operation)
 })

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.9",
-    "@graphcommerce/graphql-codegen-near-operation-file": "3.0.17",
+    "@graphcommerce/graphql-codegen-near-operation-file": "3.0.18",
     "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "3.0.10",
     "@graphql-codegen/add": "3.2.1",
     "@graphql-codegen/fragment-matcher": "3.3.1",