Add posthog event capturing for quickconnect demo

Author: Craiting

frontend/package-lock.json

@@ -2,8 +2,8 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  "engines" : { 
-    "node" : "^16.0.0"
+  "engines": {
+    "node": "^16.0.0"
   },
   "dependencies": {
     "@kyper/button": "^3.1.0",
@@ -16,6 +16,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "posthog-js": "^1.33.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-scripts": "5.0.0",

frontend/package.json

@@ -1,19 +1,23 @@
-import { useState } from 'react';
-
 import LaunchButton from "./components/LaunchButton";
 import UserEndpoints from "./components/UserEndpoints";
+import posthog from 'posthog-js';
 
+import { useEffect, useState } from 'react';
 
 function App() {
   const [userGuid, setUserGuid] = useState(null);
   const [memberGuid, setMemberGuid] = useState(null);
 
+  useEffect(() => {
+    posthog.init('phc_kequjnByvXoLjRawiaNEMoai4tcBWsi9iLlIWPYB7JS', { api_host: 'https://app.posthog.com', autocapture: false })
+  }, [])
+
 
   return (
     <div className="App">
       <div className="body">
         {userGuid === null && memberGuid === null ? (
-          <LaunchButton setUserGuid={setUserGuid} setMemberGuid={setMemberGuid} />
+          <LaunchButton setUserGuid={setUserGuid} setMemberGuid={setMemberGuid} posthog={posthog} />
         ) :
           (
             <UserEndpoints userGuid={userGuid} memberGuid={memberGuid} />

frontend/src/App.js

@@ -9,7 +9,7 @@ import { Dots } from '@kyper/progressindicators';
 import { Text } from '@kyper/text'
 import { Trash } from '@kyper/icon/Trash'
 
-function LaunchButton({ setUserGuid, setMemberGuid }) {
+function LaunchButton({ setUserGuid, setMemberGuid, posthog }) {
   const [connectWidgetUrl, setConnectWidgetUrl] = useState("");
   const [errorMessage, setErrorMessage] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -218,6 +218,14 @@ function LaunchButton({ setUserGuid, setMemberGuid }) {
             widgetUrl={connectWidgetUrl}
             onEvent={(event) => {
               console.log('MX PostMessage: ', event)
+              const user_guid = event.metadata.user_guid;
+              if (user_guid) {
+                console.log('identifying user on posthog');
+                posthog.identify(user_guid);
+              }
+
+              posthog.capture(`Widget Event: ${event.type}`);
+
               if (event.type === 'mx/connect/memberConnected') {
                 setUserGuid(event.metadata.user_guid)
                 setMemberGuid(event.metadata.member_guid)

frontend/src/components/LaunchButton.js

@@ -9,6 +9,8 @@ gem 'dotenv', '~> 2.7'
 
 gem 'mx-platform-ruby'
 
+gem 'posthog-ruby'
+
 group :test do
   # Test it with RSpec (BDD for Ruby)
   gem 'rspec-core'

ruby/Gemfile

@@ -2,6 +2,7 @@ GEM
   remote: https://rubygems.org/
   specs:
     colorize (0.8.1)
+    concurrent-ruby (1.1.9)
     dotenv (2.7.6)
     faraday (1.10.0)
       faraday-em_http (~> 1.0)
@@ -38,6 +39,8 @@ GEM
       ruby2_keywords (~> 0.0.1)
     mx-platform-ruby (0.13.1)
       faraday (~> 1.0, >= 1.0.1)
+    posthog-ruby (2.0.0)
+      concurrent-ruby (~> 1, < 1.1.10)
     rack (2.2.3.1)
     rack-protection (2.2.0)
       rack
@@ -62,6 +65,7 @@ DEPENDENCIES
   dotenv (~> 2.7)
   httparty (~> 0.20.0)
   mx-platform-ruby
+  posthog-ruby
   rack (>= 2.2.3.1)
   rspec-core
   sinatra

ruby/Gemfile.lock

@@ -8,9 +8,10 @@
 require 'base64'
 require 'date'
 require 'json'
+require 'mx-platform-ruby'
+require 'posthog'
 require 'sinatra'
 require 'sinatra/cross_origin'
-require 'mx-platform-ruby'
 
 set :port, ENV['APP_PORT'] || 8000
 
@@ -38,6 +39,12 @@
 api_client.default_headers['Accept'] = 'application/vnd.mx.api.v1+json'
 mx_platform_api = ::MxPlatformRuby::MxPlatformApi.new(api_client)
 
+posthog = PostHog::Client.new({
+                                api_key: ENV['POST_HOG_API_KEY'],
+                                host: ENV['POST_HOG_HOST'], # You can remove this line if you're using https://app.posthog.com
+                                on_error: proc { |_status, msg| print msg }
+                              })
+
 # Checks the env file and production config if in production mode
 test_config(mx_platform_api)
 
@@ -69,13 +76,11 @@ def create_user(user_id, mx_platform_api)
 end
 
 delete '/api/user/:guid' do
-  begin
-    mx_platform_api.delete_user(params[:guid])
-    { :user_guid => params[:guid] }.to_json
-  rescue ::MxPlatformRuby::ApiError => e
-    puts "Error when calling MxPlatformApi->delete_user: #{e.message}"
-    [400, e.response_body]
-  end
+  mx_platform_api.delete_user(params[:guid])
+  { user_guid: params[:guid] }.to_json
+rescue ::MxPlatformRuby::ApiError => e
+  puts "Error when calling MxPlatformApi->delete_user: #{e.message}"
+  [400, e.response_body]
 end
 
 post '/api/get_mxconnect_widget_url' do
@@ -87,6 +92,13 @@ def create_user(user_id, mx_platform_api)
 
     # create user if no user_guid given
     user_guid = data['user_guid'].nil? ? create_user(external_id, mx_platform_api) : data['user_guid']
+    posthog.capture({
+                      distinct_id: user_guid,
+                      event: 'widget_request_api',
+                      properties: {
+                        test: '123'
+                      }
+                    })
 
     request_body = ::MxPlatformRuby::WidgetRequestBody.new(
       widget_url: ::MxPlatformRuby::WidgetRequest.new(
@@ -111,12 +123,23 @@ def create_user(user_id, mx_platform_api)
 get '/users/:user_guid/members/:member_guid/verify' do
   content_type :json
   begin
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'begin verify job'
+                    })
     # if widget was not in verification mode
     # mx_platform_api.verify_member(member_guid, user_guid)
     # poll member status answer MFAs
     response = mx_platform_api.list_account_numbers_by_member(params[:member_guid], params[:user_guid])
     response.to_hash.to_json
   rescue ::MxPlatformRuby::ApiError => e
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'verify failed',
+                      properties: {
+                        error_message: "Error when calling MxPlatformApi->list_account_numbers_by_member: #{e.message}"
+                      }
+                    })
     puts "Error when calling MxPlatformApi->list_account_numbers_by_member: #{e.message}"
     [400, e.response_body]
   end
@@ -125,6 +148,10 @@ def create_user(user_id, mx_platform_api)
 post '/users/:user_guid/members/:member_guid/identify' do
   content_type :json
   begin
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'begin identify job'
+                    })
     response = mx_platform_api.identify_member(
       params[:member_guid],
       params[:user_guid]
@@ -143,6 +170,10 @@ def create_user(user_id, mx_platform_api)
       params[:member_guid],
       params[:user_guid]
     )
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'finish identify job', properties: { response: response.to_hash }
+                    })
     response.to_hash.to_json
   rescue ::MxPlatformRuby::ApiError => e
     puts "Error when calling MxPlatformApi->list_account_owners_by_member: #{e.message}"
@@ -154,6 +185,10 @@ def create_user(user_id, mx_platform_api)
   content_type :json
   begin
     response = mx_platform_api.list_user_accounts(params[:user_guid])
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'finish check_balance job', properties: { response: response.to_hash }
+                    })
     response.to_hash.to_json
   rescue ::MxPlatformRuby::ApiError => e
     puts "Error when calling MxPlatformApi->list_user_accounts: #{e.message}"
@@ -164,6 +199,10 @@ def create_user(user_id, mx_platform_api)
 post '/users/:user_guid/members/:member_guid/check_balance' do
   content_type :json
   begin
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'begin check_balance job'
+                    })
     response = mx_platform_api.check_balances(
       params[:member_guid],
       params[:user_guid]
@@ -182,6 +221,10 @@ def create_user(user_id, mx_platform_api)
       params[:member_guid],
       params[:user_guid]
     )
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'getting transactions', properties: { response: response.to_hash }
+                    })
     response.to_hash.to_json
   rescue ::MxPlatformRuby::ApiError => e
     puts "Error when calling MxPlatformApi->list_transactions_by_member: #{e.message}"
@@ -196,6 +239,10 @@ def create_user(user_id, mx_platform_api)
       params[:member_guid],
       params[:user_guid]
     )
+    posthog.capture({
+                      distinct_id: params[:user_guid],
+                      event: 'getting member status', properties: { response: response.to_hash }
+                    })
     response.to_hash.to_json
   rescue ::MxPlatformRuby::ApiError => e
     puts "Error when calling MxPlatformApi->read_member_status: #{e.message}"