Error when destroying unity webgl instance on Vue3 - vue.js

I have a working Unity WebGL application integrated with Vue3. Every time I move to a different page, there is always an error:
I tried to call unityInstace.Quit() during onUnmount event in Vue3, and the error changes to:
I suspect there is an issue on destroying the unity instance. However, I looked at Unity WebGL docs, and there doesn't seems to be any guides on disposing the Unity WebGL instance.
Thanks!

Related

EXPO + react-native-reanimated debug issue

I've had an app running on Expo SDK 41 and it had some basic usage of react-native-reanimated#~2.1.0 and debugging worked just fine.
At some stage SDK 41 was deprecated and I was forced to upgrade, so I went for the latest one which is 45.
After the upgrade I can no longer use remote debugging. When I turn on remote debugging, the app crashes with the following error
Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.
Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.
and I can't do anything (I can't even turn off remote debugging without clearing expo app data).
The issue seems to be related to react-native-reanimated (current version is 2.8.0)
Expo docs state this:
The new APIs in react-native-reanimated#2 use React Native APIs that
are incompatible with Remote JS Debugging. Consequently, you can only
debug apps using these APIs using Flipper, which is not yet available
in the Expo managed workflow. You will be unable to use Remote JS
Debugging if you use the new APIs from Reanimated 2. Remote JS
Debugging will continue to work if you only use the APIs that were
also available in Reanimated 1.
Tried to downgrade to react-native-reanimated#~2.1.0 did not work either.
I must be missing something, because otherwise it seems a bit ridiculous that I'm forced to upgrade SDK which in combination with react-native-reanimated does not allow me to do debug anymore.
Please advise if there is anything I can do.
Thanks
This is what that link to Expo's docs show me at this time:
Reanimated uses React Native APIs that are incompatible with "Remote JS
Debugging" for JavaScriptCore. In order to use a debugger with your app with
react-native-reanimated, you will need to use the Hermes JavaScript engine and > the JavaScript Inspector for Hermes.
Anyways, this appears to be an issue Reanimated themselves talk about in the docs
The workaround around this for some time has been this code shared in this answer here
It isn't even a reanimated problem particularly, but an inability of RN to develop using some synchronous features that pertain to debugging.
Anyways, hope this helps you
After posting a question on expo repository, I've got the following answer which actually does not solve the remote debugger issue, but gives the same alternative. Basically they suggested to use hermes engine
hi there! this is unfortunate and inconvenient for sure. it's a side effect of the direction the ecosystem is moving in - away from JavaScript Core and remote debugging in Chrome towards Hermes and attaching a debugger to the on-device Hermes engine. Reanimated no longer supports remote debugging in Chrome.
in order to debug JS using Reanimated in SDK 45+ we recommend using Hermes. you can set this up in your app.json as follows:
{
"expo": {
"// your other config here": "...",
"android": {
"jsEngine": "hermes"
}
}
}
now when you run expo start and launch your app press j and it will launch a Chrome Inspector that will attach directly to the app on your device (I suggest upgrading expo-cli to the latest to ensure you have this feature). be sure to refer to the "Using Hermes Engine" guide for more information

Debugging React Native app having React Native Reanimated with Vscode: TypeError: global.performance.now is not a function

I'm tasked with an already-started project that has React Native Reanimated library as a dependency.
Whenever I debug my app with Vscode/Chrome debugger, when I navigate to any screen that has components depending on Reanimated, I keep getting global.performance.now is not a function.
I've already seen TypeError: global.performance.now is not a function in react native but in the latest version it is already changed to what the accepted answer to the question suggests.
I've tried downgrading react-native-reanimated to 2.2.4 and patch as suggested in the answer, yet then I start getting all sorts of errors like Property ' stopObservingProgress' doesn't exist.
I've also tried 2.3.1, also different yet blocker errors.
I've also tried with and without Hermes.
Disabling debugging gets rid of the error, but I (obviously) can't debug. Debugging with Flipper works yet debugging with Flipper is extremely slowing my workflow (e.g. switching between Vscode and Flipper and trying to find files to put breakpoints, unable to edit at the same place where I debug etc. Flipper is just not my thing) and I want to debug with Vscode, which works perfectly without Reanimated.
I want to get rid of Reanimated library but unfortunately there is already a lot of code that relies on it, including a library with no other alternative that directly depends on Reanimated.
How can I debug an app containing React Native Reanimated with Vscode?
It's still a known and open issue when we are using reanimated version 2.., you can find this in reanimated documation.
As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported.
For now only flipper is the way of debugging react native apps that using JSI for syncronous native module calls.
Okay after further investigation I've found out that this is indeed possible. There were some other problems with latest versions of some of the dependencies that I've been using, which was masking the original issue. With the right combination of dependencies and following https://fbflipper.com/docs/extending/debugging/ and https://thinhtran3588.medium.com/make-professional-mobile-apps-with-react-native-and-typescript-debug-your-application-with-vscode-fba067f77445 I was able to debug my app correctly using Vscode debugger.

