From b6ce4997bdbc3dda8bc93bd0146c5948c1720046 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Wed, 22 Jun 2022 17:58:04 +0100
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20datadog=20cli?=
 =?UTF-8?q?ent=20script=20on=20html=20head?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
diff --git a/public/index.html b/public/index.html
index 05d108fa..51592c05 100644
--- a/public/index.html
+++ b/public/index.html
@@ -66,6 +66,21 @@
       data-domain="app.jelly.xyz"
       src="https://plausible.io/js/plausible.js"
     ></script>
+    <!-- datadog: start -->
+    <script
+      type="text/javascript"
+      src="https://www.datadoghq-browser-agent.com/datadog-logs-v4.js"
+    ></script>
+    <script>
+      window.DD_LOGS &&
+        DD_LOGS.init({
+          clientToken: '%REACT_APP_DATADOG_CLIENT_TOKEN%',
+          site: 'datadoghq.eu',
+          forwardErrorsToLogs: true,
+          sampleRate: 100,
+        });
+    </script>
+    <!-- datadog: end -->
   </head>
   <body>
     <noscript

From 52323a42ab9182c4125491e136412593586334d9 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Wed, 22 Jun 2022 20:13:37 +0100
Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20datalog=20js?=
 =?UTF-8?q?=20to=20html=20head?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 51592c05..a285baac 100644
--- a/public/index.html
+++ b/public/index.html
@@ -76,9 +76,14 @@
         DD_LOGS.init({
           clientToken: '%REACT_APP_DATADOG_CLIENT_TOKEN%',
           site: 'datadoghq.eu',
-          forwardErrorsToLogs: true,
+          forwardErrorsToLogs: false,
+          forwardConsoleLogs: [],
           sampleRate: 100,
+          service: 'env:%REACT_APP_NODE_ENV%:jelly_web_client',
         });
+      DD_LOGS.onReady(function () {
+        window.DD_LOGS_IS_READY = true;
+      });
     </script>
     <!-- datadog: end -->
   </head>

From bb924de05855e61534505a33ead5ea46d94ff23c Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Wed, 22 Jun 2022 20:14:09 +0100
Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20log=20to=20di?=
 =?UTF-8?q?rectbuy=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../marketplace/async-thunks/direct-buy.ts    | 54 +++++++++++++++++--
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/store/features/marketplace/async-thunks/direct-buy.ts b/src/store/features/marketplace/async-thunks/direct-buy.ts
index befcfe65..e0e088ac 100644
--- a/src/store/features/marketplace/async-thunks/direct-buy.ts
+++ b/src/store/features/marketplace/async-thunks/direct-buy.ts
@@ -2,7 +2,7 @@ import { Principal } from '@dfinity/principal';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 import { notificationActions } from '../../notifications';
-import { DirectBuy } from '../marketplace-slice';
+import { DirectBuy, marketplaceActions } from '../marketplace-slice';
 import config from '../../../../config/env';
 import wicpIdlFactory from '../../../../declarations/wicp.did';
 import marketplaceIdlFactory from '../../../../declarations/marketplace.did';
@@ -10,7 +10,9 @@ import { AppLog } from '../../../../utils/log';
 import { KyasshuUrl } from '../../../../integrations/kyasshu';
 import { errorMessageHandler } from '../../../../utils/error';
 import { parseAmountToE8S } from '../../../../utils/formatters';
-import { marketplaceActions } from '../marketplace-slice';
+import type { RootState } from '../../../store';
+
+import { log, getLogDescription } from '../../../../utils/datadog';
 
 type DirectBuyProps = DefaultCallbacks & DirectBuy;
 
