🔊 Add response debug log for failing requests without errors

.vscode/settings.json

@@ -5,7 +5,7 @@
   "i18n-ally.enabledFrameworks": ["custom"],
   "i18n-ally.sortKeys": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/components/Bot.tsx

@@ -51,7 +51,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
       typeof props.typebot === 'string' ? props.typebot : undefined
     const isPreview =
       typeof props.typebot !== 'string' || (props.isPreview ?? false)
-    const { data, error } = await startChatQuery({
+    const { data, error, response } = await startChatQuery({
       stripeRedirectStatus: urlParams.get('redirect_status') ?? undefined,
       typebot: props.typebot,
       apiHost: props.apiHost,
@@ -81,6 +81,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
 
     if (!data) {
       if (error) console.error(error)
+      console.error({ data, error, response })
       return setError(new Error("Error! Couldn't initiate the chat."))
     }
 

packages/embeds/js/src/queries/startChatQuery.ts

@@ -41,7 +41,7 @@ export async function startChatQuery({
     : undefined
   if (paymentInProgressState) {
     removePaymentInProgressFromStorage()
-    const { data, error } = await sendRequest<InitialChatReply>({
+    const { data, error, response } = await sendRequest<InitialChatReply>({
       method: 'POST',
       url: `${isNotEmpty(apiHost) ? apiHost : guessApiHost()}/api/v1/sessions/${
         paymentInProgressState.sessionId
@@ -64,11 +64,12 @@ export async function startChatQuery({
           }
         : undefined,
       error,
+      response,
     }
   }
   const typebotId = typeof typebot === 'string' ? typebot : typebot.id
   if (isPreview) {
-    const { data, error } = await sendRequest<InitialChatReply>({
+    const { data, error, response } = await sendRequest<InitialChatReply>({
       method: 'POST',
       url: `${
         isNotEmpty(apiHost) ? apiHost : guessApiHost()
@@ -82,10 +83,11 @@ export async function startChatQuery({
     return {
       data,
       error,
+      response,
     }
   }
 
-  const { data, error } = await sendRequest<InitialChatReply>({
+  const { data, error, response } = await sendRequest<InitialChatReply>({
     method: 'POST',
     url: `${
       isNotEmpty(apiHost) ? apiHost : guessApiHost()
@@ -100,5 +102,6 @@ export async function startChatQuery({
   return {
     data,
     error,
+    response,
   }
 }

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/lib/utils.ts

@@ -28,10 +28,11 @@ export const sendRequest = async <ResponseData>(
         body?: Record<string, unknown> | FormData
       }
     | string
-): Promise<{ data?: ResponseData; error?: Error }> => {
+): Promise<{ data?: ResponseData; error?: Error; response?: Response }> => {
+  let response
   try {
     const url = typeof params === 'string' ? params : params.url
-    const response = await fetch(url, {
+    response = await fetch(url, {
       method: typeof params === 'string' ? 'GET' : params.method,
       mode: 'cors',
       headers:
@@ -47,10 +48,10 @@ export const sendRequest = async <ResponseData>(
     })
     const data = await response.json()
     if (!response.ok) throw 'error' in data ? data.error : data
-    return { data }
+    return { data, response }
   } catch (e) {
     console.error(e)
-    return { error: e as Error }
+    return { error: e as Error, response }
   }
 }