From f91844568c8e7b1016750a5994b2032c13d5bfdf Mon Sep 17 00:00:00 2001
From: juniortour <juniortour@qq.com>
Date: Mon, 4 Dec 2023 20:51:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=8A=E6=8A=A5?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BB=A3=E7=90=86=E6=95=B0=E6=8D=AE=E7=9A=84?=
 =?UTF-8?q?=20reportUAInfo()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json   | 41 +++++++++++++++++++++++++++++++++++++++++
 package.json        |  2 ++
 src/index.tsx       |  3 +++
 src/shared/utils.ts | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 80 insertions(+)
 create mode 100644 src/shared/utils.ts

diff --git a/package-lock.json b/package-lock.json
index a972040..a5934ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react-hook-form": "^7.27.1",
         "react-hot-loader": "^4.13.0",
         "react-router-dom": "^5.3.0",
+        "ua-parser-js": "^1.0.37",
         "use-query-params": "^1.2.3"
       },
       "devDependencies": {
@@ -39,6 +40,7 @@
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.13",
         "@types/react-router-dom": "^5.3.3",
+        "@types/ua-parser-js": "^0.7.39",
         "@typescript-eslint/eslint-plugin": "^5.12.1",
         "@typescript-eslint/parser": "^5.13.0",
         "autoprefixer": "^10.4.2",
@@ -3037,6 +3039,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==",
+      "dev": true
+    },
     "node_modules/@types/ws": {
       "version": "8.2.2",
       "dev": true,
@@ -13709,6 +13717,28 @@
         "node": ">=10"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "dev": true,
@@ -16388,6 +16418,12 @@
         "@types/node": "*"
       }
     },
+    "@types/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==",
+      "dev": true
+    },
     "@types/ws": {
       "version": "8.2.2",
       "dev": true,
@@ -23215,6 +23251,11 @@
         }
       }
     },
+    "ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ=="
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "dev": true,
diff --git a/package.json b/package.json
index f23ecda..67324b0 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.13",
     "@types/react-router-dom": "^5.3.3",
+    "@types/ua-parser-js": "^0.7.39",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.13.0",
     "autoprefixer": "^10.4.2",
@@ -111,6 +112,7 @@
     "react-hook-form": "^7.27.1",
     "react-hot-loader": "^4.13.0",
     "react-router-dom": "^5.3.0",
+    "ua-parser-js": "^1.0.37",
     "use-query-params": "^1.2.3"
   }
 }
diff --git a/src/index.tsx b/src/index.tsx
index ff1e74e..7125202 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { render } from 'react-dom';
 import { App } from './app';
+import { reportUAInfo } from './shared/utils';
 
 render(
   <StrictMode>
@@ -8,3 +9,5 @@ render(
   </StrictMode>,
   document.getElementById('root'),
 );
+
+reportUAInfo();
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
new file mode 100644
index 0000000..140c2c8
--- /dev/null
+++ b/src/shared/utils.ts
@@ -0,0 +1,34 @@
+import UAParser from 'ua-parser-js';
+
+async function reportCount({ name, labels, help, sampleRate = 1 }) {
+  if (Math.random() > sampleRate) {
+    return;
+  }
+  await fetch('http://localhost:4001/counter-metric', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      name,
+      help,
+      labels,
+    }),
+  });
+}
+
+export function reportUAInfo() {
+  const parser = new UAParser();
+  const ret = parser.getResult();
+  // console.log(`getUAInfo ret=${JSON.stringify(ret)}`);
+  reportCount({
+    name: 'UAInfo',
+    help: 'User Agent Info of fe-optimizaion-demo',
+    labels: {
+      browser: `${ret.browser.name}_${ret.browser.major}`,
+      os: `${ret.os.name}_${ret.os.version}`,
+    },
+    sampleRate: 0.01,
+    // sampleRate: 1,
+  });
+}