I am working on an electron application used for display management. The app is used in malls/restaurants/airports for digital display ads. The electron app internally loads a react web-app and then displays it. The react web-app comes from our vendor who has a platform for displaying ads from different vendors. The react web-app is crashing in some instances (it is not able to find the correct ad etc). I am unable to debug this crash because the console.log messages from react web-app are not shown anywhere.
Is there a way to redirect the console.logs from the react application to some file?
Architecture:
- Electron App is a full-screen container for playing any content.
- Vendor provides a web-app, which plays different ads. This web-app is a react application.
- Vendor web-app crashes, but not able to see those logs anywhere.
According to the documentation, if you are trying to debug a renderer process you can open dev tools for this by calling the openDevToos() method on instances of webContents.
This is an example:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.webContents.openDevTools()
If you are trying to debug the main process, you should be able to leverage Google Chrome developer tools. If you open chrome and go to: chrome://inspect, you should be able to see your electron instance and click "inspect".
There are a few more options, which you can find here but I am of the opinion that these are the two simplest approaches.
I would also suggest leveraging debugger statements, as it will halt the execution of the code where you declare a debugger statement, and you could pin point more easily where the crash is happening.
Related
I am new to the react world and trying to use it in my sharepoint environment. I am packaging the app for production with source maps and upload it to the sharepoint site that I will use it in. App runs without a problem in the sharepoint but in the developer toolbox I cannot debug it completely. I can see my js file, put the debug point, and it pauses on the point but I cannot see the variables in console as you can see in the screenshot below.
But if I try the same code in dev environment with npm start I can see the same variable in console without any problem.
Is this normal behavior or am I doing something wrong? Thanks a lot.
is it possible to put a password requirement when someone tries to run a react native app using expo developer tools in local environment.
The steps someone would take is:
expo start
Scan qr code
--- I want to put a password requirement step here---
Open app in expo go app.
I don't think there's ready solution for this. I believe you will have to control access inside your app by yourself.
But the thing that is quite similar is publishing your app in expo environment by expo publish with privacy policy set to hidden https://docs.expo.dev/versions/latest/config/app/#privacy . Then you could get your QR code by accessing expo link (e.g. https://expo.dev/#community/native-component-list), which would be accessible only for users with right access to your project. More info here https://docs.expo.dev/workflow/publishing/
I am using React native to develop a mobile application, and an external module's function I use to provide the user login flow via an identity provider, opens the link to the sign-in flow in-app, like shown in the header below.
The sign out functionality offered by this module is documented to be obsolete, so I am implementing my own routing to the identity provider using Linking from the react-native node module, except this actually opens my native web browser rather than showing the page in-app (and subsequently fails to redirect back to my app).
My question is, what is the technical difference between an app opening a link in-app like shown above, and the app simply launching the native browser, such as chrome? And would this affect functionality like redirecting back to the initial application once the user process has been fulfilled (my guess is that it should not affect it).
I believe that the difference is that the in-app browser on IOS is an instance of
sfsafariviewcontroller and on Android, is an instance of Chrome Custom Tabs.
I have a problem with my first PWA.
I have created one with reactjs and configured good manifest.
I follow step by step google guide.
PWA, works perfectly, and i see "add to home button".
After QA i wanted to publish it in store.
I used https://appmaker.xyz/pwa-to-apk.
Now i have app publish in the store but when i open it, i see a browser toolbar and i can't use it as a native app.
Someone can help me?
How about using TWA (Trusted Web Activity)?
Using Trusted Web Activities
This can be achieved by proving that the app and the web trust each other.
If you can prove it, you can prevent the browser toolbar from being displayed.
I'm sorry if you don't get the answer you want.
Hello Guys !
Today I deployed an app online to test it but didn't understood very well why it didn't work.
What I did :
I've created a sample react app using bootstrap and used firebase to deploy it. Here is the link.
What was expected ?
I wanted the app to be able to be downloaded on the phone as angular.io is.
Reality :
Nothing special. It's in fact registered in service worker and very fast to load and download, but nothing more.
Problem now :
I've done it today two times but wasn't able to use it as well as the image of service workers I had.
What should I do ?
You need a a 144px square PNG icon to be defined in your manifest.json to enable the web app install banner.
You can validate whether your application can be added to your homescreen from Chrome on a desktop computer.
To do so, open the Chrome developer tools on your website, open the 'Application' tab, click 'Manifest' in the left navigation and then click 'Add to homescreen'.
If there's a problem adding to homescreen an error will appear in the console, when trying it on the website you mentioned I received the error 'Site cannot be installed: a 144px square PNG icon is required, but no supplied icon meets this requirement'.
You can read more about the requirements for web app install banners here https://developers.google.com/web/fundamentals/app-install-banners/.