React - cannot parse Error when using Promise with Edge

user_12601855 0
Viewed 109

I'm pretty new to React and I don't undestand what's happening there.

I have a search bar that allows me to search a user by name. If some users match, then I need to open a modal with the results. If an error occurs, then I need to open a custom Error modal with a message that changes according to the error type.

Here's my function :

 const onSearchUser = (userName: string): void => {

  searchUser(userName)
        .promise.then(result => {
          // show users modal
        })
        .catch(e => {
          console.log(e)
          const response = e.response.data
          if( 'errorType' in response ) {
               // should open an modal with a specific error message
          } else {
               // should open another modal with another error message
          } 
        })
  }

On chrome : The modal shows up in every cases.

On edge: I get a can't execute code from freed script

So, after trying to remove some lines of code (just for test), my guess it that the error comes from

const response = e.response.data

because the modal is actually displayed if I change the code into :

 const onSearchUser = (userName: string): void => {

  searchUser(userName)
        .promise.then(result => {
          // show users modal
        })
        .catch(e => {
          console.log(e)
          showModalError(true, 'some message');
        })
  }

The console.log(e) gives the following stack trace :

[object Error]: {description: "Unable to get property 'status' of undefined or null reference", message: "Unable to get property 'status' of undefined or null reference", number: -2146823281, stack: "TypeError: Unable to get property 'status' of undefined or null reference at Anonymous function (http://localhost:8000/assets/main.bundle.js:681:3) at tryCatcher (http://localhost:8000/assets/main.bundle.js:57710:9) at Promise.prototype._settlePromiseFromHandler (http://localhost:8000/assets/main.bundle.js:55826:9) at Promise.prototype._settlePromise (http://localhost:8000/assets/main.bundle.js:55883:13) at Promise.prototype._settlePromise0 (http://localhost:8000/assets/main.bundle.js:55928:5) at Promise.prototype._settlePromises (http://localhost:8000/assets/main.bundle.js:56004:13) at _drainQueueStep (http://localhost:8000/assets/main.bundle.js:52778:9) at _drainQueue (http://localhost:8000/assets/main.bundle.js:52771:9) at Async.prototype._drainQueues (http://localhost:8000/assets/main.bundle.js:52787:5) at drainQueues (http://localhost:8000/assets/main.bundle.js:52700:9)"}
description: "Unable to get property 'status' of undefined or null reference"
message: "Unable to get property 'status' of undefined or null reference"
number: -2146823281
stack: "TypeError: Unable to get property 'status' of undefined or null reference at Anonymous function (http://localhost:8000/assets/main.bundle.js:681:3) at tryCatcher (http://localhost:8000/assets/main.bundle.js:57710:9) at Promise.prototype._settlePromiseFromHandler (http://localhost:8000/assets/main.bundle.js:55826:9) at Promise.prototype._settlePromise (http://localhost:8000/assets/main.bundle.js:55883:13) at Promise.prototype._settlePromise0 (http://localhost:8000/assets/main.bundle.js:55928:5) at Promise.prototype._settlePromises (http://localhost:8000/assets/main.bundle.js:56004:13) at _drainQueueStep (http://localhost:8000/assets/main.bundle.js:52778:9) at _drainQueue (http://localhost:8000/assets/main.bundle.js:52771:9) at Async.prototype._drainQueues (http://localhost:8000/assets/main.bundle.js:52787:5) at drainQueues (http://localhost:8000/assets/main.bundle.js:52700:9)"

__proto__: Object

But if I display the response body from the network tab, I have :

{
  errorType : "ERR103",
  message : "Too many results"
}

If I do the same on Chrome, I get the same result in the NETWORK tab, but the console gives :

