fix(gatsby): Fix tracing so that everything happens under one span

packages/gatsby-plugin-manifest/src/gatsby-node.js

@@ -57,8 +57,13 @@ async function checkCache(cache, icon, srcIcon, srcIconDigest, callback) {
   }
 }
 
-exports.onPostBootstrap = async ({ reporter }, { localize, ...manifest }) => {
-  const activity = reporter.activityTimer(`Build manifest and related icons`)
+exports.onPostBootstrap = async (
+  { reporter, parentSpan },
+  { localize, ...manifest }
+) => {
+  const activity = reporter.activityTimer(`Build manifest and related icons`, {
+    parentSpan,
+  })
   activity.start()
 
   let cache = new Map()

packages/gatsby-plugin-sharp/src/__tests__/index.js

@@ -21,6 +21,22 @@ const {
 const { scheduleJob } = require(`../scheduler`)
 scheduleJob.mockResolvedValue(Promise.resolve())
 
+jest.mock(`gatsby-cli/lib/reporter`, () => {
+  return {
+    log: jest.fn(),
+    info: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+    activityTimer: () => {
+      return {
+        start: jest.fn(),
+        setStatus: jest.fn(),
+        end: jest.fn(),
+      }
+    },
+  }
+})
+
 describe(`gatsby-plugin-sharp`, () => {
   const args = {
     duotone: false,

packages/gatsby-transformer-remark/src/__tests__/extend-node.js

@@ -4,6 +4,22 @@ const extendNodeType = require(`../extend-node-type`)
 const { createContentDigest } = require(`gatsby-core-utils`)
 const { typeDefs } = require(`../create-schema-customization`)
 
+jest.mock(`gatsby-cli/lib/reporter`, () => {
+  return {
+    log: jest.fn(),
+    info: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+    activityTimer: () => {
+      return {
+        start: jest.fn(),
+        setStatus: jest.fn(),
+        end: jest.fn(),
+      }
+    },
+  }
+})
+
 // given a set of nodes and a query, return the result of the query
 async function queryResult(
   nodes,

packages/gatsby/src/bootstrap/index.js

@@ -117,7 +117,7 @@ module.exports = async (args: BootstrapArgs) => {
 
   const apis = await getLatestAPIs()
 
-  activity = report.activityTimer(`load plugins`)
+  activity = report.activityTimer(`load plugins`, { parentSpan: bootstrapSpan })
   activity.start()
   const flattenedPlugins = await loadPlugins(config, program.directory, apis)
   activity.end()
@@ -153,7 +153,9 @@ module.exports = async (args: BootstrapArgs) => {
     activity.end()
   }
 
-  activity = report.activityTimer(`initialize cache`)
+  activity = report.activityTimer(`initialize cache`, {
+    parentSpan: bootstrapSpan,
+  })
   activity.start()
   // Check if any plugins have been updated since our last run. If so
   // we delete the cache is there's likely been changes
@@ -365,9 +367,13 @@ module.exports = async (args: BootstrapArgs) => {
    */
 
   // onPreBootstrap
-  activity = report.activityTimer(`onPreBootstrap`)
+  activity = report.activityTimer(`onPreBootstrap`, {
+    parentSpan: bootstrapSpan,
+  })
   activity.start()
-  await apiRunnerNode(`onPreBootstrap`)
+  await apiRunnerNode(`onPreBootstrap`, {
+    parentSpan: activity.span,
+  })
   activity.end()
 
   // Source nodes
@@ -451,7 +457,7 @@ module.exports = async (args: BootstrapArgs) => {
     parentSpan: bootstrapSpan,
   })
   activity.start()
-  await extractQueries()
+  await extractQueries({ parentSpan: activity.span })
   activity.end()
 
   // Write out files.

packages/gatsby/src/commands/build-html.js

@@ -33,9 +33,11 @@ const doBuildRenderer = async (program, webpackConfig) => {
   return outputFile
 }
 
-const buildRenderer = async (program, stage) => {
+const buildRenderer = async (program, stage, { parentSpan }) => {
   const { directory } = program
-  const config = await webpackConfig(program, directory, stage, null)
+  const config = await webpackConfig(program, directory, stage, null, {
+    parentSpan,
+  })
   return await doBuildRenderer(program, config)
 }
 
@@ -120,7 +122,9 @@ const buildPages = async ({
   activity,
   workerPool,
 }) => {
-  const rendererPath = await buildRenderer(program, stage)
+  const rendererPath = await buildRenderer(program, stage, {
+    parentSpan: activity.span,
+  })
   await doBuildPages({ rendererPath, pagePaths, activity, workerPool })
   await deleteRenderer(rendererPath)
 }

packages/gatsby/src/commands/build-javascript.js

@@ -2,13 +2,15 @@
 const webpack = require(`webpack`)
 const webpackConfig = require(`../utils/webpack.config`)
 
-module.exports = async program => {
+module.exports = async (program, { parentSpan }) => {
   const { directory } = program
 
   const compilerConfig = await webpackConfig(
     program,
     directory,
-    `build-javascript`
+    `build-javascript`,
+    null,
+    { parentSpan }
   )
 
   return new Promise((resolve, reject) => {

packages/gatsby/src/commands/build.js

@@ -83,7 +83,9 @@ module.exports = async function build(program: BuildArgs) {
     { parentSpan: buildSpan }
   )
   activity.start()
-  const stats = await buildProductionBundle(program).catch(err => {
+  const stats = await buildProductionBundle(program, {
+    parentSpan: activity.span,
+  }).catch(err => {
     report.panic(handleWebpackError(`build-javascript`, err))
   })
   activity.end()
@@ -119,7 +121,9 @@ module.exports = async function build(program: BuildArgs) {
     activity.end()
   }
 
-  activity = report.activityTimer(`run page queries`)
+  activity = report.activityTimer(`run page queries`, {
+    parentSpan: buildSpan,
+  })
   activity.start()
   await queryUtil.processPageQueries(pageQueryIds, { activity })
   activity.end()

packages/gatsby/src/commands/develop.js

@@ -79,17 +79,18 @@ const waitJobsFinished = () =>
     onEndJob()
   })
 
-async function startServer(program) {
+async function startServer(program, { activity }) {
   const directory = program.directory
   const directoryPath = withBasePath(directory)
   const workerPool = WorkerPool.create()
-  const createIndexHtml = async () => {
+  const createIndexHtml = async ({ activity }) => {
     try {
       await buildHTML.buildPages({
         program,
         stage: `develop-html`,
         pagePaths: [`/`],
         workerPool,
+        activity,
       })
     } catch (err) {
       if (err.name !== `WebpackError`) {
@@ -107,13 +108,14 @@ async function startServer(program) {
     }
   }
 
-  await createIndexHtml()
+  await createIndexHtml({ activity })
 
   const devConfig = await webpackConfig(
     program,
     directory,
     `develop`,
-    program.port
+    program.port,
+    { parentSpan: activity.span }
   )
 
   const compiler = webpack(devConfig)
@@ -375,7 +377,10 @@ module.exports = async (program: any) => {
   queryUtil.startListening(queryQueue.createDevelopQueue())
   queryWatcher.startWatchDeletePage()
 
-  const [compiler] = await startServer(program)
+  activity = report.activityTimer(`start webpack server`)
+  activity.start()
+  const [compiler] = await startServer(program, { activity })
+  activity.end()
 
   function prepareUrls(protocol, host, port) {
     const formatUrl = hostname =>

packages/gatsby/src/internal-plugins/load-babel-config/gatsby-node.js

@@ -5,21 +5,25 @@ const fs = require(`fs-extra`)
 const apiRunnerNode = require(`../../utils/api-runner-node`)
 const { withBasePath } = require(`../../utils/path`)
 
-exports.onPreBootstrap = async ({ store }) => {
+exports.onPreBootstrap = async ({ store, parentSpan }) => {
   const { directory, browserslist } = store.getState().program
   const directoryPath = withBasePath(directory)
 
   await apiRunnerNode(`onCreateBabelConfig`, {
     stage: `develop`,
+    parentSpan,
   })
   await apiRunnerNode(`onCreateBabelConfig`, {
     stage: `develop-html`,
+    parentSpan,
   })
   await apiRunnerNode(`onCreateBabelConfig`, {
     stage: `build-javascript`,
+    parentSpan,
   })
   await apiRunnerNode(`onCreateBabelConfig`, {
     stage: `build-html`,
+    parentSpan,
   })
 
   const babelState = JSON.stringify(

packages/gatsby/src/query/file-parser.js

@@ -37,14 +37,15 @@ Perhaps the variable name has a typo?
 Also note that we are currently unable to use queries defined in files other than the file where the ${usageFunction} is defined. If you're attempting to import the query, please move it into "${file}". If being able to import queries from another file is an important capability for you, we invite your help fixing it.\n`
   )
 
-async function parseToAst(filePath, fileStr) {
+async function parseToAst(filePath, fileStr, { parentSpan } = {}) {
   let ast
 
   // Preprocess and attempt to parse source; return an AST if we can, log an
   // error if we can't.
   const transpiled = await apiRunnerNode(`preprocessSource`, {
     filename: filePath,
     contents: fileStr,
+    parentSpan: parentSpan,
   })
   if (transpiled && transpiled.length) {
     for (const item of transpiled) {
@@ -97,9 +98,13 @@ const warnForGlobalTag = file =>
       file
   )
 
-async function findGraphQLTags(file, text): Promise<Array<DefinitionNode>> {
+async function findGraphQLTags(
+  file,
+  text,
+  { parentSpan } = {}
+): Promise<Array<DefinitionNode>> {
   return new Promise((resolve, reject) => {
-    parseToAst(file, text)
+    parseToAst(file, text, { parentSpan })
       .then(ast => {
         let queries = []
         if (!ast) {
@@ -318,6 +323,10 @@ async function findGraphQLTags(file, text): Promise<Array<DefinitionNode>> {
 const cache = {}
 
 export default class FileParser {
+  constructor({ parentSpan } = {}) {
+    this.parentSpan = parentSpan
+  }
+
   async parseFile(file: string): Promise<?DocumentNode> {
     let text
     try {
@@ -339,7 +348,10 @@ export default class FileParser {
 
     try {
       let astDefinitions =
-        cache[hash] || (cache[hash] = await findGraphQLTags(file, text))
+        cache[hash] ||
+        (cache[hash] = await findGraphQLTags(file, text, {
+          parentSpan: this.parentSpan,
+        }))
 
       // If any AST definitions were extracted, report success.
       // This can mean there is none or there was a babel error when

packages/gatsby/src/query/query-compiler.js

@@ -81,10 +81,16 @@ class Runner {
   errors: string[]
   fragmentsDir: string
 
-  constructor(base: string, additional: string[], schema: GraphQLSchema) {
+  constructor(
+    base: string,
+    additional: string[],
+    schema: GraphQLSchema,
+    { parentSpan } = {}
+  ) {
     this.base = base
     this.additional = additional
     this.schema = schema
+    this.parentSpan = parentSpan
   }
 
   reportError(message) {
@@ -146,7 +152,7 @@ class Runner {
 
     files = _.uniq(files)
 
-    let parser = new FileParser()
+    let parser = new FileParser({ parentSpan: this.parentSpan })
 
     return await parser.parseFiles(files)
   }
@@ -364,7 +370,9 @@ class Runner {
 }
 export { Runner, resolveThemes }
 
-export default async function compile(): Promise<Map<string, RootQuery>> {
+export default async function compile({ parentSpan } = {}): Promise<
+  Map<string, RootQuery>
+> {
   // TODO: swap plugins to themes
   const { program, schema, themes, flattenedPlugins } = store.getState()
 
@@ -379,7 +387,8 @@ export default async function compile(): Promise<Map<string, RootQuery>> {
             }
           })
     ),
-    schema
+    schema,
+    { parentSpan }
   )
 
   const queries = await runner.compileAll()

packages/gatsby/src/query/query-watcher.js

@@ -95,9 +95,9 @@ const handleQuery = (
   return false
 }
 
-const updateStateAndRunQueries = isFirstRun => {
+const updateStateAndRunQueries = (isFirstRun, { parentSpan } = {}) => {
   const snapshot = getQueriesSnapshot()
-  return queryCompiler().then(queries => {
+  return queryCompiler({ parentSpan }).then(queries => {
     // If there's an error while extracting queries, the queryCompiler returns false
     // or zero results.
     // Yeah, should probably be an error but don't feel like threading the error
@@ -184,14 +184,14 @@ const clearInactiveComponents = () => {
   })
 }
 
-exports.extractQueries = () => {
+exports.extractQueries = ({ parentSpan } = {}) => {
   // Remove template components that point to not existing page templates.
   // We need to do this, because components data is cached and there might
   // be changes applied when development server isn't running. This is needed
   // only in initial run, because during development state will be adjusted.
   clearInactiveComponents()
 
-  return updateStateAndRunQueries(true).then(() => {
+  return updateStateAndRunQueries(true, { parentSpan }).then(() => {
     // During development start watching files to recompile & run
     // queries on the fly.
     if (process.env.NODE_ENV !== `production`) {