@@ -20,6 +22,16 @@ export const directBuy = createAsyncThunk<
 >('marketplace/directBuy', async (params, { dispatch, getState }) => {
   const { tokenId, price, onSuccess, onFailure } = params;
 
+  const {
+    plug: { principalId: plugPrincipal },
+  } = getState() as RootState;
+
+  const tokenIdTxt = tokenId.toString();
+  const logDescription = getLogDescription({
+    operation: 'directBuy',
+    parts: [tokenIdTxt, plugPrincipal || 'n/a'],
+  });
+
   const {
     marketplace: { sumOfUserAllowance },
   }: any = getState();
@@ -61,11 +73,32 @@ export const directBuy = createAsyncThunk<
       methodName: 'directBuy',
       args: [nonFungibleContractAddress, tokenId],
       onFail: (res: any) => {
+        log({
+          type: 'error',
+          description: logDescription,
+          data: {
+            tokenIdTxt,
+            plugPrincipal,
+            error: res.Err,
+          },
+        });
+
         throw res;
       },
       onSuccess: async (res: any) => {
-        if ('Err' in res)
+        if ('Err' in res) {
+          log({
+            type: 'error',
+            description: logDescription,
+            data: {
+              tokenIdTxt,
+              plugPrincipal,
+              error: res.Err,
+            },
+          });
+
           throw new Error(errorMessageHandler(res.Err));
+        }
 
         if (typeof onSuccess !== 'function') return;
 
@@ -78,12 +111,23 @@ export const directBuy = createAsyncThunk<
 
     const batchTxRes = await window.ic?.plug?.batchTransactions([
       WICP_APPROVE,
-      // MKP_DEPOSIT_WICP,
       MKP_DIRECT_BUY,
     ]);
 
     if (!batchTxRes) {
-      throw new Error('Empty response');
+      const errorMsg = 'Empty response';
+
+      log({
+        type: 'error',
+        description: logDescription,
+        data: {
+          tokenIdTxt,
+          plugPrincipal,
+          error: errorMsg,
+        },
+      });
+
+      throw new Error(errorMsg);
     }
 
     return {

From 89532eb8f85d14bdbc0dd868a7da3ba40180eda0 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Wed, 22 Jun 2022 20:22:31 +0100
Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20datadog=20uti?=
 =?UTF-8?q?lities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/datadog.ts | 80 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/utils/datadog.ts

diff --git a/src/utils/datadog.ts b/src/utils/datadog.ts
new file mode 100644
index 00000000..d8d0f209
--- /dev/null
+++ b/src/utils/datadog.ts
@@ -0,0 +1,80 @@
+import { OperationTypes } from '../constants/operations';
+
+type LogType = 'debug' | 'info' | 'warn' | 'error';
+
+interface LogBaseParams {
+  type: LogType;
+  description: string;
+  data?: Record<string, any>;
+}
+
+const RETRY_TIMEOUT = 1400;
+const RETRY_MAX_ATTEMPTS = 1;
+
+const logBase = (
+  { type, description, data }: LogBaseParams,
+  retryCount = 1,
+): void => {
+  if (!(window as any).DD_LOGS_IS_READY) {
+    if (retryCount > RETRY_MAX_ATTEMPTS) {
+      // eslint-disable-next-line no-console
+      console.warn('Oops! Logger not ready, retry attempted...');
+
+      return;
+    }
+
+    retryCount += 1;
+
+    setTimeout(() => {
+      // eslint-disable-next-line no-console
+      console.warn('Oops! Logger not ready, retrying...');
+
+      logBase(
+        {
+          type,
+          description,
+          data,
+        },
+        retryCount,
+      );
+    }, RETRY_TIMEOUT);
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    (window as any).DD_LOGS &&
+      (window as any).DD_LOGS.logger[type](description, data);
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Oops! Logger failed', err);
+  }
+};
+
+type LogParams = Pick<LogBaseParams, 'type' | 'description' | 'data'>;
+
+export const log = ({ type, description, ...data }: LogParams) =>
+  logBase({
+    type,
+    description,
+    data,
+  });
+
+type InfoParams = Pick<LogParams, 'description' | 'data'>;
+
+export const logInfo = ({ description, ...args }: InfoParams) =>
+  logBase({
+    type: 'info',
+    description,
+    ...args,
+  });
+
+interface LogDescriptionParams {
+  operation: keyof typeof OperationTypes;
+  parts: string[];
+}
+
+export const getLogDescription = ({
+  operation,
+  parts,
+}: LogDescriptionParams) => `${operation}:${parts.join(':')}`;
+
