CODEWITHSUNDEEP
typescriptvue.jserror-handlingruntime-errornfc
Philipp-1A
Philipp-1A

Reputation: 21

Can't catch error: "Uncaught ReferenceError: NDEFReader is not defined" in vue3 Web Application

I am developing a vue3 app in which i want to use the NFC Web Api for reading and writing NFC Chips. I am using typescript, vue routing and pinia. It works fine when the device for the app has a NFC Chip that's active, but i want to show my own error page when the NDEFReader is not available for whatever reason.

The exact error is this:

NDEF.ts:45 Uncaught ReferenceError: NDEFReader is not defined
    at NDEF.ts:45:18
(anonymous) @ NDEF.ts:45

NDEF.ts is my type Definition file and at line 45 there is

export default NDEFReader

The error occurs in the type Definitions file for NDEFReader, as soon as the file is imported in my Store like this:

import NDEFReader from "@/models/NDEF";

and the store is imported and called in my vue component like this:

const nfcStore = useNFCStore();

I have tried to do a dynamic import which i didn't get to work with this import. I have tried to use the ErrorCaptured lifecycle hook which works for other errors in the Store but not this one. I have tried the Global error handling from vue in the main.ts like this:

app.config.errorHandler = function (err, vm, info) {
    console.error("Fehler gefunden")
}

I have tried to surround "const nfcStore = useNFCStore();" with trycatch. I have tried not to load the component before i check for nfc, but even when surrounding the router-view in the App.vue with v-if like this:

<div v-if="nfc">
  <router-view/>
</div>

and "nfc" is false the error is thrown.

Nothing seems to get a hold of this error.

How can i get a hold of this error to reroute to a error page, so the page isn't blank when NDEF isn't there?

Upvotes: 2

Views: 150

Answers (1)

kissu
kissu

Reputation: 46586

NFC's support is not that great unfortunately.

Also, be careful because the API is only available over HTTPS, this is maybe why you're having errors sometimes.

If you really want to go this way, you can always try this to solve your problem or any other code snippets foundable on the Internet with a try/catch or similar approach. The dynamic import/errorHandler/etc are not the way to go for such native Browser API.

Meanwhile, regarding the poor support, I might recommend maybe using some QR code scanning rather. Might produce a similar result and with better support overall.

Upvotes: 1

Related Questions