🧑‍💻 (bot) Wrap custom head code scripts with try catch

To avoid having the custom head bugs reported on Sentry

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",

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)
+  })
+}

packages/embeds/js/src/utils/injectHeadCode.ts

@@ -1,3 +0,0 @@
-export const injectHeadCode = (headCode: string) => {
-  document.head.innerHTML = document.head.innerHTML + headCode
-}

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

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",

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('.')