fix: use correct values for browser meta

Author: lucasbento

packages/react-native-sdk/package.json

@@ -53,13 +53,18 @@
   },
   "dependencies": {
     "@grafana/faro-core": "^1.12.2",
+    "react-native-device-info": "^14.0.2",
     "ua-parser-js": "^1.0.32",
     "web-vitals": "^4.0.1"
   },
   "devDependencies": {
     "@types/ua-parser-js": "^0.7.36",
+    "react-native": "0.72.6",
     "user-agent-data-types": "^0.4.2"
   },
+  "peerDependencies": {
+    "react-native": ">=0.70.0"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/react-native-sdk/src/metas/browser/meta.ts

@@ -1,41 +1,21 @@
-import { UAParser } from 'ua-parser-js';
+// eslint-disable-next-line import/namespace
+import { Dimensions, Platform } from 'react-native';
+import { getBrand, getModel, getReadableVersion, getSystemVersion } from 'react-native-device-info';
 
-import { unknownString } from '@grafana/faro-core';
-import type { Meta, MetaBrowser, MetaItem } from '@grafana/faro-core';
+import { Meta, MetaItem } from '@grafana/faro-core';
 
-export const browserMeta: MetaItem<Pick<Meta, 'browser'>> = () => {
-  const parser = new UAParser();
-  const { name, version } = parser.getBrowser();
-  const { name: osName, version: osVersion } = parser.getOS();
-  const userAgent = parser.getUA();
-  const language = navigator.language;
-  const mobile = navigator.userAgent.includes('Mobi');
-  const brands = getBrands();
+const { width, height } = Dimensions.get('window');
 
-  return {
-    browser: {
-      name: name ?? unknownString,
-      version: version ?? unknownString,
-      os: `${osName ?? unknownString} ${osVersion ?? unknownString}`,
-      userAgent: userAgent ?? unknownString,
-      language: language ?? unknownString,
-      mobile,
-      brands: brands ?? unknownString,
-      viewportWidth: `${window.innerWidth}`,
-      viewportHeight: `${window.innerHeight}`,
+export const browserMeta: MetaItem<Pick<Meta, 'browser'>> = () => ({
+  browser: {
+    name: Platform.OS,
+    version: getReadableVersion(),
+    os: getSystemVersion(),
+    mobile: true,
+    userAgent: `${Platform.OS}/${getSystemVersion()} (${getBrand()} ${getModel()})`,
+    windowSize: {
+      width,
+      height,
     },
-  };
-
-  function getBrands(): MetaBrowser['brands'] | undefined {
-    if (!name || !version) {
-      return undefined;
-    }
-
-    if ('userAgentData' in navigator && navigator.userAgentData) {
-      // userAgentData in experimental (only Chrome supports it) thus TS does not ship the respective type declarations
-      return (navigator as any).userAgentData.brands;
-    }
-
-    return undefined;
-  }
-};
+  },
+});

rollup.config.base.js

@@ -87,40 +87,72 @@ const modules = {
     bundleName: 'faro-instrumentation-otel-redux-saga',
     globalName: 'GrafanaFaroInstrumentationOtelReduxSaga',
     externals: [],
-  }
+  },
 };
 
 exports.getRollupConfigBase = (moduleName) => {
   const module = modules[moduleName];
 
-  return {
+  const isReactNative = moduleName.startsWith('rn');
+
+  const baseConfig = {
     input: './src/index.ts',
     output: {
       file: `./dist/bundle/${module.bundleName}.iife.js`,
       format: 'iife',
-      globals: module.externals.reduce(
-        (acc, external) => ({
-          ...acc,
-          [modules[external].name]: modules[external].globalName,
-        }),
-        {}
-      ),
+      globals: {
+        'react-native': 'ReactNative',
+        react: 'React',
+        ...module.externals.reduce(
+          (acc, external) => ({
+            ...acc,
+            [modules[external].name]: modules[external].globalName,
+          }),
+          {}
+        ),
+      },
       name: module.globalName,
     },
-    external: module.externals.map((external) => modules[external].name),
+    external: ['react-native', 'react', ...module.externals.map((external) => modules[external].name)],
     plugins: [
       resolve({
         browser: true,
+        preferBuiltins: false,
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+        moduleDirectories: ['node_modules'],
+      }),
+      commonjs({
+        ignore: isReactNative ? ['react-native'] : [],
+        requireReturnsDefault: 'auto',
+        transformMixedEsModules: true,
+        exclude: isReactNative ? ['node_modules/react-native/**'] : [],
       }),
-      commonjs(),
       typescript({
         cacheDir: '../../.cache/rollup',
         inlineSources: false,
         outputToFilesystem: true,
         sourceMap: false,
         tsconfig: './tsconfig.esm.json',
+        exclude: ['node_modules/**'],
       }),
       terser(),
     ],
   };
+
+  if (isReactNative) {
+    baseConfig.onwarn = (warning, warn) => {
+      // Suppress certain warnings for React Native
+      if (warning.code === 'CIRCULAR_DEPENDENCY') {
+        return;
+      }
+
+      if (warning.code === 'THIS_IS_UNDEFINED') {
+        return;
+      }
+
+      warn(warning);
+    };
+  }
+
+  return baseConfig;
 };

tsconfig.base.json

@@ -7,7 +7,6 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
-    "importsNotUsedAsValues": "error",
     "incremental": true,
     "inlineSources": true,
     "isolatedModules": true,