Add Telemetry (#264)

* Add telemetry

NativeVision is looking to understand how our users are using the library
better. To do this, we've created a telemetry API to ingest events from the
application.

* Use deployed domain
* chore: version bump 2.24.0
* Run typescript build

Author: robertjcolley

.gitignore

@@ -61,6 +61,7 @@ local.properties
 build/
 *.tgz
 yarn.lock
+.env
 
 # Fastlane
 ios/fastlane/report.xml

README.md

@@ -10,7 +10,7 @@
 
 # ViroReact
 
-ViroReact is a library for developers to rapidly build augmented reality (AR) and virtual reality (VR) experiences. Developers write in React Native, and Viro runs their code natively across all mobile VR (including Google Daydream, Samsung Gear VR, and Google Cardboard for iOS and Android) and AR (iOS ARKit and Android ARCore) platforms.
+ViroReact is a library for developers to rapidly build augmented reality (AR) and virtual reality (VR) experiences. Developers write in React Native and Viro runs their code natively across all mobile VR (including Google Daydream, Samsung Gear VR, and Google Cardboard for iOS and Android) and AR (iOS ARKit and Android ARCore) platforms.
 
 <table>
   <tr>
@@ -23,21 +23,17 @@ ViroReact is a library for developers to rapidly build augmented reality (AR) an
   </tr>
 </table>
 
-# [Installing](readmes/INSTALL.md)
-
-If you are integrating ViroReact into an existing project, have a look at our [Installation instructions](readmes/INSTALL.md).
-
-If you are starting a fresh project with ViroReact, consider cloning our [starter kit](https://github.com/ViroCommunity/starter-kit) repo instead.
-
 # Documentation
 
-The documentation is found [here](https://viro-community.readme.io/docs/overview). Currently, the documentation is migrated with issues to code samples and broken links. If you would like to help fix these issues, either submit an edit or [get in touch](https://discord.gg/H3ksm5NhzT)!
+[Documentation can be found here!](https://viro-community.readme.io/docs/overview). Currently, the documentation has some issues with code samples and broken links. If you would like to help fix these issues, either submit an edit or [get in touch](https://discord.gg/H3ksm5NhzT)!
 
-# FAQ
+## Getting Started
 
-- _Older versions couldn't be submitted to Apple's app store due to use of `UIWebView`. Is this still a problem?_
+If you are starting a fresh project with ViroReact, consider cloning one of our starter kits:
 
-  Reliance on `UIWebView` has been removed from the project, so you should not have this problem if using the `@viro-community/react-viro` package.
+- [Expo + TypeScript](https://github.com/NativeVision/expo-starter-kit-typescript)
+- [React Native](https://github.com/NativeVision/starter-kit)
+- [Expo + JavaScript](https://github.com/NativeVision/expo-starter-kit)
 
 # Examples
 

components/AR/ViroARScene.tsx

@@ -47,6 +47,7 @@ import { ViroBase } from "../ViroBase";
 import { ViroCamera } from "../ViroCamera";
 import { ViroTrackingStateConstants } from "../ViroConstants";
 import { ViroCommonProps } from "./ViroCommonProps";
+import { ViroTelemetry } from "../Telemetry";
 
 const ViroCameraModule = NativeModules.ViroCameraModule;
 

components/AR/ViroARSceneNavigator.tsx

@@ -27,6 +27,7 @@ import {
   ViroScene,
   ViroSceneDictionary,
 } from "../Types/ViroUtils";
+import { ViroTelemetry } from "../Telemetry";
 
 const ViroARSceneNavigatorModule = NativeModules.VRTARSceneNavigatorModule;
 
@@ -79,6 +80,7 @@ export class ViroARSceneNavigator extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
+    ViroTelemetry.recordTelemetry("INIT", { ar: true });
     let initialSceneTag = this.props.initialSceneKey;
     if (initialSceneTag == null) {
       initialSceneTag = this.getRandomTag();

components/Telemetry/index.ts

@@ -0,0 +1,103 @@
+import { VIRO_VERSION } from "../Utilities/ViroVersion";
+import { Platform } from "react-native";
+
+export class ViroTelemetry {
+  private static _isDisabled = false;
+  private static _isDebugging = false;
+  // TODO: use custom domain
+  // private static _telemetryUrl = "https://telemetry.nativevision.xyz";
+  private static _telemetryUrl = "https://native-vision-telemetry.onrender.com";
+  private static _timeout = 8000;
+
+  /**
+   * Allow a user to start debugging the telemetry to see what is sent.
+   */
+  public static setDebugging() {
+    this._isDebugging = true;
+  }
+
+  /**
+   * Allow a user to opt out of telemetry.
+   */
+  public static optOutTelemetry() {
+    this._isDisabled = true;
+  }
+
+  public static recordTelemetry(eventName: string, payload: any = {}) {
+    // Skip recording telemetry if the feature is disabled
+    if (this._isDisabled) return;
+    // Do not send the telemetry data if debugging. Users may use this feature
+    // to preview what data would be sent.
+    if (this._isDebugging) {
+      console.log(
+        `[telemetry] ` + JSON.stringify({ eventName, payload }, null, 2)
+      );
+      return;
+    }
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), this._timeout);
+
+    payload = { ...payload, ...this.getAnonymousMeta() };
+
+    fetch(`${this._telemetryUrl}/api/v1/record`, {
+      method: "PUT",
+      body: JSON.stringify({ eventName, payload }),
+      headers: { "content-type": "application/json" },
+      signal: controller.signal,
+    })
+      .catch((e) => console.error(e))
+      .finally(() => clearTimeout(timeoutId));
+  }
+
+  private static getAnonymousMeta() {
+    let isExpo = false;
+    try {
+      const myModule = require("expo");
+      isExpo = true;
+    } catch (err) {
+      // send error to log file
+    }
+
+    try {
+      const traits = {
+        // expo
+        isExpo:
+          // @ts-ignore
+          Boolean(window?.expo) || false,
+        sdkVersion:
+          // @ts-ignore
+          window?.expo?.modules?.ExponentConstants?.sdkVersion || undefined,
+        androidPackage:
+          // @ts-ignore
+          window?.expo?.modules?.ExponentConstants?.android?.package ||
+          undefined,
+        iosBundleIdentifier:
+          // @ts-ignore
+          window?.expo?.modules?.ExponentConstants?.ios?.bundleIdentifier ||
+          undefined,
+        expoDebugMode:
+          // @ts-ignore
+          window?.expo?.modules?.ExponentConstants?.debugMode || undefined,
+        isDevice:
+          // @ts-ignore
+          window?.expo?.modules?.ExponentConstants?.isDevice || undefined,
+        // library version
+        viroVersion: VIRO_VERSION,
+        platform: Platform.OS,
+        deviceOsVersion: Platform.Version,
+        reactNativeVersion:
+          Platform.constants.reactNativeVersion.major +
+          "." +
+          Platform.constants.reactNativeVersion.minor +
+          "." +
+          Platform.constants.reactNativeVersion.patch,
+      };
+
+      return traits;
+    } catch (e) {
+      console.error(e);
+    }
+
+    return {};
+  }
+}

components/Utilities/ViroVersion.ts

@@ -0,0 +1 @@
+export const VIRO_VERSION = "2.40.0";

components/Viro3DSceneNavigator.tsx

@@ -25,6 +25,7 @@ import {
   ViroSceneDictionary,
 } from "./Types/ViroUtils";
 import { ViroScene } from "./ViroScene";
+import { ViroTelemetry } from "./Telemetry";
 const Viro3DSceneNavigatorModule = NativeModules.VRT3DSceneNavigatorModule;
 
 var mathRandomOffset = 0;
@@ -93,6 +94,7 @@ export class Viro3DSceneNavigator extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
+    ViroTelemetry.recordTelemetry("INIT", { vr: true });
     var initialSceneTag = this.props.initialSceneKey;
     if (initialSceneTag == null) {
       initialSceneTag = this.getRandomTag();

components/ViroSceneNavigator.tsx

@@ -25,6 +25,7 @@ import { ViroExitViroEvent } from "./Types/ViroEvents";
 import { Viro3DPoint } from "./Types/ViroUtils";
 import { ViroSceneDictionary } from "./Types/ViroUtils";
 import { ViroScene } from "./ViroScene";
+import { ViroTelemetry } from "./Telemetry";
 var ViroSceneNavigatorModule = NativeModules.VRTSceneNavigatorModule;
 
 var mathRandomOffset = 0;

dist/components/AR/ViroARSceneNavigator.js

@@ -37,6 +37,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViroARSceneNavigator = void 0;
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const Telemetry_1 = require("../Telemetry");
 const ViroARSceneNavigatorModule = react_native_1.NativeModules.VRTARSceneNavigatorModule;
 let mathRandomOffset = 0;
 /**
@@ -46,6 +47,7 @@ class ViroARSceneNavigator extends React.Component {
     _component = null;
     constructor(props) {
         super(props);
+        Telemetry_1.ViroTelemetry.recordTelemetry("INIT", { ar: true });
         let initialSceneTag = this.props.initialSceneKey;
         if (initialSceneTag == null) {
             initialSceneTag = this.getRandomTag();

dist/components/Telemetry/index.d.ts

@@ -0,0 +1,16 @@
+export declare class ViroTelemetry {
+    private static _isDisabled;
+    private static _isDebugging;
+    private static _telemetryUrl;
+    private static _timeout;
+    /**
+     * Allow a user to start debugging the telemetry to see what is sent.
+     */
+    static setDebugging(): void;
+    /**
+     * Allow a user to opt out of telemetry.
+     */
+    static optOutTelemetry(): void;
+    static recordTelemetry(eventName: string, payload?: any): void;
+    private static getAnonymousMeta;
+}