TypeError: can't access dead object

[eduardoportilho]

Scenario

• What's the scenario, what happens and what did you expect to happen?

The following error is being reported in my app logs:

TypeError: can't access dead object
  at checkReadyState(webpack://.../node_modules/@fingerprintjs/fingerprintjs/dist/fp.esm.js:1143:160)

• What device and browser are you using?

Device: Mac OS X 10.15
Browser: Firefox 96.0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:96.0) Gecko/20100101 Firefox/96.0

• What version of fingerprintjs are you using? (Bug reports not applicable to fingerprintjs master are subject to be closed without comment.)

@fingerprintjs/fingerprintjs: 3.3.0

[Finesse]

Hi @eduardoportilho. Your issue looks very similar to #691. Please look through that thread, it should help to fix your case. If it doesn't, please provide us more specific steps and code examples to reproduce the error.

[eduardoportilho]

Hello @Finesse. This issue was caught in production and it has happened several times, but I couldn't find a way to reproduce it based on the logged info. I know that it only happens in Firefox in this line of (un-minified) code:

{snip} frame.contentWindow) === null || _a === void 0 ? void 0 : _a.document) === null || _b === void 0 ? void 0 : _b.readyState) === 'complete') {

Maybe the user has some kind of browser extension that is causing it? I'll try to catch the error as suggested in the linked issue and see if I can get more information.

Thanks for the help 🙇

[Finesse]

@eduardoportilho Could you please provide a code snippet that shows how you use the library? Do you run it in an iframe or other unusual conditions?

[Finesse]

@eduardoportilho The error messages can be cause by an issue fixed in version 3.3.1. Please try to update the library and check whether the error still occurs.

[eduardoportilho]

Could you please provide a code snippet that shows how you use the library?

Sure:

export const useFingerprint = () => {
  // Initialize fingerprint agent
  const fpPromise = useRef(FingerprintJS.load())

  const isMounted = useRef(true)

  const [fingerprint, setFingerprint] = useState<
    FingerprintPayload | undefined
  >(undefined)

  async function getFingerprint() {
    try {
      const fp = await fpPromise.current
      const { visitorId, components } = await fp.get()

      Object.entries(components).forEach(([key, { value }]) => {
        components[key] = value
      })

      if (isMounted.current) {
        setFingerprint({
          ...components,
          visitorId
        })
      }
    } catch (error) {
      Sentry.captureException(error)
    }
  }

  useEffect(() => {
    isMounted.current = true

    return () => {
      isMounted.current = false
    }
  }, [])

  useEffect(() => {
    if (!fingerprint) {
      getFingerprint()
    }
  }, [fingerprint])

  return fingerprint
}

Do you run it in an iframe or other unusual conditions?

No, regular conditions.

[Valve]

@eduardoportilho as a side note, it looks you're using FingerprintJS in a React application.
Would you be interested to try out our new React integration that integrates all the best/recommended practices?
https://github.com/fingerprintjs/fingerprintjs-pro-react
@borislobanov92 is the engineer who created it, he can answer your questions around React usage and explain how to use the integration in general. We'll also soon add a good readme to the repository as a guide to get started.
(Currently the integration only supports the pro version, but we would be interested to hear your feedback what things you're looking to have in general, so that we could add compatibility to the open-source version as well).

[eduardoportilho]

@Valve sure, I can propose this to our team

[Finesse]

@eduardoportilho Did you try to update the library to version 3.3.3?

const fpPromise = useRef(FingerprintJS.load())

This is incorrect because a new library instance will be created on every render. You need only 1 instance of FingerprintJS. You should call FingerprintJS.load() inside a useEffect hook. As you get a fingerprint as soon as the component is mounted, you can put FingerprintJS.load() inside getFingerprint.

Please fix this too.