feat(gatsby-admin): track plugin telemetry (#26885)

* Set up first service exposing gatsby-telemetry

* Run background updates

* Move telemetry server to gatsby package

* Add body-parser dependency

* Start telemetry server on gatsby develop (#26853)

* Revert "Start telemetry server on gatsby develop (#26853)"

This reverts commit 5febd35.

* Revert "Revert "Start telemetry server on gatsby develop (#26853)""

This reverts commit 08bb027.

* Track first telemetry from Admin

* Update telemetry-server.ts

Author: mxstbr

packages/gatsby-admin/gatsby-config.js

@@ -2,7 +2,10 @@ module.exports = {
   plugins: [
     {
       resolve: "gatsby-plugin-react-helmet",
-      options: {},
+      options: {
+        test: true,
+        bla: false,
+      },
     },
     {
       resolve: "gatsby-plugin-webfonts",

packages/gatsby-admin/src/components/providers.tsx

@@ -2,9 +2,10 @@ import React from "react"
 import { Provider, Client } from "urql"
 import { ThemeProvider, getTheme } from "gatsby-interface"
 import { ThemeProvider as StrictUIProvider } from "strict-ui"
-import { Spinner, merge } from "theme-ui"
+import { merge } from "theme-ui"
 import { createUrqlClient } from "../urql-client"
 import "normalize.css"
+import { ServicesProvider, useServices } from "./services-provider"
 
 const baseTheme = getTheme()
 
@@ -132,22 +133,18 @@ const theme = merge(recipesTheme, {
 })
 
 const GraphQLProvider: React.FC<{}> = ({ children }) => {
-  const [status, setStatus] = React.useState(`loading`)
-  const [client, setClient] = React.useState<Client | null>(null)
+  const services = useServices()
+  const [client, setClient] = React.useState<Client | null>(() =>
+    services
+      ? createUrqlClient({ port: services.recipesgraphqlserver.port })
+      : null
+  )
 
   React.useEffect(() => {
-    setStatus(`loading`)
-    fetch(`/___services`)
-      .then(res => res.json())
-      .then(json => {
-        setStatus(`idle`)
-        if (json.recipesgraphqlserver) {
-          setClient(createUrqlClient({ port: json.recipesgraphqlserver.port }))
-        }
-      })
-  }, [])
-
-  if (status === `loading`) return <Spinner />
+    if (services.recipesgraphqlserver) {
+      setClient(createUrqlClient({ port: services.recipesgraphqlserver.port }))
+    }
+  }, [services])
 
   if (client === null)
     return (
@@ -163,7 +160,10 @@ const GraphQLProvider: React.FC<{}> = ({ children }) => {
 const Providers: React.FC<{}> = ({ children }) => (
   <StrictUIProvider theme={theme}>
     <ThemeProvider theme={theme}>
-      <GraphQLProvider>{children}</GraphQLProvider>
+      {/* NOTE(@mxstbr): The GraphQLProvider needs to be in the ServicesProvider */}
+      <ServicesProvider>
+        <GraphQLProvider>{children}</GraphQLProvider>
+      </ServicesProvider>
     </ThemeProvider>
   </StrictUIProvider>
 )

packages/gatsby-admin/src/components/services-provider.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, useEffect } from "react"
+import { Spinner } from "theme-ui"
+
+type Services = Record<string, any>
+
+const ServicesContext = createContext<Services>({})
+
+export function ServicesProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): JSX.Element {
+  const [status, setStatus] = useState<"loading" | "idle">(`loading`)
+  const [services, setServices] = useState<Services>({})
+
+  useEffect(() => {
+    setStatus(`loading`)
+    fetch(`/___services`)
+      .then(res => res.json())
+      .then((json: Services) => {
+        setServices(json)
+        setStatus(`idle`)
+      })
+  }, [])
+
+  if (status === `loading`) return <Spinner />
+
+  return (
+    <ServicesContext.Provider value={services}>
+      {children}
+    </ServicesContext.Provider>
+  )
+}
+
+export const useServices = (): Services => useContext(ServicesContext)

packages/gatsby-admin/src/pages/plugins.tsx

@@ -25,6 +25,7 @@ import prismThemeCss from "../prism-theme"
 import gitHubIcon from "../github.svg"
 import isOfficialPackage from "../../../../www/src/utils/is-official-package"
 import GatsbyIcon from "../../../../www/src/components/gatsby-monogram"
+import { useTelemetry } from "../utils/use-telemetry"
 
 const markdownRenderers = {
   paragraph: (props: any): JSX.Element => (
@@ -185,6 +186,8 @@ export default function PluginView(
     )
   }, [fetching])
 
+  const telemetry = useTelemetry()
+
   if (error) {
     const errMsg =
       (error.networkError && error.networkError.message) ||
@@ -265,6 +268,9 @@ export default function PluginView(
                         `Are you sure you want to uninstall ${pluginName}?`
                       )
                     ) {
+                      telemetry.trackEvent(`PLUGIN_UNINSTALL`, {
+                        pluginName,
+                      })
                       deleteGatsbyPlugin({ name: pluginName }).then(() =>
                         navigate(`/`)
                       )
@@ -280,6 +286,9 @@ export default function PluginView(
                   onClick={(evt): void => {
                     evt.preventDefault()
                     installGatsbyPlugin({ name: pluginName })
+                    telemetry.trackEvent(`PLUGIN_INSTALL`, {
+                      pluginName,
+                    })
                   }}
                 >
                   Install
@@ -324,6 +333,9 @@ export default function PluginView(
                 setValidationError(err)
                 return
               }
+              telemetry.trackEvent(`PLUGIN_CONFIGURE`, {
+                pluginName,
+              })
               updateGatsbyPlugin({
                 name: props[`*`],
                 options: json,

packages/gatsby-admin/src/urql-client.ts

@@ -9,7 +9,7 @@ import { SubscriptionClient } from "subscriptions-transport-ws"
 
 interface ICreateUrqlClientOptions {
   port: number
-  connectionCallback: any
+  connectionCallback?: any
 }
 
 export const createUrqlClient = ({

packages/gatsby-admin/src/utils/use-telemetry.tsx

@@ -0,0 +1,35 @@
+import { useServices } from "../components/services-provider"
+
+interface ITelemetry {
+  trackEvent: (
+    input: string | Array<string>,
+    tags?: { pluginName?: string }
+  ) => void
+}
+
+const noop = (): void => {}
+
+export const useTelemetry = (): ITelemetry => {
+  const services = useServices()
+  if (!services.telemetryserver)
+    return {
+      trackEvent: noop,
+    }
+
+  const { port } = services.telemetryserver
+
+  const trackEvent: ITelemetry["trackEvent"] = input => {
+    fetch(`http://localhost:${port}/trackEvent`, {
+      method: `POST`,
+      body: JSON.stringify([input]),
+      headers: {
+        "Content-Type": `application/json`,
+      },
+    }).catch(() => {})
+    return
+  }
+
+  return {
+    trackEvent,
+  }
+}

packages/gatsby/src/utils/telemetry-server.ts

@@ -7,23 +7,25 @@
  */
 import express from "express"
 import bodyParser from "body-parser"
+import cors from "cors"
 import {
-  setGatsbyCliVersion,
   setDefaultComponentId,
   trackCli,
   startBackgroundUpdate,
 } from "gatsby-telemetry"
 
+setDefaultComponentId(`gatsby-admin`)
+
 // These routes will exist in the API at the keys, e.g.
 // http://localhost:1234/trackEvent
 const ROUTES = {
-  setVersion: setGatsbyCliVersion,
-  setDefaultComponentId: setDefaultComponentId,
   trackEvent: trackCli,
 }
 
 const app = express()
 
+app.use(cors())
+
 // Overview over all possible routes at /
 app.get(`/`, (req, res) => {
   res.set(`Content-Type`, `text/html`)