fix issue with circularity

Author: silesky

packages/signals/signals-example/package.json

@@ -11,6 +11,7 @@
     "@segment/analytics-signals": "workspace:^",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-hook-form": "^7.54.2",
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {

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

@@ -4,6 +4,7 @@ import { loadAnalytics } from '../lib/analytics'
 import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
 import { HomePage } from '../pages/Home'
 import { OtherPage } from '../pages/Other'
+import { ReactHookFormPage } from '../pages/ReactHookForm'
 
 const App: React.FC = () => {
   useEffect(() => {
@@ -14,11 +15,13 @@ const App: React.FC = () => {
     <Router>
       <nav>
         <Link to="/">Home</Link>
+        <Link to="/reacthookform">React Hook Form Example</Link>
         <Link to="/other">Other</Link>
       </nav>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/other" element={<OtherPage />} />
+        <Route path="/reacthookform" element={<ReactHookFormPage />} />
       </Routes>
     </Router>
   )

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

@@ -0,0 +1,97 @@
+import React from 'react'
+import { useForm, SubmitHandler } from 'react-hook-form'
+
+interface IFormInput {
+  name: string
+  selectField: string
+  expectFormError: boolean
+}
+
+const ComplexFormWithHookForm = () => {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<IFormInput>()
+  const onSubmit: SubmitHandler<IFormInput> = (data) => {
+    const statusCode = data.expectFormError ? parseInt(data.name, 10) : 200
+    const formData = {
+      status: statusCode,
+      name: data.name,
+      selectField: data.selectField,
+    }
+    console.log('Submitting form:', JSON.stringify(formData))
+    fetch('/parrot', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(formData),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log('Form submitted successfully:', data)
+      })
+      .catch((error) => {
+        console.error('Error submitting form:', error)
+      })
+  }
+
+  const name = watch('name')
+  const statusCode = React.useMemo(() => {
+    try {
+      const val = parseInt(name, 10)
+      return val >= 100 && val <= 511 ? val : 400
+    } catch (err) {
+      return 400
+    }
+  }, [name])
+
+  return (
+    <div>
+      <button data-custom-attr="some-custom-attribute">Example Button</button>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <label htmlFor="ex-input-text">Input some text:</label>
+          <input
+            id="ex-input-text"
+            type="text"
+            {...register('name', { required: true })}
+          />
+          {errors.name && <span>This field is required</span>}
+        </div>
+        <div>
+          <label htmlFor="ex-select">Select an option:</label>
+          <select
+            id="ex-select"
+            {...register('selectField', { required: true })}
+          >
+            <option value="" disabled>
+              Select
+            </option>
+            <option value="Option 1">Option 1</option>
+            <option value="Option 2">Option 2</option>
+          </select>
+          {errors.selectField && <span>This field is required</span>}
+        </div>
+        <div>
+          <label htmlFor="ex-checkbox">{`Force submit network status: ${statusCode}`}</label>
+          <input
+            id="ex-checkbox"
+            type="checkbox"
+            {...register('expectFormError')}
+          />
+        </div>
+        <button type="submit">Submit via network req</button>
+      </form>
+      <button>
+        <div>
+          Other Example Button with <h1>Nested Text</h1>
+        </div>
+      </button>
+    </div>
+  )
+}
+
+export default ComplexFormWithHookForm

packages/signals/signals-example/src/pages/ReactHookForm.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComplexForm from '../components/ComplexReactHookForm'
+import { analytics } from '../lib/analytics'
+
+export const ReactHookFormPage: React.FC = () => {
+  return (
+    <main>
+      <h1>Hello, React Hook Form with TypeScript!</h1>
+      <ComplexForm />
+      <button onClick={() => analytics.track('manual track call')}>
+        Send Manual Track Call
+      </button>
+    </main>
+  )
+}

packages/signals/signals/src/core/processor/processor.ts

@@ -1,7 +1,7 @@
 import { logger } from '../../lib/logger'
 import { Signal } from '@segment/analytics-signals-runtime'
 import { AnyAnalytics } from '../../types'
-import { MethodName, Sandbox } from './sandbox'
+import { AnalyticsMethodCalls, MethodName, Sandbox } from './sandbox'
 
 export class SignalEventProcessor {
   private sandbox: Sandbox
@@ -12,7 +12,14 @@ export class SignalEventProcessor {
   }
 
   async process(signal: Signal, signals: Signal[]) {
-    const analyticsMethodCalls = await this.sandbox.process(signal, signals)
+    let analyticsMethodCalls: AnalyticsMethodCalls
+    try {
+      analyticsMethodCalls = await this.sandbox.process(signal, signals)
+    } catch (err) {
+      // in practice, we should never hit this error, but if we do, we should log it.
+      console.error('Error processing signal', { signal, signals }, err)
+      return
+    }
 
     for (const methodName in analyticsMethodCalls) {
       const name = methodName as MethodName

packages/signals/signals/src/core/signal-generators/dom-gen/dom-gen.ts

@@ -130,6 +130,24 @@ const getReferencedElement = (
   return document.getElementById(value) ?? undefined
 }
 
+// Fix a bug with react-hook-form where if the field name conflicts with a native attribute name like 'name',
+// the attribute will get overridden with the html element itself. This is a workaround to get the attribute value
+const parsePropWithAttributeFallback = (
+  element: HTMLElement,
+  propName: string
+): string | undefined => {
+  if (!(propName in element)) {
+    return
+  }
+  // @ts-ignore
+  const n = element[propName]
+  if (typeof n === 'string') {
+    return n
+  } else if (n instanceof HTMLElement) {
+    return element.getAttribute(propName) || undefined
+  }
+}
+
 export const parseElement = (el: HTMLElement): AnyParsedElement => {
   const labels = parseLabels((el as HTMLInputElement).labels)
   const labeledBy = getReferencedElement(el, 'aria-labelledby')
@@ -142,15 +160,15 @@ export const parseElement = (el: HTMLElement): AnyParsedElement => {
     // adding a bunch of fields that are not on _all_ elements, but are on enough that it's useful to have them here.
     attributes: parseNodeMap(el.attributes),
     classList: [...el.classList],
-    id: el.id,
+    id: parsePropWithAttributeFallback(el, 'id') || '',
     labels,
     label: labels[0],
-    name: (el as HTMLInputElement).name,
+    name: parsePropWithAttributeFallback(el, 'name'),
     nodeName: el.nodeName,
     tagName: el.tagName,
-    title: el.title,
-    type: (el as HTMLInputElement).type,
-    value: (el as HTMLInputElement).value,
+    title: parsePropWithAttributeFallback(el, 'title') || '',
+    type: parsePropWithAttributeFallback(el, 'type'),
+    value: parsePropWithAttributeFallback(el, 'value'),
     textContent: (el.textContent && cleanText(el.textContent)) ?? undefined,
     innerText: (el.innerText && cleanText(el.innerText)) ?? undefined,
     describedBy: (describedBy && parseToLabel(describedBy)) ?? undefined,

yarn.lock

@@ -3058,6 +3058,7 @@ __metadata:
     html-webpack-plugin: ^5.6.0
     react: ^18.0.0
     react-dom: ^18.0.0
+    react-hook-form: ^7.54.2
     react-router-dom: ^6.23.1
     style-loader: ^4.0.0
     typescript: ^4.7.0
@@ -21145,6 +21146,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hook-form@npm:^7.54.2":
+  version: 7.54.2
+  resolution: "react-hook-form@npm:7.54.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17 || ^18 || ^19
+  checksum: 49a867ece9894dca82f6552e5eefd012b7db962c56a7543f9275ae0b6ec202d549973c3694e7f97436afc2396549cb8fc8777241dd660b71793547aa9c8e5686
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"