Uhandled rejection : communication failure

[folajubril]

I can't detect a connection on react app, windows 10 32 bit environment. returns the error below

plus during the test after setup digital Persona client doesn't read fingerprints

[a-bronx]

Do you have DigitalPersona Workstation or DigitalPersona Lite Client installed (see "External dependencies")?

[folajubril]

I have the DigitalPersona Lite Client installed

[a-bronx]

What browser do you see the issue in? If it is MS Edge, you may need to enable "loopback exemption" with a following PowerShell command: CheckNetIsolation.exe LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe".

Also check that your firewall and antivirus software do not prevent the browser to connect to the Lite Client. Try to open the following URL: https://127.0.0.1:52181/get_connection, you should see a response with a text like endpoint web sdk. If you see a response with something like a file not found or the site can't be reached instead, your computer has a connectivity problem which you need to resolve first. Make sure TCP ports 9001 and 52181 are opened for IP 127.0.01 (loopback) and no any other software use it.

[folajubril]

I'm on chrome, and I got the endpoint Web SDK response. Both the TCP ports 9001 and 52181 are listening to [DPAgent.exe] and [DpHostW.exe] events respectively. Is there any way to connect to these ports directly with an API or reference to a react.js sample implementation

[a-bronx]

Can you publish a minimal React project reproducing the issue?

[folajubril]

this is a sample react project, I tried to emulate the angular implementation in checking the device connection and also acquiring fingerprints https://github.com/folajubril/digitalpersona-react-sample.git

[a-bronx]

You sample does not provide a demonstration of your way to use the @digitalpersona/devices library, and I cannot make guesses what exactly went wrong in your case. Please provide more specific bugreports.

[folajubril]

For my app use case, I need to detect connections, acquire fingerprints, and save them to a server in the react way. My sample is just to log a connection and start an acquisition when the button is clicked.

[a-bronx]

I asked you to provide a minimal React project reproducing the issue. Your sample does not reproduce the issue. I do not see anything in your sample that is related with detecting a connection, acquiring fingerprint etc. It looks like just a standard scaffolding app with no functionality, hence no useful information. Your sample even has no dependency on @digitaplersona/devices in its package.json.

[folajubril]

Apologies, i ommited a commit. I just pushed the actual sample again.

[a-bronx]

I'm not very familiar with React, and I had no chance to run your code yet, but just looking at the code I suspect that you using the React incorrectly.

First, it looks like the App functional component creates a new FingerprintReader instance on every render. Probably your should make the reader either an App's state (as well as samples), or a global variable, e.g.:

function App {
    const [reader] = useState(new FingerprintReader());
    const [samples, setSamples] = useState([]);
    ...
}

Second, I believe that subscribing/unsubscribing to reader's events should be considered an "effect" and placed into a useEffect hook, probably something like the code below (I didn't try to run this code, writing from my head):

function App {
    ...
    const [capturing, setCapturing] = useState(false)  //<-- will use the state to control the reader's effects

    useEffect(() => {
        if (!capturing)
            return
        reader.onDeviceConnected =  async (device) => await updateReaderStatus();
        reader.onDeviceDisconnected = async (device) => await updateReaderStatus();
        reader.onSamplesAcquired = async (data) => await updateSamples(data.samples);
        reader
            .startAquisition(...)
            .catch(error => {
                setCapturing(false); 
                setError(error); 
            })
        return () => {
            reader.stopAcquisition();
            reader.off();
        }
    }, [capturing] //<-- the effect should run when `capturing` state changes 
    )

   return (
        ...
        <button 
            disabled={capturing} 
            onClick={setCapturing(true)}
         >Capture Fingerprint<button>
        ...
    )

   )
}

Your current useEffect is actually not an effect, and I don't even quite understand what it is.

I suspect that fixing all these parts should resolve your unhandled rejection issue.

[omerts]

BTW I had this issue and then discovered that copy pasting WebSdk.js from github strips away the connection URI from the code. Probably a security measure.

[mordo]

Hi @folajubril

I am trying to use the U.are.U 5300 fingerprint reader using React but I have not been successful.

I have been reading the entire post and the information that @a-bronx gives us but I still have problems with the WebSdk, it simply does not recognize it.

Were you able to solve your problem? Do you have any functional example that you can share with me?