riot-web/src/Analytics.tsx

/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2020 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 React from 'react';

import {getCurrentLanguage, _t, _td, IVariables} from './languageHandler';
import PlatformPeg from './PlatformPeg';
import SdkConfig from './SdkConfig';
import Modal from './Modal';
import * as sdk from './index';

const hashRegex = /#\/(groups?|room|user|settings|register|login|forgot_password|home|directory)/;
const hashVarRegex = /#\/(group|room|user)\/.*$/;

// Remove all but the first item in the hash path. Redact unexpected hashes.
function getRedactedHash(hash: string): string {
    // Don't leak URLs we aren't expecting - they could contain tokens/PII
    const match = hashRegex.exec(hash);
    if (!match) {
        console.warn(`Unexpected hash location "${hash}"`);
        return '#/<unexpected hash location>';
    }

    if (hashVarRegex.test(hash)) {
        return hash.replace(hashVarRegex, "#/$1/<redacted>");
    }

    return hash.replace(hashRegex, "#/$1");
}

// Return the current origin, path and hash separated with a `/`. This does
// not include query parameters.
function getRedactedUrl(): string {
    const { origin, hash } = window.location;
    let { pathname } = window.location;

    // Redact paths which could contain unexpected PII
    if (origin.startsWith('file://')) {
        pathname = "/<redacted>/";
    }

    return origin + pathname + getRedactedHash(hash);
}

interface IData {
    /* eslint-disable camelcase */
    gt_ms?: string;
    e_c?: string;
    e_a?: string;
    e_n?: string;
    e_v?: string;
    ping?: string;
    /* eslint-enable camelcase */
}

interface IVariable {
    id: number;
    expl: string; // explanation
    example: string; // example value
    getTextVariables?(): IVariables; // object to pass as 2nd argument to `_t`
}

const customVariables: Record<string, IVariable> = {
    // The Matomo installation at https://matomo.riot.im is currently configured
    // with a limit of 10 custom variables.
    'App Platform': {
        id: 1,
        expl: _td('The platform you\'re on'),
        example: 'Electron Platform',
    },
    'App Version': {
        id: 2,
        expl: _td('The version of %(brand)s'),
        getTextVariables: () => ({
            brand: SdkConfig.get().brand,
        }),
        example: '15.0.0',
    },
    'User Type': {
        id: 3,
        expl: _td('Whether or not you\'re logged in (we don\'t record your username)'),
        example: 'Logged In',
    },
    'Chosen Language': {
        id: 4,
        expl: _td('Your language of choice'),
        example: 'en',
    },
    'Instance': {
        id: 5,
        expl: _td('Which officially provided instance you are using, if any'),
        example: 'app',
    },
    'RTE: Uses Richtext Mode': {
        id: 6,
        expl: _td('Whether or not you\'re using the Richtext mode of the Rich Text Editor'),
        example: 'off',
    },
    'Homeserver URL': {
        id: 7,
        expl: _td('Your homeserver\'s URL'),
        example: 'https://matrix.org',
    },
    'Touch Input': {
        id: 8,
        expl: _td("Whether you're using %(brand)s on a device where touch is the primary input mechanism"),
        getTextVariables: () => ({
            brand: SdkConfig.get().brand,
        }),
        example: 'false',
    },
    'Breadcrumbs': {
        id: 9,
        expl: _td("Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)"),
        example: 'disabled',
    },
    'Installed PWA': {
        id: 10,
        expl: _td("Whether you're using %(brand)s as an installed Progressive Web App"),
        getTextVariables: () => ({
            brand: SdkConfig.get().brand,
        }),
        example: 'false',
    },
};

function whitelistRedact(whitelist: string[], str: string): string {
    if (whitelist.includes(str)) return str;
    return '<redacted>';
}

const UID_KEY = "mx_Riot_Analytics_uid";
const CREATION_TS_KEY = "mx_Riot_Analytics_cts";
const VISIT_COUNT_KEY = "mx_Riot_Analytics_vc";
const LAST_VISIT_TS_KEY = "mx_Riot_Analytics_lvts";

function getUid(): string {
    try {
        let data = localStorage && localStorage.getItem(UID_KEY);
        if (!data && localStorage) {
            localStorage.setItem(UID_KEY, data = [...Array(16)].map(() => Math.random().toString(16)[2]).join(''));
        }
        return data;
    } catch (e) {
        console.error("Analytics error: ", e);
        return "";
    }
}

