Device manager - record device client information on app start (PSG-633) (#9314)

* record device client inforamtion events on app start

* matrix-client-information -> matrix_client_information

* fix types

* remove another unused export

* add docs link

* add opt in setting for recording device information

src/DeviceListener.ts

@@ -40,6 +40,10 @@ import { isSecureBackupRequired } from './utils/WellKnownUtils';
 import { ActionPayload } from "./dispatcher/payloads";
 import { Action } from "./dispatcher/actions";
 import { isLoggedIn } from "./utils/login";
+import SdkConfig from "./SdkConfig";
+import PlatformPeg from "./PlatformPeg";
+import { recordClientInformation } from "./utils/device/clientInformation";
+import SettingsStore, { CallbackFn } from "./settings/SettingsStore";
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
@@ -60,6 +64,8 @@ export default class DeviceListener {
     // The set of device IDs we're currently displaying toasts for
     private displayingToastsForDeviceIds = new Set<string>();
     private running = false;
+    private shouldRecordClientInformation = false;
+    private deviceClientInformationSettingWatcherRef: string | undefined;
 
     public static sharedInstance() {
         if (!window.mxDeviceListener) window.mxDeviceListener = new DeviceListener();
@@ -76,8 +82,15 @@ export default class DeviceListener {
         MatrixClientPeg.get().on(ClientEvent.AccountData, this.onAccountData);
         MatrixClientPeg.get().on(ClientEvent.Sync, this.onSync);
         MatrixClientPeg.get().on(RoomStateEvent.Events, this.onRoomStateEvents);
+        this.shouldRecordClientInformation = SettingsStore.getValue('deviceClientInformationOptIn');
+        this.deviceClientInformationSettingWatcherRef = SettingsStore.watchSetting(
+            'deviceClientInformationOptIn',
+            null,
+            this.onRecordClientInformationSettingChange,
+        );
         this.dispatcherRef = dis.register(this.onAction);
         this.recheck();
+        this.recordClientInformation();
     }
 
     public stop() {
@@ -95,6 +108,9 @@ export default class DeviceListener {
             MatrixClientPeg.get().removeListener(ClientEvent.Sync, this.onSync);
             MatrixClientPeg.get().removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
         }
+        if (this.deviceClientInformationSettingWatcherRef) {
+            SettingsStore.unwatchSetting(this.deviceClientInformationSettingWatcherRef);
+        }
         if (this.dispatcherRef) {
             dis.unregister(this.dispatcherRef);
             this.dispatcherRef = null;
@@ -200,6 +216,7 @@ export default class DeviceListener {
     private onAction = ({ action }: ActionPayload) => {
         if (action !== Action.OnLoggedIn) return;
         this.recheck();
+        this.recordClientInformation();
     };
 
     // The server doesn't tell us when key backup is set up, so we poll
@@ -343,4 +360,33 @@ export default class DeviceListener {
             dis.dispatch({ action: Action.ReportKeyBackupNotEnabled });
         }
     };
+
+    private onRecordClientInformationSettingChange: CallbackFn = (
+        _originalSettingName, _roomId, _level, _newLevel, newValue,
+    ) => {
+        const prevValue = this.shouldRecordClientInformation;
+
+        this.shouldRecordClientInformation = !!newValue;
+
+        if (this.shouldRecordClientInformation && !prevValue) {
+            this.recordClientInformation();
+        }
+    };
+
+    private recordClientInformation = async () => {
+        if (!this.shouldRecordClientInformation) {
+            return;
+        }
+        try {
+            await recordClientInformation(
+                MatrixClientPeg.get(),
+                SdkConfig.get(),
+                PlatformPeg.get(),
+            );
+        } catch (error) {
+            // this is a best effort operation
+            // log the error without rethrowing
+            logger.error('Failed to record client information', error);
+        }
+    };
 }

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -319,6 +319,12 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                             level={SettingLevel.ACCOUNT} />
                     ) }
                 </div>
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{ _t("Sessions") }</span>
+                    <SettingsFlag
+                        name="deviceClientInformationOptIn"
+                        level={SettingLevel.ACCOUNT} />
+                </div>
             </React.Fragment>;
         }
 

src/i18n/strings/en_EN.json

@@ -955,6 +955,7 @@
     "System font name": "System font name",
     "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)",
     "Send analytics data": "Send analytics data",
+    "Record the client name, version, and url to recognise sessions more easily in session manager": "Record the client name, version, and url to recognise sessions more easily in session manager",
     "Never send encrypted messages to unverified sessions from this session": "Never send encrypted messages to unverified sessions from this session",
     "Never send encrypted messages to unverified sessions in this room from this session": "Never send encrypted messages to unverified sessions in this room from this session",
     "Enable inline URL previews by default": "Enable inline URL previews by default",
@@ -1569,9 +1570,9 @@
     "Okay": "Okay",
     "Privacy": "Privacy",
     "Share anonymous data to help us identify issues. Nothing personal. No third parties.": "Share anonymous data to help us identify issues. Nothing personal. No third parties.",
+    "Sessions": "Sessions",
     "Where you're signed in": "Where you're signed in",
     "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Manage your signed-in devices below. A device's name is visible to people you communicate with.",
-    "Sessions": "Sessions",
     "Other sessions": "Other sessions",
     "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.": "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.",
     "Sidebar": "Sidebar",

src/settings/Settings.tsx

@@ -740,6 +740,14 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         displayName: _td('Send analytics data'),
         default: null,
     },
+    "deviceClientInformationOptIn": {
+        supportedLevels: [SettingLevel.ACCOUNT],
+        displayName: _td(
+            `Record the client name, version, and url ` +
+            `to recognise sessions more easily in session manager`,
+        ),
+        default: false,
+    },
     "FTUE.useCaseSelection": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: null,

src/utils/device/clientInformation.ts

@@ -0,0 +1,60 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+import BasePlatform from "../../BasePlatform";
+import { IConfigOptions } from "../../IConfigOptions";
+
+const formatUrl = (): string | undefined => {
+    // don't record url for electron clients
+    if (window.electron) {
+        return undefined;
+    }
+
+    // strip query-string and fragment from uri
+    const url = new URL(window.location.href);
+
+    return [
+        url.host,
+        url.pathname.replace(/\/$/, ""), // Remove trailing slash if present
+    ].join("");
+};
+
+const getClientInformationEventType = (deviceId: string): string =>
+    `io.element.matrix_client_information.${deviceId}`;
+
+/**
+ * Record extra client information for the current device
+ * https://github.com/vector-im/element-meta/blob/develop/spec/matrix_client_information.md
+ */
+export const recordClientInformation = async (
+    matrixClient: MatrixClient,
+    sdkConfig: IConfigOptions,
+    platform: BasePlatform,
+): Promise<void> => {
+    const deviceId = matrixClient.getDeviceId();
+    const { brand } = sdkConfig;
+    const version = await platform.getAppVersion();
+    const type = getClientInformationEventType(deviceId);
+    const url = formatUrl();
+
+    await matrixClient.setAccountData(type, {
+        name: brand,
+        version,
+        url,
+    });
+};