Release v1.54.4 (#1273)

kevinkim-ogp · web-flow · commit 656aa2ca06c5 · 2025-10-21T17:00:22.000+08:00
chore: show exact date and time of execution
fix: elevated Telegram ETIMEDOUT during tcp.connect 
fix: executions page crashes when it cannot find iconUrl
fix: purge nbsp and invalid characters from all inputs
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -111,5 +111,5 @@
     "tsconfig-paths": "^4.2.0",
     "type-fest": "4.10.3"
   },
-  "version": "1.54.3"
+  "version": "1.54.4"
 }
diff --git a/packages/backend/src/apps/telegram-bot/actions/send-message/index.ts b/packages/backend/src/apps/telegram-bot/actions/send-message/index.ts
@@ -1,6 +1,7 @@
 import { IRawAction } from '@plumber/types'
 
 import StepError from '@/errors/step'
+import logger from '@/helpers/logger'
 
 import { escapeMarkdown, sanitizeMarkdown } from '../../common/markdown-v1'
 import { throwSendMessageError } from '../../common/throw-errors'
@@ -88,6 +89,10 @@ const action: IRawAction = {
     }
     try {
       const response = await $.http.post('/sendMessage', payload)
+      // logging for debugging
+      logger.info(
+        `Telegram ip success: ${response.request?.socket?.remoteAddress}`,
+      )
       $.setActionItem({
         raw: response.data,
       })
diff --git a/packages/backend/src/apps/telegram-bot/common/force-ipv4.ts b/packages/backend/src/apps/telegram-bot/common/force-ipv4.ts
@@ -0,0 +1,22 @@
+import { TBeforeRequest } from '@plumber/types'
+
+import https from 'https'
+
+// Singleton HTTPS agent configured for IPv4 only
+// This helps avoid DNS timeout issues with Telegram's API
+const httpsAgent = new https.Agent({
+  family: 4, // Force IPv4 resolution
+  keepAlive: true,
+  timeout: 30000, // 30 second timeout
+})
+
+const forceIpv4: TBeforeRequest = async ($, requestConfig) => {
+  // Only apply to HTTPS requests (Telegram API uses HTTPS)
+  if (requestConfig.baseURL?.startsWith('https://')) {
+    requestConfig.httpsAgent = httpsAgent
+  }
+
+  return requestConfig
+}
+
+export default forceIpv4
diff --git a/packages/backend/src/apps/telegram-bot/common/throw-errors.ts b/packages/backend/src/apps/telegram-bot/common/throw-errors.ts
@@ -26,6 +26,7 @@ export async function throwSendMessageError(
     err.message.includes('ETIMEDOUT') ||
     err.code === 'ETIMEDOUT'
   ) {
+    logger.error(`Telegram ip error: ${err.resolvedIp}`)
     throw new RetriableError({
       error: 'Timeout error. Telegram may be experiencing issues.',
       delayInMs: 'default',
diff --git a/packages/backend/src/apps/telegram-bot/dynamic-data/get-chat-ids.ts b/packages/backend/src/apps/telegram-bot/dynamic-data/get-chat-ids.ts
@@ -4,6 +4,8 @@ import {
   IGlobalVariable,
 } from '@plumber/types'
 
+import logger from '@/helpers/logger'
+
 import {
   HasTelegramChat,
   TelegramGetUpdatesResponse,
@@ -49,9 +51,11 @@ const dynamicData: IDynamicData = {
     const chatIdsMap: { name: string; value: string }[] = []
     const chatIdsSet = new Set<number>()
     try {
-      const { data } = await $.http.get<TelegramGetUpdatesResponse>(
+      const { data, request } = await $.http.get<TelegramGetUpdatesResponse>(
         getUpdatesApi,
       )
+      // logging for debugging
+      logger.info(`Telegram ip success: ${request?.socket?.remoteAddress}`)
 
       if (!data.result) {
         return {
diff --git a/packages/backend/src/apps/telegram-bot/index.ts b/packages/backend/src/apps/telegram-bot/index.ts
@@ -3,6 +3,7 @@ import { IApp } from '@plumber/types'
 import { getGenericAppQueue } from '@/queues/helpers/get-generic-app-queue'
 
 import addAuthHeader from './common/add-auth-header'
+import forceIpv4 from './common/force-ipv4'
 import rateLimitHandler from './common/interceptor/rate-limit'
 import actions from './actions'
 import auth from './auth'
@@ -17,7 +18,7 @@ const app: IApp = {
   baseUrl: 'https://telegram.org',
   apiBaseUrl: 'https://api.telegram.org',
   primaryColor: '2AABEE',
-  beforeRequest: [addAuthHeader],
+  beforeRequest: [forceIpv4, addAuthHeader],
   requestErrorHandler: rateLimitHandler,
   dynamicData,
   auth,
diff --git a/packages/backend/src/errors/http.ts b/packages/backend/src/errors/http.ts
@@ -7,6 +7,7 @@ import BaseError from './base'
 export default class HttpError extends BaseError {
   response: AxiosResponse
   code?: string
+  resolvedIp?: string
 
   constructor(error: AxiosError) {
     const computedError =
@@ -26,6 +27,9 @@ export default class HttpError extends BaseError {
     // Pass code along
     this.code = error.code
 
+    // add resolved ip for debugging
+    this.resolvedIp = error.request?.socket?.remoteAddress
+
     //
     // Only preserve selected headers to avoid storing sensitive data.
     //
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.54.3",
+  "version": "1.54.4",
   "type": "module",
   "scripts": {
     "dev": "wait-on tcp:3000 && vite --host --force",
diff --git a/packages/frontend/src/components/ControlledAutocomplete/AddNewOptionModal.tsx b/packages/frontend/src/components/ControlledAutocomplete/AddNewOptionModal.tsx
@@ -13,6 +13,7 @@ import {
 } from '@chakra-ui/react'
 import { Button, FormLabel, Input } from '@opengovsg/design-system-react'
 
+import { removeProblematicWhitespace } from '@/components/RichTextEditor/utils'
 import client from '@/graphql/client'
 import { CREATE_TABLE } from '@/graphql/mutations/tiles/create-table'
 import { UPDATE_TABLE } from '@/graphql/mutations/tiles/update-table'
@@ -129,7 +130,9 @@ function AddNewOptionalModal({
               <FormLabel isRequired>Name your tile</FormLabel>
               <Input
                 autoFocus
-                onChange={(e) => setInputValue(e.target.value)}
+                onChange={(e) =>
+                  setInputValue(removeProblematicWhitespace(e.target.value))
+                }
                 value={inputValue}
               />
               <Button
diff --git a/packages/frontend/src/components/ExecutionHeader/index.tsx b/packages/frontend/src/components/ExecutionHeader/index.tsx
@@ -4,7 +4,7 @@ import { Fragment, ReactElement, useCallback } from 'react'
 import { BiChevronLeft } from 'react-icons/bi'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { Flex, Icon, Link, Stack, Text } from '@chakra-ui/react'
-import { Button, Tooltip } from '@opengovsg/design-system-react'
+import { Button } from '@opengovsg/design-system-react'
 import { DateTime } from 'luxon'
 
 import * as URLS from '@/config/urls'
@@ -92,15 +92,11 @@ function ExecutionId(props: Pick<IExecution, 'id'>) {
 
 function ExecutionDate(props: Pick<IExecution, 'createdAt'>) {
   const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10))
-  const relativeCreatedAt = createdAt.toRelative()
 
   return (
-    <Tooltip
-      label={createdAt.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS)}
-      aria-label="Created at tooltip"
-    >
-      <Text textStyle="body-1">{relativeCreatedAt}</Text>
-    </Tooltip>
+    <Text textStyle="body-1">
+      {createdAt.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS)}
+    </Text>
   )
 }
 
diff --git a/packages/frontend/src/components/ExecutionRow/index.tsx b/packages/frontend/src/components/ExecutionRow/index.tsx
@@ -32,7 +32,6 @@ export default function ExecutionRow(props: ExecutionRowProps): ReactElement {
   const { flow, executionSteps } = execution
 
   const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10))
-  const relativeCreatedAt = createdAt.toRelative()
 
   return (
     <Link
@@ -102,7 +101,7 @@ export default function ExecutionRow(props: ExecutionRowProps): ReactElement {
                   color="base.content.medium"
                   textStyle="body-2"
                 >
-                  executed {relativeCreatedAt}
+                  {createdAt.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS)}
                 </Text>
               </VStack>
             </GridItem>
diff --git a/packages/frontend/src/components/ExecutionStep/components/AppIconWithStatus.tsx b/packages/frontend/src/components/ExecutionStep/components/AppIconWithStatus.tsx
@@ -3,7 +3,7 @@ import { Box } from '@chakra-ui/react'
 import AppIcon from '@/components/AppIcon'
 
 interface AppIconWithStatusProps {
-  iconUrl: string
+  iconUrl?: string
   appName: string
   statusIcon: React.ReactElement
 }
diff --git a/packages/frontend/src/components/ExecutionStep/index.tsx b/packages/frontend/src/components/ExecutionStep/index.tsx
@@ -69,7 +69,7 @@ export default function ExecutionStep({
         <HStack p={4} alignItems="center" justifyContent="space-between">
           <HStack gap={2}>
             <AppIconWithStatus
-              iconUrl={app.iconUrl}
+              iconUrl={app?.iconUrl}
               appName={appName}
               statusIcon={statusIcon}
             />
diff --git a/packages/frontend/src/components/FlowAppIcons/index.tsx b/packages/frontend/src/components/FlowAppIcons/index.tsx
@@ -21,7 +21,7 @@ export default function FlowAppIcons(props: FlowAppIconsProps) {
       <AppIcon
         name={firstStep.name}
         variant="rounded"
-        url={firstStep.iconUrl}
+        url={firstStep?.iconUrl}
         h={8}
         w={8}
         isTrigger={true}
@@ -35,7 +35,7 @@ export default function FlowAppIcons(props: FlowAppIconsProps) {
         <AppIcon
           name={lastStep.name}
           variant="rounded"
-          url={lastStep.iconUrl}
+          url={lastStep?.iconUrl}
           h={8}
           w={8}
         />
diff --git a/packages/frontend/src/components/FlowStepConfigurationModal/ChooseAndAddConnection/ConnectionHeader.tsx b/packages/frontend/src/components/FlowStepConfigurationModal/ChooseAndAddConnection/ConnectionHeader.tsx
@@ -43,7 +43,7 @@ export default function ConnectionHeader(props: ConnectionHeaderProps) {
       <Flex justifyContent="center" alignItems="center" gap={2} mt={2}>
         <AppLogoBox imageUrl={mainLogo} />
         <Icon as={BiTransferAlt} boxSize={6} color="base.content.default" />
-        <AppLogoBox imageUrl={selectedApp.iconUrl} />
+        <AppLogoBox imageUrl={selectedApp?.iconUrl} />
       </Flex>
       <Text textStyle="h4">{headerText}</Text>
     </Flex>
diff --git a/packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ChooseApp.tsx b/packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ChooseApp.tsx
@@ -319,7 +319,7 @@ export default function ChooseApp(props: ChooseAppProps) {
                       >
                         <Flex alignItems="center" gap={4}>
                           <Image
-                            src={app.iconUrl}
+                            src={app?.iconUrl}
                             boxSize={8}
                             borderStyle="solid"
                             fit="contain"
diff --git a/packages/frontend/src/components/RichTextEditor/index.tsx b/packages/frontend/src/components/RichTextEditor/index.tsx
@@ -194,7 +194,7 @@ const Editor = ({
       }
       onChange(
         isRich
-          ? editor.getHTML()
+          ? removeProblematicWhitespace(editor.getHTML())
           : removeProblematicWhitespace(editor.getText()),
       )
     },
diff --git a/packages/frontend/src/components/RichTextEditor/utils.test.ts b/packages/frontend/src/components/RichTextEditor/utils.test.ts
@@ -196,4 +196,10 @@ describe('removeProblematicWhitespace', () => {
     const input = 'Hello World'
     expect(removeProblematicWhitespace(input)).toEqual(input)
   })
+
+  it('should handle text with control characters', () => {
+    const input = 'Hello\x00World'
+    const expected = 'HelloWorld'
+    expect(removeProblematicWhitespace(input)).toEqual(expected)
+  })
 })
diff --git a/packages/frontend/src/components/RichTextEditor/utils.ts b/packages/frontend/src/components/RichTextEditor/utils.ts
@@ -256,5 +256,8 @@ export function removeProblematicWhitespace(text: string): string {
       .replace(/(\u200B|\uFEFF|\u200C|\u200D|\u200E)/g, '')
       // Replace non-breaking space with regular space
       .replace(/\u00A0/g, ' ')
+      // Remove null character that breaks DB/JSON
+      // eslint-disable-next-line no-control-regex
+      .replace(/\x00/g, '')
   )
 }
diff --git a/packages/frontend/src/components/SingleSelect/SingleSelectProvider.tsx b/packages/frontend/src/components/SingleSelect/SingleSelectProvider.tsx
@@ -17,6 +17,8 @@ import {
   type UseComboboxStateChangeOptions,
 } from 'downshift'
 
+import { removeProblematicWhitespace } from '../RichTextEditor/utils'
+
 import { useLookupItems } from './hooks/useLookupItems'
 import { defaultFilter } from './utils/defaultFilter'
 import {
@@ -200,12 +202,15 @@ export const SingleSelectProvider = ({
 
   const handleInputChange = useCallback(
     (inputValue: string | undefined) => {
-      const filteredItems = getFilteredItems(inputValue)
+      const sanitisedInput = inputValue
+        ? removeProblematicWhitespace(inputValue)
+        : inputValue // if its undefined, we leave it as is
+      const filteredItems = getFilteredItems(sanitisedInput)
       if (freeSolo) {
-        addFreeSoloItem(filteredItems, inputValue)
+        addFreeSoloItem(filteredItems, sanitisedInput)
       }
       if (addNew?.type === 'inline') {
-        addInlineNewOption(filteredItems, inputValue)
+        addInlineNewOption(filteredItems, sanitisedInput)
       }
       setFilteredItems(filteredItems)
     },
diff --git a/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx b/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx
@@ -9,6 +9,8 @@ import {
 } from '@chakra-ui/react'
 import { Input } from '@opengovsg/design-system-react'
 
+import { removeProblematicWhitespace } from '@/components/RichTextEditor/utils'
+
 import { useSelectContext } from '../../SelectContext'
 import { itemToIcon, itemToLabelString } from '../../utils/itemUtils'
 
@@ -130,6 +132,9 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
               readOnly: !isSearchable || isReadOnly,
               required: isRequired,
               'aria-expanded': !!isOpen,
+              // NOTE: we need to sanitise here because
+              // the form's fieldValue is separate from this inputValue
+              value: removeProblematicWhitespace(inputValue),
             })}
           />
           <ToggleChevron />
diff --git a/packages/frontend/src/components/TextField/index.tsx b/packages/frontend/src/components/TextField/index.tsx
@@ -11,6 +11,7 @@ import {
 } from '@opengovsg/design-system-react'
 import copy from 'clipboard-copy'
 
+import { removeProblematicWhitespace } from '@/components/RichTextEditor/utils'
 import { EditorContext } from '@/contexts/Editor'
 
 const FIELD_MAX_LENGTH = {
@@ -26,9 +27,7 @@ type TextFieldProps = {
   description?: string
   required?: boolean
   multiline?: boolean
-  onChange?: (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void
+  onChange?: (value: string) => void
   onBlur?: (
     event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void
@@ -91,9 +90,12 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
             <SelectedComponent
               {...field}
               placeholder={placeholder}
-              onChange={(...args) => {
-                controllerOnChange(...args)
-                onChange?.(...args)
+              onChange={(event) => {
+                const sanitised = removeProblematicWhitespace(
+                  event.target.value,
+                )
+                controllerOnChange(sanitised)
+                onChange?.(sanitised)
               }}
               onBlur={(...args) => {
                 controllerOnBlur()
diff --git a/packages/frontend/src/pages/Application/index.tsx b/packages/frontend/src/pages/Application/index.tsx
@@ -60,7 +60,11 @@ export default function Application(): React.ReactElement | null {
     <>
       <Container>
         <Flex gap={4} mb={3} px={4} alignItems="center">
-          <AppIcon url={app.iconUrl} color={app.primaryColor} name={app.name} />
+          <AppIcon
+            url={app?.iconUrl}
+            color={app.primaryColor}
+            name={app.name}
+          />
           <Text textStyle="h4">{app.name}</Text>
         </Flex>
 
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -2,5 +2,5 @@
   "name": "@plumber/types",
   "description": "Shared types for plumber",
   "types": "./index.d.ts",
-  "version": "1.54.3"
+  "version": "1.54.4"
 }

Original file line number	Diff line number	Diff line change
`@@ -111,5 +111,5 @@`
`111`	`111`	`"tsconfig-paths": "^4.2.0",`
`112`	`112`	`"type-fest": "4.10.3"`
`113`	`113`	`},`
`114`		`- "version": "1.54.3"`
	`114`	`+ "version": "1.54.4"`
`115`	`115`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "frontend",`
`3`		`- "version": "1.54.3",`
	`3`	`+ "version": "1.54.4",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "wait-on tcp:3000 && vite --host --force",`