React Native - debugging exception - react-native

I'm using chrome to debug react native.
When I choose "Pause On Caught Exceptions" under "source" debugging tab, the following exception always occur: TypeError: freeProcess.binding is not a function
The file in which the exception occurs:
http://localhost:8081/< Project_folder >/node_modules/react-proxy/node_modules/lodash/_nodeUtil.js
The exception is in line 18:
return freeProcess && freeProcess.binding('util');
Full code on that .js page:
var freeGlobal = require('./_freeGlobal');
/** Detect free variable `exports`. */
var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports = freeModule && freeModule.exports === freeExports;
/** Detect free variable `process` from Node.js. */
var freeProcess = moduleExports && freeGlobal.process;
/** Used to access faster Node.js helpers. */
var nodeUtil = (function() {
try {
return freeProcess && freeProcess.binding('util');
} catch (e) {}
}());
module.exports = nodeUtil;
What is the most elegant way to avoid this exception?
Thanks!

Ok, so I've solved it temporarily.
I've changed line 18 to:
return freeProcess && (typeof freeProcess.binding === "function") && freeProcess.binding('util');
in this file:
/< Project_folder >/node_modules/react-proxy/node_modules/lodash/_nodeUtil.js
This solution is not the best, because it should be fixed in the git of the library. I think the library is lodash, but I couldn't find the file in its git - https://github.com/lodash/lodash

Related

react-native-gesture-handler:generateReleaseRFile FAILED trying to generate APK

