How do I debug React Native with VSCode on Expo? - react-native

I'm sorry, I was able to get this all to work yesterday, but I can't get Expo to attach to my VS Code Debugger today, with various problems.
At this moment I have no server running. Expo is open in my simulator. I hit "run" on "Debug in Expo" from VS Code and I get this error:
(node:16799) UnhandledPromiseRejectionWarning: Error: `fsevents` unavailable (this watcher can only be used on Darwin)
at new FSEventsWatcher (/Users/TuzMacbookPro2017/Development/QMG/Learning/Tuz1App/node_modules/sane/src/fsevents_watcher.js:41:11)
at createWatcher (/Users/TuzMacbookPro2017/Development/QMG/Learning/Tuz1App/node_modules/jest-haste-map/build/index.js:780:23)
at Array.map (<anonymous>)
at HasteMap._watch (/Users/TuzMacbookPro2017/Development/QMG/Learning/Tuz1App/node_modules/jest-haste-map/build/index.js:936:44)
at _buildPromise._buildFileMap.then.then.hasteMap (/Users/TuzMacbookPro2017/Development/QMG/Learning/Tuz1App/node_modules/jest-haste-map/build/index.js:355:23)
at processTicksAndRejections (internal/process/next_tick.js:81:5)
(node:16799) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:16799) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[Error] Error: Could not start the packager.
Let's start the server and see what happens...
Server loads, all good. I haven't selected "Run" from the Metro screen.
Let's try running the debugger again and see what happens...
Error: listen EADDRINUSE: address already in use :::8081
at Server.setupListenHandle [as _listen2] (net.js:1256:14)
at listenInCluster (net.js:1304:12)
at Server.listen (net.js:1392:7)
etc...
Makes sense, npm is running on port 8081. I can load the project in Expo; when I do, it opens up a chrome debug window. Let's hit "Stop Remote Debugging" and see if we can run the debugger from VS Code again (probably not since the port is still in use. -- right, same error.)
Ok now that we've disabled remote debugging in expo, let's stop the server and maybe try to restart from VS Code? Nope. Simple error:
[Error] Error: Could not start the packager.
Any help? I KNEW I should have written down all the steps I took yesterday!

Related

Make sure the correct deployment target has been selected for its compilation in Xcode

I am using the following desiredCapabilities in my codeceptconf.js file.
Appium: { // IOS local Simulator iPhone 13
app: "./ipa/arvApp.app",
platform: "iOS",
desiredCapabilities: {
deviceName: "iPhone 13",
//os_version: "15.5",
"automationName": "XCUITest",
autoAcceptAlerts: 'true' ,
autoDissmissAlerts: 'true',
},
}
Facing the below error -
App Launch And Login options. --
Navigate to just browse in app and Login with Gmail
2022-10-04T17:44:00.627Z ERROR webdriver: Request failed with status 500 due to
unknown error: An unknown server-side error occurred while processing the command.
Original error: Simulator architecture is unsupported by the
'/Users/jule/Desktop/arive/automation/ipa/ariveApp.app' application. Make sure the
correct deployment target has been selected for its compilation in Xcode.
2022-10-04T17:44:00.628Z ERROR webdriver: unknown error: An unknown server-side
error occurred while processing the command. Original error: Simulator architecture is unsupported by the '/Users/jule/Desktop/arive/automation/ipa/ariveApp.app' application. Make sure the correct deployment target has been selected for its compilation in Xcode.
at getErrorFromResponseBody (/Users/jule/Desktop/arive/automation/node_modules/webdriver/build/utils.js:197:12)
at NodeJSRequest._request (/Users/jule/Desktop/arive/automation/node_modules/webdriver/build/request/index.js:166:60)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async startWebDriverSession (/Users/jule/Desktop/arive/automation/node_modules/webdriver/build/utils.js:67:20)
at async Function.newSession (/Users/jule/Desktop/arive/automation/node_modules/webdriver/build/index.js:46:45)
at async Object.remote (/Users/jule/Desktop/arive/automation/node_modules/webdriverio/build/index.js:77:22)
at async Appium._startBrowser (/Users/jule/Desktop/arive/automation/node_modules/codeceptjs/lib/helper/Appium.js:232:24)
Error: Can't connect to WebDriver.
Error: Failed to create session.
An unknown server-side error occurred while processing the command. Original error: Simulator architecture is unsupported by the '/Users/jule/Desktop/arive/automation/ipa/ariveApp.app' application. Make sure the correct deployment target has been selected for its compilation in Xcode.
Please make sure Selenium Server is running and accessible
I wait for element 30
✖ FAILED in 13ms
Please help to resolve this error.
Thanks

Can anyone help me? This is the answer 'process not defined' when executing Cypress test

