Support error responses in network signals (#1164)

Author: silesky

.changeset/blue-ads-doubt.md

@@ -0,0 +1,5 @@
+---
+'@segment/analytics-signals': minor
+---
+
+Emit network signals that result in errors if the response has been emitted. Add ok and status to network signal data.

packages/signals/signals-example/src/components/ComplexForm.tsx

@@ -2,11 +2,24 @@ import React, { FormEventHandler, useState } from 'react'
 
 const ComplexForm = () => {
   const [inputField, setInputField] = useState('')
+  const [expectFormError, setExpectFormError] = useState(false)
   const [selectField, setSelectField] = useState('')
 
+  const statusCode: number = React.useMemo(() => {
+    try {
+      // Change the response status code via the text input field
+      const val = parseInt(inputField, 10)
+      return val >= 100 && val <= 511 ? val : 400
+    } catch (err) {
+      return 400
+    }
+  }, [inputField])
+
   const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault()
+
     const formData = {
+      status: expectFormError ? statusCode : 200,
       inputField,
       selectField,
     }
@@ -33,16 +46,16 @@ const ComplexForm = () => {
       <button data-custom-attr="some-custom-attribute">Example Button</button>
       <form onSubmit={handleSubmit}>
         <div>
-          <label htmlFor="ex-input">Input Field:</label>
+          <label htmlFor="ex-input-text">Input some text:</label>
           <input
-            id="ex-input"
+            id="ex-input-text"
             type="text"
             value={inputField}
             onChange={(e) => setInputField(e.target.value)}
           />
         </div>
         <div>
-          <label htmlFor="ex-select">Select Field:</label>
+          <label htmlFor="ex-select">Select an option:</label>
           <select
             id="ex-select"
             value={selectField}
@@ -55,7 +68,16 @@ const ComplexForm = () => {
             <option value="Option 2">Option 2</option>
           </select>
         </div>
-        <button type="submit">Submit</button>
+        <div>
+          <label htmlFor="ex-checkbox">{`Force submit network status: ${statusCode}`}</label>
+          <input
+            id="ex-checkbox"
+            type="checkbox"
+            checked={expectFormError}
+            onChange={(e) => setExpectFormError(e.target.checked)}
+          />
+        </div>
+        <button type="submit">Submit via network req</button>
       </form>
       <button>
         <div>

packages/signals/signals-example/src/styles.css

@@ -40,3 +40,7 @@ nav a {
 nav a:hover {
   color: #007bff;
 }
+
+form div {
+  display: inline-block;
+}

packages/signals/signals-example/webpack.config.js

@@ -52,8 +52,8 @@ module.exports = {
     onBeforeSetupMiddleware(devServer) {
       devServer.app.use(bodyParser.json())
       devServer.app.post('/parrot', (req, res) => {
-        console.log(req.body)
-        res.json(req.body)
+        console.log('/parrot', req.body)
+        res.status(req.body.status ?? 200).json(req.body)
       })
     },
     historyApiFallback: true,

packages/signals/signals-integration-tests/src/helpers/base-page-object.ts

@@ -49,7 +49,7 @@ export class BasePage {
     await this.setupMockedRoutes()
     const url = options.updateURL ? options.updateURL(this.url) : this.url
     await this.page.goto(url)
-    await this.invokeAnalyticsLoad(signalSettings)
+    void this.invokeAnalyticsLoad(signalSettings)
   }
 
   /**

packages/signals/signals-integration-tests/src/helpers/network-utils.ts

@@ -18,63 +18,83 @@ export class PageNetworkUtils {
   async makeXHRCall(
     url = this.defaultTestApiURL,
     reqOptions: XHRRequestOptions = {}
-  ): Promise<void> {
+  ): Promise<any> {
     let normalizeUrl = url
     if (url.startsWith('/')) {
       normalizeUrl = new URL(url, this.page.url()).href
     }
     const req = this.page.waitForResponse(normalizeUrl ?? url, {
       timeout: this.defaultResponseTimeout,
     })
-    await this.page.evaluate(
+    const responseBody = this.page.evaluate(
       (args) => {
-        const xhr = new XMLHttpRequest()
-        xhr.open(args.method ?? 'POST', args.url)
-        xhr.responseType = args.responseType ?? 'json'
-        xhr.setRequestHeader(
-          'Content-Type',
-          args.contentType ?? 'application/json'
-        )
-        if (typeof args.responseLatency === 'number') {
-          xhr.setRequestHeader(
-            'x-test-latency',
-            args.responseLatency.toString()
-          )
-        }
-        xhr.send(args.body || JSON.stringify({ foo: 'bar' }))
+        return new Promise<any>((resolve) => {
+          const xhr = new XMLHttpRequest()
+          xhr.open(args.method ?? 'POST', args.url)
+
+          const contentType = args.contentType ?? 'application/json'
+          xhr.setRequestHeader('Content-Type', contentType)
+
+          xhr.responseType = args.responseType
+            ? args.responseType
+            : contentType.includes('json')
+            ? 'json'
+            : '' // '' is the same as 'text' according to xhr spec
+
+          if (typeof args.responseLatency === 'number') {
+            xhr.setRequestHeader(
+              'x-test-latency',
+              args.responseLatency.toString()
+            )
+          }
+          xhr.send(args.body ?? JSON.stringify({ foo: 'bar' }))
+          xhr.onload = () => resolve(xhr.response)
+        })
       },
       { url, ...reqOptions }
     )
     await req
+    return responseBody
   }
   /**
    * Make a fetch call in the page context. By default it will POST a JSON object with {foo: 'bar'}
    */
   async makeFetchCall(
     url = this.defaultTestApiURL,
-    request: Partial<RequestInit> = {}
-  ): Promise<void> {
+    request: Partial<RequestInit> & {
+      contentType?: string
+    } = {}
+  ): Promise<any> {
     let normalizeUrl = url
     if (url.startsWith('/')) {
       normalizeUrl = new URL(url, this.page.url()).href
     }
     const req = this.page.waitForResponse(normalizeUrl ?? url, {
       timeout: this.defaultResponseTimeout,
     })
-    await this.page.evaluate(
-      (args) => {
-        return fetch(args.url, {
+    const responseBody = await this.page.evaluate(
+      async (args) => {
+        const res = await fetch(args.url, {
           method: 'POST',
           headers: {
-            'Content-Type': 'application/json',
+            'Content-Type': args.request.contentType ?? 'application/json',
           },
           body: JSON.stringify({ foo: 'bar' }),
           ...args.request,
         })
+        const type = res.headers.get('Content-Type')
+        if (type?.includes('json')) {
+          return res.json()
+        } else if (type?.includes('text')) {
+          return res.text()
+        } else {
+          console.error('Unexpected response content type')
+        }
       },
       { url, request }
     )
     await req
+    return responseBody
   }
 
   async mockTestRoute(

packages/signals/signals-integration-tests/src/tests/signals-vanilla/all-segment-events.test.ts

@@ -48,11 +48,12 @@ test('Segment events', async ({ page }) => {
   }`
 
   await indexPage.load(page, basicEdgeFn)
-  await indexPage.clickButton()
-  await Promise.all([
+  const flush = Promise.all([
     indexPage.waitForSignalsApiFlush(),
     indexPage.waitForTrackingApiFlush(),
   ])
+  await indexPage.clickButton()
+  await flush
 
   const trackingApiReqs = indexPage.trackingAPI
     .getEvents()
@@ -74,16 +75,15 @@ test('Should dispatch events from signals that occurred before analytics was ins
   }`
 
   await indexPage.load(page, edgeFn)
+  const flush = Promise.all([
+    indexPage.waitForSignalsApiFlush(),
+    indexPage.waitForTrackingApiFlush(),
+  ])
 
   // add a user defined signal before analytics is instantiated
   void indexPage.addUserDefinedSignal()
+  await flush
 
-  await indexPage.waitForSettings()
-
-  await Promise.all([
-    indexPage.waitForSignalsApiFlush(),
-    indexPage.waitForTrackingApiFlush(),
-  ])
   const trackingApiReqs = indexPage.trackingAPI.getEvents()
   expect(trackingApiReqs).toHaveLength(2)
 

packages/signals/signals-integration-tests/src/tests/signals-vanilla/basic.test.ts

@@ -16,7 +16,7 @@ test.beforeEach(async ({ page }) => {
   await indexPage.loadAndWait(page, basicEdgeFn)
 })
 
-test('network signals', async () => {
+test('network signals fetch', async () => {
   /**
    * Make a fetch call, see if it gets sent to the signals endpoint
    */