const HEARTBEAT_INTERVAL = 30 * 1000; // seconds

export class Analytics {
    private baseUrl: URL = null;
    private siteId: string = null;
    private visitVariables: Record<number, [string, string]> = {}; // {[id: number]: [name: string, value: string]}
    private firstPage = true;
    private heartbeatIntervalID: number = null;

    private readonly creationTs: string;
    private readonly lastVisitTs: string;
    private readonly visitCount: string;

    constructor() {
        this.creationTs = localStorage && localStorage.getItem(CREATION_TS_KEY);
        if (!this.creationTs && localStorage) {
            localStorage.setItem(CREATION_TS_KEY, this.creationTs = String(new Date().getTime()));
        }

        this.lastVisitTs = localStorage && localStorage.getItem(LAST_VISIT_TS_KEY);
        this.visitCount = localStorage && localStorage.getItem(VISIT_COUNT_KEY) || "0";
        this.visitCount = String(parseInt(this.visitCount, 10) + 1); // increment
        if (localStorage) {
            localStorage.setItem(VISIT_COUNT_KEY, this.visitCount);
        }
    }

    public get disabled() {
        return !this.baseUrl;
    }

    public canEnable() {
        const config = SdkConfig.get();
        return navigator.doNotTrack !== "1" && config && config.piwik && config.piwik.url && config.piwik.siteId;
    }

    /**
     * Enable Analytics if initialized but disabled
     * otherwise try and initalize, no-op if piwik config missing
     */
    public async enable() {
        if (!this.disabled) return;
        if (!this.canEnable()) return;
        const config = SdkConfig.get();

        this.baseUrl = new URL("piwik.php", config.piwik.url);
        // set constants
        this.baseUrl.searchParams.set("rec", "1"); // rec is required for tracking
        this.baseUrl.searchParams.set("idsite", config.piwik.siteId); // rec is required for tracking
        this.baseUrl.searchParams.set("apiv", "1"); // API version to use
        this.baseUrl.searchParams.set("send_image", "0"); // we want a 204, not a tiny GIF
        // set user parameters
        this.baseUrl.searchParams.set("_id", getUid()); // uuid
        this.baseUrl.searchParams.set("_idts", this.creationTs); // first ts
        this.baseUrl.searchParams.set("_idvc", this.visitCount); // visit count
        if (this.lastVisitTs) {
            this.baseUrl.searchParams.set("_viewts", this.lastVisitTs); // last visit ts
        }

        const platform = PlatformPeg.get();
        this.setVisitVariable('App Platform', platform.getHumanReadableName());
        try {
            this.setVisitVariable('App Version', await platform.getAppVersion());
        } catch (e) {
            this.setVisitVariable('App Version', 'unknown');
        }

        this.setVisitVariable('Chosen Language', getCurrentLanguage());

        const hostname = window.location.hostname;
        if (hostname === 'riot.im') {
            this.setVisitVariable('Instance', window.location.pathname);
        } else if (hostname.endsWith('.element.io')) {
            this.setVisitVariable('Instance', hostname.replace('.element.io', ''));
        }

        let installedPWA = "unknown";
        try {
            // Known to work at least for desktop Chrome
            installedPWA = String(window.matchMedia('(display-mode: standalone)').matches);
        } catch (e) { }
        this.setVisitVariable('Installed PWA', installedPWA);

        let touchInput = "unknown";
        try {
            // MDN claims broad support across browsers
            touchInput = String(window.matchMedia('(pointer: coarse)').matches);
        } catch (e) { }
        this.setVisitVariable('Touch Input', touchInput);

        // start heartbeat
        this.heartbeatIntervalID = window.setInterval(this.ping.bind(this), HEARTBEAT_INTERVAL);
    }

    /**
     * Disable Analytics, stop the heartbeat and clear identifiers from localStorage
     */
    public disable() {
        if (this.disabled) return;
        this.trackEvent('Analytics', 'opt-out');
        window.clearInterval(this.heartbeatIntervalID);
        this.baseUrl = null;
        this.visitVariables = {};
        localStorage.removeItem(UID_KEY);
        localStorage.removeItem(CREATION_TS_KEY);
        localStorage.removeItem(VISIT_COUNT_KEY);
        localStorage.removeItem(LAST_VISIT_TS_KEY);
    }

