Sending events to POST /events endpoint (#15796)

javascripts/events.js

@@ -0,0 +1,118 @@
+/* eslint-disable camelcase */
+import { v4 as uuidv4 } from 'uuid'
+import Cookies from 'js-cookie'
+import getCsrf from './get-csrf'
+
+const COOKIE_NAME = '_docs-events'
+
+let cookieValue
+
+export function getUserEventsId () {
+  if (cookieValue) return cookieValue
+  cookieValue = Cookies.get(COOKIE_NAME)
+  if (cookieValue) return cookieValue
+  cookieValue = uuidv4()
+  Cookies.set(COOKIE_NAME, cookieValue, {
+    secure: true,
+    sameSite: 'strict',
+    expires: 365
+  })
+  return cookieValue
+}
+
+export async function sendEvent ({
+  type,
+  version = '1.0.0',
+  page_render_duration,
+  exit_page_id,
+  exit_first_paint,
+  exit_dom_interactive,
+  exit_dom_complete,
+  exit_visit_duration,
+  exit_scroll_length,
+  link_url,
+  search_query,
+  search_context,
+  navigate_label,
+  survey_vote,
+  survey_comment,
+  survey_email,
+  experiment_name,
+  experiment_variation,
+  experiment_success
+}) {
+  const response = await fetch('/events', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'CSRF-Token': getCsrf()
+    },
+    body: JSON.stringify({
+      type, // One of page, exit, link, search, navigate, survey, experiment
+
+      context: {
+        // Primitives
+        event_id: uuidv4(),
+        user: getUserEventsId(),
+        version,
+        created: new Date().toISOString(),
+
+        // Content information
+        path: location.pathname,
+        referrer: document.referrer,
+        search: location.search,
+        href: location.href,
+        site_language: location.pathname.split('/')[1],
+
+        // Device information
+        // os:
+        // os_version:
+        // browser:
+        // browser_version:
+        viewport_width: document.documentElement.clientWidth,
+        viewport_height: document.documentElement.clientHeight,
+
+        // Location information
+        timezone: new Date().getTimezoneOffset() / -60,
+        user_language: navigator.language
+      },
+
+      // Page event
+      page_render_duration,
+
+      // Exit event
+      exit_page_id,
+      exit_first_paint,
+      exit_dom_interactive,
+      exit_dom_complete,
+      exit_visit_duration,
+      exit_scroll_length,
+
+      // Link event
+      link_url,
+
+      // Search event
+      search_query,
+      search_context,
+
+      // Navigate event
+      navigate_label,
+
+      // Survey event
+      survey_vote,
+      survey_comment,
+      survey_email,
+
+      // Experiment event
+      experiment_name,
+      experiment_variation,
+      experiment_success
+    })
+  })
+  const data = response.ok ? await response.json() : {}
+  return data
+}
+
+export default async function initializeEvents () {
+  await sendEvent({ type: 'page' })
+}

javascripts/index.js

@@ -14,8 +14,9 @@ import localization from './localization'
 import helpfulness from './helpfulness'
 import experiment from './experiment'
 import { fillCsrf } from './get-csrf'
+import initializeEvents from './events'
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
   displayPlatformSpecificContent()
   explorer()
   search()
@@ -27,7 +28,8 @@ document.addEventListener('DOMContentLoaded', () => {
   wrapCodeTerms()
   print()
   localization()
-  fillCsrf()
+  await fillCsrf() // this must complete before any POST calls
   helpfulness()
   experiment()
+  initializeEvents()
 })

lib/hydro.js

@@ -1,10 +1,21 @@
 const crypto = require('crypto')
 const fetch = require('node-fetch')
 
+const SCHEMAS = {
+  page: 'docs.v0.PageEvent',
+  exit: 'docs.v0.ExitEvent',
+  link: 'docs.v0.LinkEvent',
+  search: 'docs.v0.SearchEvent',
+  navigate: 'docs.v0.NavigateEvent',
+  survey: 'docs.v0.SurveyEvent',
+  experiment: 'docs.v0.ExperimentEvent'
+}
+
 module.exports = class Hydro {
-  constructor ({ secret, endpoint }) {
+  constructor ({ secret, endpoint } = {}) {
     this.secret = secret || process.env.HYDRO_SECRET
     this.endpoint = endpoint || process.env.HYDRO_ENDPOINT
+    this.schemas = SCHEMAS
   }
 
   /**
@@ -32,7 +43,13 @@ module.exports = class Hydro {
    * @param {[{ schema: string, value: any }]} events
    */
   async publishMany (events) {
-    const body = JSON.stringify({ events })
+    const body = JSON.stringify({
+      events: events.map(({ schema, value }) => ({
+        schema,
+        value: JSON.stringify(value), // We must double-encode the value property
+        cluster: 'potomac' // We only have ability to publish externally to potomac cluster
+      }))
+    })
     const token = this.generatePayloadHmac(body)
 
     return fetch(this.endpoint, {
@@ -41,7 +58,7 @@ module.exports = class Hydro {
       headers: {
         Authorization: `Hydro ${token}`,
         'Content-Type': 'application/json',
-        'X-Hydro-App': 'docs'
+        'X-Hydro-App': 'docs-production'
       }
     })
   }