Error: Request failed with status code 502
    at createError (http://localhost:8000/assets/main.bundle.js:51423:15)
    at settle (http://localhost:8000/assets/main.bundle.js:51685:12)
    at XMLHttpRequest.handleLoad (http://localhost:8000/assets/main.bundle.js:50888:7)
From previous event:
    at xhrAdapter (http://localhost:8000/assets/main.bundle.js:50839:10)
    at dispatchRequest (http://localhost:8000/assets/main.bundle.js:51489:10)
From previous event:
    at Axios.request (http://localhost:8000/assets/main.bundle.js:51265:23)
    at Axios.<computed> [as get] (http://localhost:8000/assets/main.bundle.js:51280:17)
    at Function.wrap [as get] (http://localhost:8000/assets/main.bundle.js:51856:15)
    at get (http://localhost:8000/assets/main.bundle.js:694:62)
    at searchLegalEntities (http://localhost:8000/assets/main.bundle.js:256:66)
    at onSearch (http://localhost:8000/assets/main.bundle.js:3212:81)
    at onSearch (http://localhost:8000/assets/main.bundle.js:9171:14)
    at HTMLUnknownElement.callCallback (http://localhost:8000/assets/main.bundle.js:96780:14)
    at Object.invokeGuardedCallbackDev (http://localhost:8000/assets/main.bundle.js:96829:16)
    at invokeGuardedCallback (http://localhost:8000/assets/main.bundle.js:96884:31)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:8000/assets/main.bundle.js:96898:25)
    at executeDispatch (http://localhost:8000/assets/main.bundle.js:97028:3)
    at executeDispatchesInOrder (http://localhost:8000/assets/main.bundle.js:97053:5)
    at executeDispatchesAndRelease (http://localhost:8000/assets/main.bundle.js:97157:5)
    at executeDispatchesAndReleaseTopLevel (http://localhost:8000/assets/main.bundle.js:97166:10)
    at forEachAccumulated (http://localhost:8000/assets/main.bundle.js:97138:8)
    at runEventsInBatch (http://localhost:8000/assets/main.bundle.js:97183:3)
    at runExtractedPluginEventsInBatch (http://localhost:8000/assets/main.bundle.js:97324:3)
    at handleTopLevel (http://localhost:8000/assets/main.bundle.js:102247:5)

So my questions are :

  1. Do I get the "can't execude code from freed script" because the "errorType" property does not exist in my response ? I though this error occurs when a child component is using some piece of code of a parent component that no longer exists..

  2. How is it possible to have a difference between Chrome and Edge ?

  3. Am I catching the error the right way ? How to solve my issue ?

Thanks.

EDIT Here is the full code :

export const SearchUserHeader: FC = () => {
  const style = useStyles()
  const [loading, setLoading] = useState(false)
  const [value, setValue] = useState('')
  const [error, setError] = useState<string | undefined>(undefined)
  const [open, setOpen] = useState(false)
  const [userList, setUserList] = useState<UserList | undefined>(
    undefined,
  )
  const [modalError, setModalError] = useState<string | undefined>(undefined)

  const searchUserAction = (value: string): void => {
      setLoading(true)
      setOpen(false)
      searchUsers(value)
        .promise.then(result => {
          setModalError(undefined)
          setUserList(result)
          setOpen(true)
        })
        .catch(e => {
          const response = e.response.data
          if ('codeError' in response) {
            const error = response as SearchUserError
            if (['ERR13', 'ERR14'].includes(error.codeError)) {
              setError(error.message)
            } else {
              error.codeError === 'ER09'
                ? setModalError(error.message)
                : setModalError('user-technical-error')
              setUserList(undefined)
              setOpen(true)
            }
          } else {
            setModalError('user-technical-error')
            setUserList(undefined)
            setOpen(true)
          }
        })
  }

  const onKeyPress = (e: ChangeEvent<HTMLInputElement>): void => {
    setValue(e.target.value)
    setError(undefined)
  }

  return (
    <div>
      <Header>
        <div className={style.children}>
          <SearchBar>
            onClick={searchUserAction}
            onChange={onKeyPress}
            value={value}
            error={error}
            loading = {loading}
          />
        </div>
      </Header>
      {
        <UserResults>
          open={open}
          setOpen={setOpen}
          result={userList}
          errorMessage={modalError}
        />
      }
    </div>
  )
}

export const UserResults: FC<{
  open: boolean
  setOpen: (v: boolean) => void
  result?: UserList 
  errorMessage?: string
}> = ({ open, setOpen, result, errorMessage }) => {
  const styles = useStyles()
  return (
    <Modal open={open} onClose={() => setOpen(false)}>
      <div className={styles.modalContainer}>
        <div className={styles.modalContent}>
          <div className={styles.header}>
            <div className={styles.title}>
              {` (${
                result !== undefined && result.length !== undefined
                  ? result.length
                  : 0
              })`}
            </div>
            <Button
              className={styles.closeButton}
              onClick={() => setOpen(false)}
              icon={<Icon name="cross" />}
            />
          </div>
          <div className={styles.body}>
            {errorMessage === undefined && Array.isArray(result) ? (
              result.length > 0 ? (
                <ModalContent setOpen={setOpen} list={result} />
              ) : (
                <div className={styles.infoMessage}>
                 No results
                </div>
              )
            ) : errorMessage == 'user-technical-error' ? (
              <ErrorHeader
                open={true}
                message={i18n('user.search.error')}
              />
            ) : (
              <div>{errorMessage}</div>
            )}
          </div>
        </div>
      </div>
    </Modal>
  )
}
promise reactjs error-handling javascript
1 Answers

Issue was solved by replacing bluebird polyfill by es6-promise

user_126018550
Related