♿ (viewer) Show error message for incompatible browsers

.github/workflows/publish-typebot-js.yml

@@ -15,9 +15,4 @@ jobs:
       - uses: pnpm/action-setup@v2.2.2
       - run: pnpm i --frozen-lockfile
       - run: pnpm turbo build --filter=@typebot.io/js...
-      - name: Set NPM_TOKEN in config
+      - run: cd packages/js && pnpm publish --no-git-checks --access public
-        run: pnpm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
-        working-directory: ./packages/js
-      - name: Publish
-        run: pnpm publish --no-git-checks --access public
-        working-directory: ./packages/js

.github/workflows/publish-typebot-react.yml

@@ -15,9 +15,4 @@ jobs:
       - uses: pnpm/action-setup@v2.2.2
       - run: pnpm i --frozen-lockfile
       - run: pnpm turbo build --filter=@typebot.io/react...
-      - name: Set NPM_TOKEN in config
+      - run: cd packages/react && pnpm publish --no-git-checks --access public
-        run: pnpm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
-        working-directory: ./packages/react
-      - name: Publish
-        run: pnpm publish --no-git-checks --access public
-        working-directory: ./packages/react

.github/workflows/publish_docker_images.yml

@@ -1,8 +1,6 @@
 name: Build Docker images
 
 on:
-  create:
-    tags-ignore: ['js-v*', 'react-v*', 'js-lib-v*']
   push:
     branches: [main]
   pull_request:

apps/viewer/src/components/ErrorPage.tsx

@@ -10,6 +10,7 @@ export const ErrorPage = ({ error }: { error: Error }) => {
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'column',
+        padding: '0 1rem',
       }}
     >
       {isEmpty(getViewerUrl()) ? (
@@ -26,7 +27,7 @@ export const ErrorPage = ({ error }: { error: Error }) => {
           </h2>
         </>
       ) : (
-        <p style={{ fontSize: '24px' }}>{error.message}</p>
+        <p style={{ fontSize: '24px', textAlign: 'center' }}>{error.message}</p>
       )}
     </div>
   )

apps/viewer/src/pages/[[...publicId]].tsx

@@ -7,10 +7,29 @@ import prisma from '../lib/prisma'
 import { TypebotPageProps, TypebotPageV2 } from '@/components/TypebotPageV2'
 import { TypebotPageV3 } from '@/components/TypebotPageV3'
 
+// Browsers that doesn't support ES modules and/or web components
+const incompatibleBrowsers = [
+  {
+    name: 'UC Browser',
+    regex: /ucbrowser/i,
+  },
+  {
+    name: 'Internet Explorer',
+    regex: /msie|trident/i,
+  },
+  {
+    name: 'Opera Mini',
+    regex: /opera mini/i,
+  },
+]
+
 export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext
 ) => {
-  const isIE = /MSIE|Trident/.test(context.req.headers['user-agent'] ?? '')
+  const incompatibleBrowser =
+    incompatibleBrowsers.find((browser) =>
+      browser.regex.test(context.req.headers['user-agent'] ?? '')
+    )?.name ?? null
   const pathname = context.resolvedUrl.split('?')[0]
   const { host, forwardedHost } = getHost(context.req)
   try {
@@ -37,7 +56,7 @@ export const getServerSideProps: GetServerSideProps = async (
     return {
       props: {
         publishedTypebot,
-        isIE,
+        incompatibleBrowser,
         url: `https://${forwardedHost ?? host}${pathname}`,
         customHeadCode:
           isDefined(headCode) && headCode !== '' ? headCode : null,
@@ -48,7 +67,7 @@ export const getServerSideProps: GetServerSideProps = async (
   }
   return {
     props: {
-      isIE,
+      incompatibleBrowser,
       url: `https://${forwardedHost ?? host}${pathname}`,
     },
   }
@@ -102,7 +121,21 @@ const getHost = (
   forwardedHost: req?.headers['x-forwarded-host'] as string | undefined,
 })
 
-const App = ({ publishedTypebot, ...props }: TypebotPageProps) => {
+const App = ({
+  publishedTypebot,
+  incompatibleBrowser,
+  ...props
+}: TypebotPageProps & { incompatibleBrowser: string | null }) => {
+  if (incompatibleBrowser)
+    return (
+      <ErrorPage
+        error={
+          new Error(
+            `Your web browser: ${incompatibleBrowser}, is not supported.`
+          )
+        }
+      />
+    )
   if (!publishedTypebot || publishedTypebot.typebot.isArchived)
     return <NotFoundPage />
   if (publishedTypebot.typebot.isClosed)

packages/js/.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

packages/js/package.json

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

packages/react/.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

packages/react/package.json

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