I am trying to generate APK but i run into an Obstacle, I am getting this As error :
> Task :react-native-gesture-handler:generateReleaseRFile FAILED
FAILURE: Build completed with 2 failures.
1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':react-native-gesture-handler:generateReleaseRFile'.
> Could not resolve all files for configuration ':react-native-gesture-handler:releaseCompileClasspath'.
> Failed to transform react-native-0.71.0-rc.0-release.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-symbol-with-package-name, com.android.build.api.attributes.BuildTypeAttr=release, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-api}.
> Could not find react-native-0.71.0-rc.0-release.aar (com.facebook.react:react-native:0.71.0-rc.0).
Searched in the following locations:
https://repo.maven.apache.org/maven2/com/facebook/react/react-native/0.71.0-rc.0/react-native-0.71.0-rc.0-release.aar
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================
2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (no error message)
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================
* Get more help at https://help.gradle.org
Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.
You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
See https://docs.gradle.org/7.5.1/userguide/command_line_interface.html#sec:command_line_warnings
Execution optimizations have been disabled for 1 invalid unit(s) of work during this build to ensure correctness.
Please consult deprecation warnings for more details.
BUILD FAILED in 2m 8s
62 actionable tasks: 4 executed, 58 up-to-date
What would I not be doing rightly?
Other errors include
info Writing bundle output to:, D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle
info Writing sourcemap output to:, D:\react-native\******\android\app\build\intermediates\sourcemaps\react\release\index.android.bundle.packager.map
info Done writing bundle output
info Done writing sourcemap output
info Copying 13 asset files
info Done copying assets
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:1769:18: warning: the variable "DebuggerInternal" was not declared in function "__shouldPauseOnThrow"
typeof DebuggerInternal !== 'undefined' && DebuggerInternal.shouldPauseOnThrow === true
^~~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:4994:7: warning: the variable "setTimeout" was not declared in function "logCapturedError"
setTimeout(function () {
^~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:3592:21: warning: the variable "clearTimeout" was not declared in anonymous function " 90#"
cancelTimeout = clearTimeout;
^~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:7492:30: warning: the variable "__REACT_DEVTOOLS_GLOBAL_HOOK__" was not declared in anonymous function " 90#"
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:7507:146: warning: the variable "nativeFabricUIManager" was not declared in anonymous function " 119#"
null != handle._nativeTag && (null != handle._internalInstanceHandle ? (handle = handle._internalInstanceHandle.stateNode, null != handle && nativeFabricUIManager.dispatchCommand(handle.node, command, args)) : _$$_REQUIRE(_dependencyMap[2]).UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args));
^~~~~~~~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:8324:5: warning: the variable "setImmediate" was not declared in function "handleResolved"
setImmediate(function () {
^~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:8540:16: warning: the variable "AggregateError" was not declared in function "getAggregateError"
if (typeof AggregateError === 'function') {
^~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11456:12: warning: the variable "fetch" was not declared in anonymous function " 294#"
fetch: fetch,
^~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11457:14: warning: the variable "Headers" was not declared in anonymous function " 294#"
Headers: Headers,
^~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11458:14: warning: the variable "Request" was not declared in anonymous function " 294#"
Request: Request,
^~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11459:15: warning: the variable "Response" was not declared in anonymous function " 294#"
Response: Response
^~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11608:24: warning: the variable "FileReader" was not declared in function "readBlobAsArrayBuffer"
var reader = new FileReader();
^~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11645:36: warning: the variable "Blob" was not declared in anonymous function " 305#"
} else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
^~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11647:40: warning: the variable "FormData" was not declared in anonymous function " 305#"
} else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
^~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11649:44: warning: the variable "URLSearchParams" was not declared in anonymous function " 305#"
} else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
^~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11877:23: warning: the variable "XMLHttpRequest" was not declared in anonymous function " 314#"
var xhr = new XMLHttpRequest();
^~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:11468:76: warning: the variable "self" was not declared in anonymous function " 297#"
var global = typeof globalThis !== 'undefined' && globalThis || typeof self !== 'undefined' && self || typeof global !== 'undefined' && global;
^~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:19082:27: warning: the variable "performance" was not declared in anonymous function " 498#"
if ("object" === typeof performance && "function" === typeof performance.now) {
^~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:19105:26: warning: the variable "navigator" was not declared in anonymous function " 498#"
"undefined" !== typeof navigator && undefined !== navigator.scheduling && undefined !== navigator.scheduling.isInputPending && navigator.scheduling.isInputPending.bind(navigator.scheduling);
^~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:19172:37: warning: the variable "MessageChannel" was not declared in anonymous function " 498#"
};else if ("undefined" !== typeof MessageChannel) {
^~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:26733:32: warning: the variable "requestAnimationFrame" was not declared in function "onUpdate"
this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
^~~~~~~~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:65200:7: warning: the property "alignItems" was set multiple times in the object definition.
alignItems: 'center',
^~~~~~~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:65199:7: note: The first definition was here.
alignItems: 'flex-start',
^~~~~~~~~~~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:65242:7: warning: the property "alignItems" was set multiple times in the object definition.
alignItems: 'center',
^~~~~~~~~~~~~~~~~~~~
D:\react-native\******\android\app\build\generated\assets\react\release\index.android.bundle:65241:7: note: The first definition was here.
alignItems: 'flex-end',
^~~~~~~~~~~~~~~~~~~~~~
Been searching out different things on the Internet, could not find anything that solves the issue. Seems React native has changed some things i do not seem to see why its giving this As an error.
android/build.gradle
comment this line
maven {
url("$rootDir/../node_modules/react-native/android")
}
add
exclusiveContent {
filter {
includeGroup "com.facebook.react"
}
forRepository {
maven {
url "$rootDir/../node_modules/react-native/android"
}
}
}
mavenLocal()
add these lines into android/build.gradle File
allprojects {
repositories {
google()
exclusiveContent {
filter {
includeGroup "com.facebook.react"
}
forRepository {
maven {
url "$rootDir/../node_modules/react-native/android"
}
}
}
}

Detect automation browsers on extension install

I want to detect if my extension has been installed from a normal browser or with an automation tool. in Manifest v2 it was possible because we could access the window object from the background and we use navigator.webdriver property but now in Manifest v3 we can't anymore because of Service Worker.
Is there any alternative solution?
Update:
Here I got the solution in other way. Like we can detect if extension crx file is loaded locally from below method-
const self = await browserType.management.getSelf();
if(self.installType === "normal"){
console.log("extension installed locally");
}
else if(self.installType === "development"){
console.log("extension installed from store"); }
Method one
let id = chrome.runtime.id
if (id)
console.log("id found, not headless")
Method Two
let checkIfheadless = navigator.language || navigator.userLanguage || navigator.browserLanguage || navigator.systemLanguage if (checkIfheadless) console.log("not headless")
Method Three
const phantomJsCheck = function () {
if (!Function.prototype.bind) {
console.log("PhantomJS environment detected. #1");
return;
}
if (Function.prototype.bind.toString().replace(/bind/g, 'Error') != Error.toString()) {
console.log("PhantomJS environment detected. #2");
return;
}
if (Function.prototype.toString.toString().replace(/toString/g, 'Error') != Error.toString()) {
console.log("PhantomJS environment detected. #3");
return;
}
console.log("PhantomJS environment not detected.");
}

what does `args.unshift(this)` do in Vue's use.js?

I am reading vuejs source code, and got confused by these two lines of code:
const args = toArray(arguments, 1)
args.unshift(this)
in the following snippet, why bother do this ?
/* #flow */
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
/* istanbul ignore if */
if (plugin.installed) {
return
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else {
plugin.apply(null, args)
}
plugin.installed = true
return this
}
}
Since you are inside of a Vueinstance, the lines in question are in the function defined on Vue.use the this most likely will reference the current Vue instance.
You will have to browse the source of toArray to understand the first line, it might takes the arguments and returning an array from them, and maybe substracting the first argument (the 1 in toArray(arguments, 1) give me this impression but to be sure browse the source of that function).
But then when the call args.unshift(this)comes it puts the Vue instance as the first element of the args array which is then used to provide arguments to the plugin function.
Hope that helps ;-)
Seb

How to address internal module when a name conflict exists in TypeScript

In my TypeScript project (using only internal modules), I want to include polyfills/extension for an existing library. For this example, I will use the RxJS library but the question/problem is not specific to this library.
The following code is what I came up with:
module MyModule.Rx {
Rx.Observable.prototype.myExtension = function() { /* ... */ };
}
The RxJS definitions (.d.ts files) are used and compiled together with the code. This leads to the following compiler error: 2339 Property 'Observable' does not exist on type 'typeof Rx'
As far as I can tell this happens because I used the same Rx identifier in MyModule.Rx. When switching the namespace in the first line to module MyModule.NotRx { everything works fine - the Observable type is correctly looked up from the RxJS .d.ts file.
So it seems that the names MyModule.Rx and the RxJS declared Rx namespaces are in conflict. I know that I could simply rename my namespace to MyModule.SomethingElse but that seems somewhat of a hack.
Having all polyfills/extensions for Rx in the MyModue.Rx namespace seems a natural choice for me - how can this be done in a clean way?
You can't do that.
Take this code in TypeScript:
var B = 'test';
module A.B {
// Declare a function
export function fn() {
}
// Tests
console.log(B); // Object { }
A.B.fn(); // valid
B.fn(); // valid
fn(); // valid
}
The message displayed in the console is: Object { } and not test. Look at the transpiled code:
var B = 'test'; // root scope
var A;
(function (A) {
var B; // same name, hide the root scope one
(function (B) {
// Declare a function
function fn() {
}
B.fn = fn;
// Tests
console.log(B); // Object { }
A.B.fn(); // valid
B.fn(); // valid
fn(); // valid
})(B = A.B || (A.B = {}));
})(A || (A = {}));
The module A.B is transpiled to two JavaScript variables A and B. We can use them in order to access to the exported members of the module: the function fn is accessible from A.B.fn, B.fn and fn. In the module, the variable B from the root scope is hidden by the variable B of the module.
You can't access to a global variable Rx from a module named Rx.
As mentioned by Tarh you cannot refer to an outer module if its been shadowed by a local variable. I've +1ed his answer and that should be the accepted answer. I'll just leave a few workarounds:
One workaround which you already know is to rename MyModule.Rx to something that doesn't have Rx. An alternative is to capture Rx with some other name:
import OrigRx = Rx;
module MyModule.Rx {
OrigRx.Observable.prototype.myExtension = function() { /* ... */ };
}
This is very similar to https://stackoverflow.com/a/29021964/390330

Hacking into java.lang.Object: calling custom external class crashes JVM

I'm playing around with editing java.lang.Object for the Java Runtime Environment. I realize that there are probably better ways to do what I want, but that is not what my question is about.
Basically I've added a constructor to java.lang.Object which gets called everytime an object is created. I'm waiting for a certain class to load like so:
public Object() {
if (hookEnabled) {
hookEnabled = false;
objectCount++;
if (objectCount > objectStartCount) {
if (this.getClass() != null) {
String name = this.getClass().getName();
if ((!name.startsWith("java.")) && (!name.startsWith("javax.")) && (!name.startsWith("launcher.")) && (!name.startsWith("sunw.")) && (!name.startsWith("com.sun.")) && (!name.startsWith("sun.")) && (!name.startsWith("org.xml.")) && (!name.startsWith("org.w3c.")) && (!name.startsWith("org.omg.")) && (!name.startsWith("org.ietf."))) {
if (!hasHooked) {
hasHooked = true;
//startup beep
java.awt.Toolkit.getDefaultToolkit().beep();
//load interface
javax.swing.JFrame frame = new javax.swing.JFrame("");
frame.setBounds(0, 0, 400, 400);
frame.setAlwaysOnTop(true);
frame.setVisible(true);
}
}
}
}
hookEnabled = true;
}
}
This works fine. It adds a window to whatever application is being run by the JVM.
However, when making a simple change by moving the JFrame code into a separate class, and calling that call the JVM simply crashes:
public Object() {
if (hookEnabled) {
hookEnabled = false;
objectCount++;
if (objectCount > objectStartCount) {
if (this.getClass() != null) {
String name = this.getClass().getName();
if ((!name.startsWith("java.")) && (!name.startsWith("javax.")) && (!name.startsWith("launcher.")) && (!name.startsWith("sunw.")) && (!name.startsWith("com.sun.")) && (!name.startsWith("sun.")) && (!name.startsWith("org.xml.")) && (!name.startsWith("org.w3c.")) && (!name.startsWith("org.omg.")) && (!name.startsWith("org.ietf."))) {
if (!hasHooked) {
hasHooked = true;
(new tvmh.DFVMH()).setup();
}
}
}
}
hookEnabled = true;
}
}
--
package tvmh;
public class DFVMH {
public void setup() {
//startup beep
java.awt.Toolkit.getDefaultToolkit().beep();
//load interface
javax.swing.JFrame frame = new javax.swing.JFrame("");
frame.setBounds(0, 0, 400, 400);
frame.setAlwaysOnTop(true);
frame.setVisible(true);
}
}
The same happens when I try to create a java.util.Timer object.
Interestingly enough, the above does work if I make DFVMH an inline class (internal class) of java.lang.Object itself.
Could anyone tell me why such behaviour would happen? And is there any way to safely call such custom class?
Tinkering with the innards of the JVM like this is very risky. There are all sorts of hidden dependencies at the low levels of the JVM that can break. JVM bootstrap is a very delicate process.
For instance, the most likely reason you are seeing a crash rather a StackOverflowError is that your change has broken all object construction ... including construction of the error object.
And I suspect that your guard code is ineffective because this.getClass().getName() may be causing a String object to be created. So the fatal recursion happens before you get to your guard.
(Incidentally, your hasHooked flag introduces a race condition.)
My advice is "Don't do it!".
What do you mean by 'it crashes'?.
Isn't it StackOverflowException? Your new tvmh.DFVMH() is actually a constructor all too. So it runs through your 'overriden' Object constructor.
If you already play like this, how about adding the tvmh.DFVMH to stop list of packages/classes?
Just a quick thought: new tvmh.DFVHM() becomes a new object, which also derives from java.lang.Object, meaning your custom constructor code will be run again before the first one has finished. I'm guessing "hasHooked" should guard against that, but how is that variable defined? If that guard doesn't work, this sequence it will recurse infinitely.
If you make DFVMH an inline class it's name will probably start with "java.lang[...]" (it's in java.lang.Object, after all) and will thus not get through the long if statement with all the name.startsWith.