Trying to execute any of the tests leads to this error popping up.
The following error originated from your test code, not from Cypress.
process is not defined
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
enter image description here
And also the Stacktrace
at Object../node_modules/ci-info/index.js (webpack:///./node_modules/ci-info/index.js:5:1)
at webpack_require (webpack:///webpack/bootstrap:19:1)
at Object../node_modules/is-ci/index.js (webpack:///./node_modules/is-ci/index.js:3:18)
at webpack_require (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///./node_modules/cypress/lib/util.js:21:14)
at Object../node_modules/cypress/lib/util.js (https://conciliador-hti.getnet.com.br/__cypress/tests?p=cypress\support\index.js:85591:31)
at webpack_require (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///./node_modules/cypress/index.js:9:14)
at Object../node_modules/cypress/index.js (https://conciliador-hti.getnet.com.br/__cypress/tests?p=cypress\support\index.js:81163:31)
at webpack_require (webpack:///webpack/bootstrap:19:1)
From previous event:
at runScriptsFromUrls (https://conciliador-hti.getnet.com.br/__cypress/runner/cypress_runner.js:160126:98)
at Object.runScripts (https://conciliador-hti.getnet.com.br/__cypress/runner/cypress_runner.js:160140:11)
at $Cypress.onSpecWindow (https://conciliador-hti.getnet.com.br/__cypress/runner/cypress_runner.js:149554:19)
I found the error.
Just in commands.js
My command was inserted with two mistakes:
cypress.Command.add
cypress instead Cypress - and - Command instead Commands.

Unable to get the source file of an error on react-native

I am debugging an application that throws me the error of
ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See react-invalid-hook-call for tips about how to debug and fix this problem.
[Fri Oct 23 2020 09:04:14.325] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
But it doesn't say where is the source file of the error... since it is a big application I am having trouble finding where this error is located.
I am able to compile the application but the error happens on the initialization.
When I run the debugger it says the following on the developers console...
Unable to symbolicate stack trace: The stack is null
Plus the previous errors.
Any idea how I could locate the source file of this errors?
Thank you for your help!

What does the "skipUncaughtErrors" flag mean by server?

In the TestCafe documentation the skipUncaughtErrors flag mentions: uncaught error or unhandled promise rejection occurs on the server during test execution.
What is meant by server here?
I found this flag after we started getting an issue quite randomly, with very little to debug from:
1) - Error in fixture.beforeEach hook -
Unhandled promise rejection:
Error: [eval("")] Not JSON response
at exports.newError
Figured it was worth a try to set skipUncaughtErrors: true and we haven't seen that issue since. Nonetheless, the team is worried about using features we don't understand. :)
The server word here means a NodeJS process where test code is executed. So, any uncaught error or unhandled promise rejection that occurred in test code will be ignored by TestCafe if the skipUncaughtErrors option is enabled. For more details about TestCafe architecture, refer to the following topic in the TestCafe documentation: https://devexpress.github.io/testcafe/documentation/how-it-works/#client-server-architecture

Debugging a React Native crash in release

I'm using react-native-tcp and am experiencing a crash on Android that I'm unable to debug. Unfortunately, this only happens in release.
The stack trace I get is as follows:
E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
Process: com.xx.xx, PID: 22986
com.facebook.react.common.JavascriptException: unable to find socket, stack:
d#664:708
_onError#664:4582
<unknown>#664:3790
value#77:1364
value#53:2778
<unknown>#53:1013
<unknown>#53:106
value#53:985
at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:99)
at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:83)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:345)
at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:136)
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:145)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
at java.lang.Thread.run(Thread.java:818)
Now, the Javascript stack trace is pretty cryptic (presumably due to minification and bundling), but it helpfully includes _onError, which in react-native-tcp is implemented as follows:
TcpSocket.prototype._onError = function(error: string): void {
this._debug('received', 'error');
this.emit('error', normalizeError(error));
this.destroy();
};
The normalizeError call above maps to the d function in the stacktrace. I know this because I examined the bundled file generated during a build.
I understand why my code flow leads to an unable to find socket event, but what I don't understand is how this event eventually leads to an application crash. If it helps, this event is generated in the native (Android) component of react-native-tcp and propagates into the JS side.
I expected such an event to be reported to the listeners (if any) rather than crash the application.
Is it possible that events reported via React Native lead to a crash in some conditions - e.g. if there are no listeners, or if the event is an Error object, or something else?
How would I go about debugging this, given that it happens only in release?
I was unable to find an efficient debugging technique, but was able to debug the issue I had with good ol' prints.
The problem was that NodeJS (and apparently also React Native) have a behavior which I found peculiar: when an error event is emitted and there is no error listener, an unhandled exception is thrown. This is documented in the NodeJS documentation:
When an error occurs within an EventEmitter instance, the typical action is
for an 'error' event to be emitted. These are treated as special cases
within Node.js.
If an EventEmitter does not have at least one listener registered for the
'error' event, and an 'error' event is emitted, the error is thrown, a stack
trace is printed, and the Node.js process exits.
const myEmitter = new MyEmitter();
myEmitter.emit('error', new Error('whoops!'));
// Throws and crashes Node.js
My problem is that I was removing the error listener in my code, because of a react-native-tcp issue that causes the error callback to be called twice when connect fails because no one is listening on the port.