From 873515170eae8ca9f26f65fb35aab398b2cab950 Mon Sep 17 00:00:00 2001
From: Jan Six <six.jan@gmail.com>
Date: Thu, 15 Aug 2024 10:26:48 +0200
Subject: [PATCH] fix #3073

---
 .changeset/silly-beds-drum.md                  |  5 +++++
 .../tokens-studio-for-figma/src/app/sentry.ts  | 18 ++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/silly-beds-drum.md

diff --git a/.changeset/silly-beds-drum.md b/.changeset/silly-beds-drum.md
new file mode 100644
index 000000000..0526377d3
--- /dev/null
+++ b/.changeset/silly-beds-drum.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fixed an issue with UI appearing broken, related to the debug session recording feature
diff --git a/packages/tokens-studio-for-figma/src/app/sentry.ts b/packages/tokens-studio-for-figma/src/app/sentry.ts
index 213b6dd3d..7abbbe8a9 100644
--- a/packages/tokens-studio-for-figma/src/app/sentry.ts
+++ b/packages/tokens-studio-for-figma/src/app/sentry.ts
@@ -16,14 +16,20 @@ export const replay = new Sentry.Replay({
 });
 
 export const setupReplay = () => {
-  const client = Sentry.getCurrentHub().getClient();
+  setTimeout(() => {
+    try {
+      const client = Sentry.getCurrentHub().getClient();
 
-  if (client) {
-    if (!client?.getIntegration(Sentry.Replay)) {
-      // @ts-ignore This should never be undefined after the check above
-      client.addIntegration(replay);
+      if (client) {
+        if (!client?.getIntegration(Sentry.Replay)) {
+          // @ts-ignore This should never be undefined after the check above
+          client.addIntegration(new Replay());
+        }
+      }
+    } catch (error) {
+      console.error('Error setting up Sentry Replay:', error);
     }
-  }
+  }, 2000); // Delay by 2000 milliseconds (2 seconds) to make sure we load in UI properly, see https://github.com/tokens-studio/figma-plugin/issues/3073
 };
 
 export const initializeSentry = () => {