From 1beb4bb1b918976992bfbacf39412d16146a93b3 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 11 Jul 2023 10:04:39 +0200
Subject: [PATCH] :technologist: (bot) Wrap custom head code scripts with try
 catch

To avoid having the custom head bugs reported on Sentry
---
 packages/embeds/js/package.json               |  2 +-
 .../js/src/utils/injectCustomHeadCode.ts      | 33 +++++++++++++++++++
 .../embeds/js/src/utils/injectHeadCode.ts     |  3 --
 .../embeds/js/src/utils/injectStartProps.ts   |  3 +-
 packages/embeds/react/package.json            |  2 +-
 packages/lib/utils.ts                         | 20 -----------
 6 files changed, 37 insertions(+), 26 deletions(-)
 create mode 100644 packages/embeds/js/src/utils/injectCustomHeadCode.ts
 delete mode 100644 packages/embeds/js/src/utils/injectHeadCode.ts

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 58d2b5e22..be84a8e4b 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/utils/injectCustomHeadCode.ts b/packages/embeds/js/src/utils/injectCustomHeadCode.ts
new file mode 100644
index 000000000..56ca5f32d
--- /dev/null
+++ b/packages/embeds/js/src/utils/injectCustomHeadCode.ts
@@ -0,0 +1,33 @@
+import { isNotDefined } from '@typebot.io/lib/utils'
+
+export const injectCustomHeadCode = (customHeadCode: string) => {
+  customHeadCode = customHeadCode.replace(
+    /<script>/g,
+    `<script>
+try {`
+  )
+  customHeadCode = customHeadCode.replace(
+    /<\/script>/g,
+    `} catch(e) {
+  console.warn("Error while executing custom head code", e)
+}
+</script>`
+  )
+  const headCodes = customHeadCode.split('</noscript>')
+  headCodes.forEach((headCode) => {
+    const [codeToInject, noScriptContentToInject] = headCode.split('<noscript>')
+    const fragment = document
+      .createRange()
+      .createContextualFragment(codeToInject)
+    document.head.append(fragment)
+
+    if (isNotDefined(noScriptContentToInject)) return
+
+    const noScriptElement = document.createElement('noscript')
+    const noScriptContentFragment = document
+      .createRange()
+      .createContextualFragment(noScriptContentToInject)
+    noScriptElement.append(noScriptContentFragment)
+    document.head.append(noScriptElement)
+  })
+}
diff --git a/packages/embeds/js/src/utils/injectHeadCode.ts b/packages/embeds/js/src/utils/injectHeadCode.ts
deleted file mode 100644
index ccd5316c5..000000000
--- a/packages/embeds/js/src/utils/injectHeadCode.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const injectHeadCode = (headCode: string) => {
-  document.head.innerHTML = document.head.innerHTML + headCode
-}
diff --git a/packages/embeds/js/src/utils/injectStartProps.ts b/packages/embeds/js/src/utils/injectStartProps.ts
index fc15b72bc..a10359435 100644
--- a/packages/embeds/js/src/utils/injectStartProps.ts
+++ b/packages/embeds/js/src/utils/injectStartProps.ts
@@ -2,8 +2,9 @@
 import { initGoogleAnalytics } from '@/lib/gtag'
 import { gtmBodyElement } from '@/lib/gtm'
 import { initPixel } from '@/lib/pixel'
-import { injectCustomHeadCode, isNotEmpty } from '@typebot.io/lib/utils'
+import { isNotEmpty } from '@typebot.io/lib/utils'
 import { StartPropsToInject } from '@typebot.io/schemas'
+import { injectCustomHeadCode } from './injectCustomHeadCode'
 
 export const injectStartProps = async (
   startPropsToInject: StartPropsToInject
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index a6eefac3b..ed3cbc0a8 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/lib/utils.ts b/packages/lib/utils.ts
index fec1e9ee5..15ea17ab5 100644
--- a/packages/lib/utils.ts
+++ b/packages/lib/utils.ts
@@ -286,26 +286,6 @@ export const getViewerUrl = (props?: {
 export const parseNumberWithCommas = (num: number) =>
   num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
-export const injectCustomHeadCode = (customHeadCode: string) => {
-  const headCodes = customHeadCode.split('</noscript>')
-  headCodes.forEach((headCode) => {
-    const [codeToInject, noScriptContentToInject] = headCode.split('<noscript>')
-    const fragment = document
-      .createRange()
-      .createContextualFragment(codeToInject)
-    document.head.append(fragment)
-
-    if (isNotDefined(noScriptContentToInject)) return
-
-    const noScriptElement = document.createElement('noscript')
-    const noScriptContentFragment = document
-      .createRange()
-      .createContextualFragment(noScriptContentToInject)
-    noScriptElement.append(noScriptContentFragment)
-    document.head.append(noScriptElement)
-  })
-}
-
 export const getAtPath = <T>(obj: T, path: string): unknown => {
   if (isNotDefined(obj)) return undefined
   const pathParts = path.split('.')