Track query run card renderer time in GA (#11064)

frontend/src/metabase/lib/performance.js

+// startTimer starts a timer and returns a callback function.
+// Example usage:
+// const t = startTimer()
+// await vSlow()
+// t(duration => console.log(`That took ${duration}ms!`))
+// The function passed to `t` won't get called if `performance` isn't available.
+export function startTimer() {
+  if (typeof performance !== "object") {
+    // if the current environment doesn't have performance return a no-op function
+    return () => {};
+  }
+  const start = performance.now();
+  return f => f(performance.now() - start);
+}

frontend/src/metabase/query_builder/actions.js

@@ -14,6 +14,7 @@ import { push, replace } from "react-router-redux";
 import { setErrorPage } from "metabase/redux/app";
 
 import MetabaseAnalytics from "metabase/lib/analytics";
+import { startTimer } from "metabase/lib/performance";
 import {
   loadCard,
   startNewCard,
@@ -942,21 +943,27 @@ export const runQuestionQuery = ({
     const startTime = new Date();
     const cancelQueryDeferred = defer();
 
+    const queryTimer = startTimer();
+
     question
       .apiGetResults({
         cancelDeferred: cancelQueryDeferred,
         ignoreCache: ignoreCache,
         isDirty: cardIsDirty,
       })
-      .then(queryResults => dispatch(queryCompleted(question, queryResults)))
+      .then(queryResults => {
+        queryTimer(duration =>
+          MetabaseAnalytics.trackEvent(
+            "QueryBuilder",
+            "Run Query",
+            question.query().datasetQuery().type,
+            duration,
+          ),
+        );
+        return dispatch(queryCompleted(question, queryResults));
+      })
       .catch(error => dispatch(queryErrored(startTime, error)));
 
-    MetabaseAnalytics.trackEvent(
-      "QueryBuilder",
-      "Run Query",
-      question.query().datasetQuery().type,
-    );
-
     // TODO Move this out from Redux action asap
     // HACK: prevent SQL editor from losing focus
     try {

frontend/src/metabase/visualizations/components/CardRenderer.jsx

@@ -3,8 +3,11 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
+import _ from "underscore";
 
 import ExplicitSize from "metabase/components/ExplicitSize";
+import MetabaseAnalytics from "metabase/lib/analytics";
+import { startTimer } from "metabase/lib/performance";
 
 import { isSameSeries } from "metabase/visualizations/lib/utils";
 
@@ -16,6 +19,11 @@ type Props = VisualizationProps & {
   renderer: (element: Element, props: VisualizationProps) => DeregisterFunction,
 };
 
+// We track this as part of the render loop.
+// It's throttled to prevent pounding GA on every prop update.
+// $FlowFixMe
+const trackEventThrottled = _.throttle(MetabaseAnalytics.trackEvent, 10000);
+
 @ExplicitSize({ wrapped: true })
 export default class CardRenderer extends Component {
   props: Props;
@@ -91,7 +99,12 @@ export default class CardRenderer extends Component {
     }
 
     try {
+      const t = startTimer();
       this._deregister = this.props.renderer(element, this.props);
+      t(duration => {
+        const { display } = this.props.card;
+        trackEventThrottled("Visualization", "Render Card", display, duration);
+      });
     } catch (err) {
       console.error(err);
       this.props.onRenderError(err.message || err);