dcramer · dcramer · Jun 16, 2020 · dcramer · Jun 16, 2020 · dcramer
diff --git a/package.json b/package.json
@@ -6,8 +6,9 @@
     "@mdi/react": "^1.4.0",
     "@mdi/svg": "^5.2.45",
     "@mdi/util": "^0.3.2",
-    "@sentry/browser": "^5.15.5",
-    "@sentry/integrations": "^5.15.5",
+    "@sentry/apm": "^5.17.0",
+    "@sentry/browser": "^5.17.0",
+    "@sentry/integrations": "^5.17.0",
     "@testing-library/jest-dom": "^5.7.0",
     "@testing-library/react": "^10.0.4",
     "@testing-library/user-event": "^10.3.1",
@@ -63,5 +64,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@sentry/types": "^5.17.0"
   }
 }
diff --git a/src/components/PanelKit.tsx b/src/components/PanelKit.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 import { ToastContainer, toast } from "react-toastify";
 import { Flex, Box } from "reflexbox/styled-components";
 import * as Sentry from "@sentry/browser";
-import { CaptureConsole as CaptureConsoleIntegration } from "@sentry/integrations";
 
 import "react-toastify/dist/ReactToastify.css";
 import "../Toast.css";
@@ -13,6 +12,7 @@ import HomeAssistant from "../hass";
 import EventManager from "./EventManager";
 import Header from "./Header";
 import TileErrorBoundary from "./TileErrorBoundary";
+import { setupSentry } from "../sentry";
 
 const Container = styled.div``;
 