    private async _track(data: IData) {
        if (this.disabled) return;

        const now = new Date();
        const params = {
            ...data,
            url: getRedactedUrl(),

            _cvar: JSON.stringify(this.visitVariables), // user custom vars
            res: `${window.screen.width}x${window.screen.height}`, // resolution as WWWWxHHHH
            rand: String(Math.random()).slice(2, 8), // random nonce to cache-bust
            h: now.getHours(),
            m: now.getMinutes(),
            s: now.getSeconds(),
        };

        const url = new URL(this.baseUrl.toString()); // copy
        for (const key in params) {
            url.searchParams.set(key, params[key]);
        }

        try {
            await window.fetch(url.toString(), {
                method: "GET",
                mode: "no-cors",
                cache: "no-cache",
                redirect: "follow",
            });
        } catch (e) {
            console.error("Analytics error: ", e);
        }
    }

    public ping() {
        this._track({
            ping: "1",
        });
        localStorage.setItem(LAST_VISIT_TS_KEY, String(new Date().getTime())); // update last visit ts
    }

    public trackPageChange(generationTimeMs?: number) {
        if (this.disabled) return;
        if (this.firstPage) {
            // De-duplicate first page
            // router seems to hit the fn twice
            this.firstPage = false;
            return;
        }

        if (typeof generationTimeMs !== 'number') {
            console.warn('Analytics.trackPageChange: expected generationTimeMs to be a number');
            // But continue anyway because we still want to track the change
        }

        this._track({
            gt_ms: String(generationTimeMs),
        });
    }

    public trackEvent(category: string, action: string, name?: string, value?: string) {
        if (this.disabled) return;
        this._track({
            e_c: category,
            e_a: action,
            e_n: name,
            e_v: value,
        });
    }

    private setVisitVariable(key: keyof typeof customVariables, value: string) {
        if (this.disabled) return;
        this.visitVariables[customVariables[key].id] = [key, value];
    }

    public setLoggedIn(isGuest: boolean, homeserverUrl: string) {
        if (this.disabled) return;

        const config = SdkConfig.get();
        if (!config.piwik) return;

        const whitelistedHSUrls = config.piwik.whitelistedHSUrls || [];

        this.setVisitVariable('User Type', isGuest ? 'Guest' : 'Logged In');
        this.setVisitVariable('Homeserver URL', whitelistRedact(whitelistedHSUrls, homeserverUrl));
    }

    public setBreadcrumbs(state: boolean) {
        if (this.disabled) return;
        this.setVisitVariable('Breadcrumbs', state ? 'enabled' : 'disabled');
    }

    public showDetailsModal = () => {
        let rows = [];
        if (!this.disabled) {
            rows = Object.values(this.visitVariables);
        } else {
            rows = Object.keys(customVariables).map(
                (k) => [
                    k,
                    _t('e.g. %(exampleValue)s', { exampleValue: customVariables[k].example }),
                ],
            );
        }

        const resolution = `${window.screen.width}x${window.screen.height}`;
        const otherVariables = [
            {
                expl: _td('Every page you use in the app'),
                value: _t(
                    'e.g. <CurrentPageURL>',
                    {},
                    {
                        CurrentPageURL: getRedactedUrl,
                    },
                ),
            },
            { expl: _td('Your user agent'), value: navigator.userAgent },
            { expl: _td('Your device resolution'), value: resolution },
        ];

        const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
        Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, {
            title: _t('Analytics'),
            description: <div className="mx_AnalyticsModal">
                <div>{_t('The information being sent to us to help make %(brand)s better includes:', {
                    brand: SdkConfig.get().brand,
                })}</div>
                <table>
                    { rows.map((row) => <tr key={row[0]}>
                        <td>{_t(
                            customVariables[row[0]].expl,
                            customVariables[row[0]].getTextVariables ?
                                customVariables[row[0]].getTextVariables() :
                                null,
                        )}</td>
                        { row[1] !== undefined && <td><code>{ row[1] }</code></td> }
                    </tr>) }
                    { otherVariables.map((item, index) =>
                        <tr key={index}>
                            <td>{ _t(item.expl) }</td>
                            <td><code>{ item.value }</code></td>
                        </tr>,
                    ) }
                </table>
                <div>
                    { _t('Where this page includes identifiable information, such as a room, '
                        + 'user or group ID, that data is removed before being sent to the server.') }
                </div>
            </div>,
        });
    };
}

if (!window.mxAnalytics) {
    window.mxAnalytics = new Analytics();
}
export default window.mxAnalytics;