Merge pull request #1989 from SUI-Components/feat/NOJIRA-add-is-bot-web-vitals

feat(packages/sui-react-web-vitals): add web vitals is bot flag

Author: andresz1

packages/sui-js/src/ua-parser/index.js

@@ -6,7 +6,8 @@ export const LEGITIMATE_CRAWLER_USER_AGENTS = [
   'bingbot',
   'linkedinbot',
   'mediapartners-google',
-  'debugbear'
+  'debugbear',
+  'spider'
 ]
 
 export const stats = userAgent => {

packages/sui-react-web-vitals/src/index.js

@@ -197,6 +197,14 @@ export default function WebVitalsReporter({
               }
             ]
           : []),
+        ...(typeof browser?.isBot === 'boolean'
+          ? [
+              {
+                key: 'is_bot',
+                value: browser.isBot
+              }
+            ]
+          : []),
         {
           key: 'browserEngine',
           value: browserEngine

packages/sui-react-web-vitals/test/browser/indexSpec.js

@@ -250,6 +250,79 @@ describe('WebVitalsReporter', () => {
     })
   })
 
+  it('should not include isBot tag when browser.isBot is not set', async () => {
+    const logger = {distribution: sinon.spy()}
+    const reporter = {
+      onTTFB: fn => {
+        fn({name: 'TTFB', value: 10, entries: [], attribution: {}})
+      }
+    }
+    render(<WebVitalsReporter metrics={[METRICS.TTFB]} allowed={['/']} reporter={reporter} />, {logger})
+    await waitFor(() => [
+      expect(
+        logger.distribution.calledWith({
+          name: 'cwv',
+          amount: 10,
+          tags: [
+            {key: 'name', value: 'ttfb'},
+            {key: 'pathname', value: '/'},
+            {key: 'browserEngine', value: 'Other'}
+          ]
+        })
+      ).to.be.true
+    ])
+  })
+
+  it('should include isBot: true tag when browser.isBot is true', async () => {
+    const logger = {distribution: sinon.spy()}
+    const reporter = {
+      onTTFB: fn => {
+        fn({name: 'TTFB', value: 10, entries: [], attribution: {}})
+      }
+    }
+    const browser = {isBot: true}
+    render(<WebVitalsReporter metrics={[METRICS.TTFB]} allowed={['/']} reporter={reporter} />, {logger, browser})
+    await waitFor(() => [
+      expect(
+        logger.distribution.calledWith({
+          name: 'cwv',
+          amount: 10,
+          tags: [
+            {key: 'name', value: 'ttfb'},
+            {key: 'pathname', value: '/'},
+            {key: 'is_bot', value: true},
+            {key: 'browserEngine', value: 'Other'}
+          ]
+        })
+      ).to.be.true
+    ])
+  })
+
+  it('should include isBot: false tag when browser.isBot is false', async () => {
+    const logger = {distribution: sinon.spy()}
+    const reporter = {
+      onTTFB: fn => {
+        fn({name: 'TTFB', value: 10, entries: [], attribution: {}})
+      }
+    }
+    const browser = {isBot: false}
+    render(<WebVitalsReporter metrics={[METRICS.TTFB]} allowed={['/']} reporter={reporter} />, {logger, browser})
+    await waitFor(() => [
+      expect(
+        logger.distribution.calledWith({
+          name: 'cwv',
+          amount: 10,
+          tags: [
+            {key: 'name', value: 'ttfb'},
+            {key: 'pathname', value: '/'},
+            {key: 'is_bot', value: false},
+            {key: 'browserEngine', value: 'Other'}
+          ]
+        })
+      ).to.be.true
+    ])
+  })
+
   it('should track TTFB using logger distribution with browser in context', async () => {
     const logger = {
       distribution: sinon.spy()