@@ -44,14 +44,13 @@ export default class PanelKit extends Component<Props, State> {
     const sentryDsn =
       process.env.REACT_APP_SENTRY_DSN || this.props.config.sentryDsn;
     if (sentryDsn) {
-      console.log(`[sentry] Initialized with DSN: ${sentryDsn}`);
-      Sentry.init({
+      setupSentry({
         dsn: sentryDsn,
-        integrations: [
-          new CaptureConsoleIntegration({
-            levels: ["warn", "error"],
-          }),
-        ],
+        release: process.env.REACT_APP_GIT_SHA,
+        environment: process.env.NODE_ENV || "development",
+      });
+      Sentry.configureScope((scope) => {
+        scope.setTransaction("panelkit.boot");
       });
     }
 

diff --git a/src/hass.tsx b/src/hass.tsx
@@ -1,4 +1,6 @@
 import { Entity } from "./types";
+import { startSpan } from "./sentry";
+import { Span, SpanStatus } from "@sentry/apm";
 
 enum State {
   DISCONNECTED = "DISCONNECTED",
@@ -13,6 +15,19 @@ enum Phase {
 
 const DEFAULT_TIMEOUT = 250; // ms
 
+const ERROR_MAP: {
+  [code: number]: SpanStatus;
+} = {
+  // default
+  0: SpanStatus.UnknownError,
+  // A non-increasing identifier has been supplied.
+  1: SpanStatus.InvalidArgument,
+  // Received message is not in expected format (voluptuous validation error).
+  2: SpanStatus.InvalidArgument,
+  // Requested item cannot be found
+  3: SpanStatus.NotFound,
+};
+
 const makeSubscriberId = (): string => {
   const s4 = () => {
     return Math.floor((1 + Math.random()) * 0x10000)
@@ -59,6 +74,7 @@ export interface MessageResult {
   result: any;
   error: {
     message: string;
+    code?: number;
   } | null;
   success: boolean;
   [key: string]: any;
@@ -89,7 +105,7 @@ export default class HomeAssistant {
   private _messageCounter: number = 1;
   private _hasPrepared: boolean = false;
   private _shouldReconnect: boolean = false;
-  private _pendingRequests: Map<number, [Function, Function]>;
+  private _pendingRequests: Map<number, [Function, Function, Span | undefined]>;
   private _pendingChanges: Map<number, SuggestedChanges>;
   private _eventSubscribers: EventSubscriber[];
   private _rootSubscriptions: Map<string, string>;
@@ -209,10 +225,17 @@ export default class HomeAssistant {
     switch (payload.type) {
       case "auth_required":
         if (this.accessToken) {
+          // auth requires _no_ ID, which means we can't correlate the message directly
+          const span = startSpan({
            op: "sendCommand",
+            description: "auth",
+          });
           this.sendMessage({
             type: "auth",
             access_token: this.accessToken,
           });
+          // TODO(dcramer): this should finish only after auth response
+          if (span) span.finish();
         } else {
           console.error("[hass] No authentication token configured");
           this.disconnect();
@@ -239,14 +262,22 @@ export default class HomeAssistant {
         if (!promiseHandler) {
           console.warn("[hass] No pending request found for event", payload.id);
         } else {
-          let [resolve, reject] = promiseHandler;
+          let [resolve, reject, span] = promiseHandler;
           this._pendingRequests.delete(payload.id);
           if (payload.success) {
+            if (span) {
+              span.setStatus(SpanStatus.Ok);
+            }
             setTimeout(() => {
               this._pendingChanges.delete(payload.id);
             }, 1000);
             resolve(payload);
           } else if (payload.error) {
+            if (span) {
+              span.setStatus(
+                ERROR_MAP[payload.error.code || 0] || SpanStatus.UnknownError
+              );
+            }
             const error = new Error(payload.error.message);
             (error as any).payload = payload;
             const changes = this._pendingChanges.get(payload.id);
@@ -258,6 +289,10 @@ export default class HomeAssistant {
             }
             reject(error);
           }
+
+          if (span) {
+            span.finish();
+          }
         }
         break;
       default:
@@ -429,8 +464,12 @@ export default class HomeAssistant {
     suggestedChanges: SuggestedChanges | null = null
   ): CancellablePromise<MessageResult> {
     const id = this._messageCounter;
+    const span = startSpan({
+      op: "sendCommand",
+      description: message.type,
+    });
     const promise = new Promise((resolve, reject) => {
-      this._pendingRequests.set(id, [resolve, reject]);
+      this._pendingRequests.set(id, [resolve, reject, span]);
       if (suggestedChanges) {
         this._pendingChanges.set(id, suggestedChanges);
         // Object.keys(suggestedChanges).forEach((entityId) => {

diff --git a/src/sentry.tsx b/src/sentry.tsx
@@ -0,0 +1,54 @@
+import * as Sentry from "@sentry/browser";
+import {
+  Integrations as ApmIntegrations,
+  Span,
+  Transaction,
+} from "@sentry/apm";
+import { CaptureConsole as CaptureConsoleIntegration } from "@sentry/integrations";
+
+const Tracing = ApmIntegrations.Tracing;
+
+export const setupSentry = (options: { [key: string]: any }) => {
+  console.log(`[sentry] Initialized with DSN: ${options.dsn}`);
+  Sentry.init({
+    tracesSampleRate: 1.0,
+    ...options,
+    integrations: [
+      new CaptureConsoleIntegration({
+        levels: ["error"],
+      }),
+      new ApmIntegrations.Tracing(),
+    ],
+      });
+};
+
+export const startSpan = (options: {
+  description?: string;
+  op?: string;
+}): Span | undefined => {
+  const tracingIntegration = Sentry.getCurrentHub().getIntegration(Tracing);
+  if (!tracingIntegration) {
+    console.warn("startSpan called without tracing integration");
+    return undefined;
+  }
+  const transaction = (tracingIntegration as any).constructor.getTransaction();
+  if (!transaction) {
+    console.info("startSpan called without transaction");
+    return undefined;
+  }
+  return transaction.startChild(options);
+};
+
+export const startTransaction = (options: {
+  name: string;
+  op?: string;
+  description?: string;
+}): Transaction | undefined => {
+  const hub = Sentry.getCurrentHub();
+  const tracingIntegration = hub.getIntegration(Tracing);
+  if (!tracingIntegration) {
+    console.warn("startTransaction called without tracing integration");
+    return undefined;
+  }
+  return Tracing.startIdleTransaction(options);
+};
diff --git a/src/tiles/AlarmTile.tsx b/src/tiles/AlarmTile.tsx
@@ -10,10 +10,10 @@ type AlarmTileProps = TileProps & {
 };
 
 export default class AlarmTile extends Tile<AlarmTileProps> {
-   => {
+   class="x x-first x-last">async 
     const { state } = this.getEntity(this.props.entityId);
     if (ARMED_STATES.has(state)) {
-      this.callService(
+      await this.callService(
         "alarm_control_panel",
         "alarm_disarm",
         {

diff --git a/src/tiles/AutomationTile.tsx b/src/tiles/AutomationTile.tsx
@@ -14,8 +14,8 @@ export default class AutomationTile extends Tile<AutomationTileProps> {
 
   static defaultIcon = "home-automation";
 
-   => {
-    this.callService("automation", this.props.action, {
+   class="x x-first x-last">async 
+    await this.callService("automation", this.props.action, {
       entity_id: this.props.entityId,
     });
   };

diff --git a/src/tiles/CameraTile.tsx b/src/tiles/CameraTile.tsx
@@ -64,7 +64,7 @@ export default class CameraTile extends Tile<CameraTileProps, CameraTileState> {
       });
   };
 
-   => {
+   class="x x-first x-last">async 
     this.openModal();
   };
 

diff --git a/src/tiles/DoorControlTile.tsx b/src/tiles/DoorControlTile.tsx
@@ -11,7 +11,7 @@ type DoorControlTileProps = TileProps & {
 export default class DoorControlTile extends Tile<DoorControlTileProps> {
   static defaultIcon = "door";
 
-   => {
+   class="x x-first x-last">async 
     this.openModal();
   };
 

diff --git a/src/tiles/FanTile.tsx b/src/tiles/FanTile.tsx
@@ -5,9 +5,9 @@ type FanTileProps = TileProps & {
 };
 
 export default class FanTile extends Tile<FanTileProps> {
-   => {
+   class="x x-first x-last">async 
     const { state } = this.getEntity(this.props.entityId);
-    this.callService(
+    await this.callService(
       "fan",
       state === "on" ? "turn_off" : "turn_on",
       {

diff --git a/src/tiles/InputSelectTile.tsx b/src/tiles/InputSelectTile.tsx
@@ -5,7 +5,7 @@ type InputSelectTileProps = TileProps & {
 };
 
 export default class InputSelectTile extends Tile<InputSelectTileProps> {
-       => {
+   class="x x-first x-last">async 
     const {
       state,
       attributes: { options },

diff --git a/src/tiles/LightTile.tsx b/src/tiles/LightTile.tsx
@@ -8,9 +8,9 @@ type LightTileProps = TileProps & {
 };
 
 export default class LightTile extends Tile<LightTileProps> {
-   => {
+   class="x x-first x-last">async 
     const { state } = this.getEntity(this.props.entityId);
-    this.callService(
+    await this.callService(
       "light",
       state === "on" ? "turn_off" : "turn_on",
       {
@@ -22,7 +22,7 @@ export default class LightTile extends Tile<LightTileProps> {
     );
   };
 
-   => {
+   class="x x-first x-last">async 
     this.openModal();
   };
 

diff --git a/src/tiles/LockTile.tsx b/src/tiles/LockTile.tsx
@@ -5,9 +5,9 @@ type LockTileProps = TileProps & {
 };
 
 export default class LockTile extends Tile<LockTileProps> {
-   => {
+   class="x x-first x-last">async 
     const { state } = this.getEntity(this.props.entityId);
-    this.callService(
+    await this.callService(
       "lock",
       state === "locked" ? "unlock" : "lock",
       {

diff --git a/src/tiles/SceneTile.tsx b/src/tiles/SceneTile.tsx
@@ -5,8 +5,8 @@ type SceneTileProps = TileProps & {
 };
 
 export default class SceneTile extends Tile<SceneTileProps> {
-   => {
-    this.callService("scene", "turn_on", {
+   class="x x-first x-last">async 
+    await this.callService("scene", "turn_on", {
       entity_id: this.props.entityId,
     });
   };

diff --git a/src/tiles/ScriptTile.tsx b/src/tiles/ScriptTile.tsx
@@ -8,9 +8,9 @@ type ScriptTileProps = TileProps & {
 export default class ScriptTile extends Tile<ScriptTileProps> {
   static defaultIcon = "script";
 
-   => {
+   class="x x-first x-last">async 
     let [domain, service] = this.props.entityId.split(".", 2);
-    this.callService(domain, service, this.props.data);
+    await this.callService(domain, service, this.props.data);
   };
 
   renderTitle() {

diff --git a/src/tiles/SwitchTile.tsx b/src/tiles/SwitchTile.tsx
@@ -17,9 +17,9 @@ export default class SwitchTile extends Tile<SwitchTileProps> {
     }
   }
 
-   => {
+   class="x x-first x-last">async 
     const { state } = this.getEntity(this.props.entityId);
-    this.callService(
+    await this.callService(
       "switch",
       state === "on" ? "turn_off" : "turn_on",
       {
-Original file line number
+Diff line change
@@ Expand Up @@
       static defaultIcon = "home-automation";
-       => {
-        this.callService("automation", this.props.action, {
+       class="x x-first x-last">async () => {
+        await this.callService("automation", this.props.action, {
           entity_id: this.props.entityId,
         });
       };
@@ Expand Down @@