Unity android Session initialization already happened error

I recently upgraded to Branch Unity SDK version 0.6.5 from https://github.com/BranchMetrics/unity-branch-deep-linking-attribution/releases and facing session initialization issues. which was working fine before.
On Android, if when the app opens from a deep link the callback is giving error: "Session initialization already happened. set intent extra, "branch_force_new_session", to true."
I need to retrieve link metadata to display the desired UI. So, I need the link properties.
Anybody faced this before? any fix?
Seams like you are initialising the SDK twice.
Are you initialising it in your onStart() and then trying to read the data with some other function that uses the initSession() method? If so, remove the first initialisation.
If you still have the issue, kindly share your implementation of initialisation and reading of link deeplink data from the link.

Nativescript Vue v-if memory leak

Issue
https://github.com/nativescript-vue/nativescript-vue/issues/492
brief synopsis
Using a custom tab-routing strategy in Nativescript-Vue I found that my application was leaking memory. The routing strategy relies on one overarching component that will toggle active components via a v-if statement. When the user navigates to a new page, the v-if statement will hide(and destroy) the old page and show(and mount) the new page. In theory the old page should be destroyed and the memory collected by the garbage collector; however, in practice the memory piles up and never seems to be released from the application, even when calling the garbage collector manually.
testing and reproduction
This issue was tested and found on a real ios device (emulator seems to have no memory issues but I have read that it's not like a real device). The github issue provided above can provide some further detail, and the repository linked below demonstrates a minimal reproduction to cause a memory leak.
A reproduction of this error can be found at https://github.com/geodav-tech/nativescript-vue-memory-leak.
After building the project, run it through xcode, look at the memory profile, and navigate back and forth from the states list to the example list that gets generated on mounted. screenshots also provided within readme
I expect the memory of the hidden components to be cleaned up after they are destroyed and currently even if you leave the app open for several minutes the garbage collector does not reduce the load.
question (edit)
Does anyone have any reasoning behind the memory being held by the application? Is there a better way to accomplish a routing strategy similar to this that wouldn't cause a memory leak or is something about the flow of the program a bad strategy?
To anyone facing memory leak issues similar to this, the answer lies in updating.
The projects facing this issue were compiled against:
nativescript ios runtime: 5.0.0
nativescript android runtime: 5.0.0
tns-core-modules: 5.0.2
nativescript-vue: 2.0.0
Updating to the following fixed the issue.
nativescript ios runtime: 5.4.0
nativescript android runtime: 5.4.0
tns-core-modules: 5.4.0
nativescript-vue: 2.2.2
Now the exact same structure is freed up once navigated away from.

Vue Native - Debugging

Recently I switched from Ionic framework to vue-native (vue.js wrapper around react-native), everything seems to be cool, development is fast and easy, but I have some real issues with debugging those apps. With Ionic Framework (Cordova) I was able to open an app in web browser and could easily manage Vuex state (for example) from Chrome Console. It doesn't seems so easy and trivial in react native world. Is it possible to have similar debugging experience in vue-native? When my app starts to grow and gets complicated it's really hard to handle it other way around. Any help appreciated.
Basically all my problems gone away when I ported my apps to Expo (which allows for JS remote debugging) and grabbed React Native Debugger - https://github.com/jhen0409/react-native-debugger.
Important part is having simulator installed on your developer machine (like iphone simulator) because debugger doesn't play nicely with real machines.
Inside debugger hit cmd+t to open a new window and set port to 19001 (because of Expo using this port). Now start expo with npm start command and in Expo panel hit 'Run in simulator' button.
In simulator make a shake gesture (ctrl+cmd+z) and allow remote debugging in developer menu.
Done. Pleasant experience similar to one known from Cordova. You have a js console, you can inspect elements and change styles live. Expo comes with live reload to make things smoother.
More info here: https://docs.expo.io/versions/latest/workflow/debugging/
Unfortunately, you cannot debug script parts in the VUE files in Chrome Dev Tools (you can put the breakpoints, but they are not working well), but if you put the methods to a separate JS file, it works like a charm. I know, it's a workaround, but not a big pain, and working well.
See my TODO app for example: https://github.com/TheBojda/VueNativeTodo