New navigation request was received at LifecycleWatcher - firefox

I wanted to scrape using puppeteer with firefox. I got this error.
Here is my code.
const root = require('app-root-path');
const puppeteer = require('puppeteer');
const scraper = require(`${root}/index.js`);
const links = require(`${root}/link.json`);
async function getData() {
const browser = await puppeteer.launch({ headless: false, product: "firefox" })
const linksLimit = 30;
const tempArray = Array.from({ length: Math.ceil(links.length / linksLimit) }, (_, i) => i + 1);
const p = await Promise.allSettled(tempArray.map(slice => {
return new Promise(async (resolve, reject) => {
const start = (slice - 1) * linksLimit;
const end = slice * linksLimit;
const linksSlice = links.slice(start, end);
await scraper(browser, linksSlice);
resolve();
})
}));
return p[p.length - 1].status === 'fulfilled' ? true : false;
}
getData();
/home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/puppeteer/common/LifecycleWatcher.js:137
(_a = __classPrivateFieldGet(this, _LifecycleWatcher_navigationResponseReceived, "f")) === null || _a === void 0 ? void 0 : _a.reject(new Error('New navigation request was received'));
^
Error: New navigation request was received
at LifecycleWatcher._LifecycleWatcher_onRequest (/home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/puppeteer/common/LifecycleWatcher.js:137:139)
at /home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:68
at Array.map ()
at Object.emit (/home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:43)
at NetworkManager.emit (/home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/puppeteer/common/EventEmitter.js:72:22)
at NetworkManager._NetworkManager_onRequest (/home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/puppeteer/common/NetworkManager.js:312:10)
at NetworkManager._NetworkManager_onRequestWillBeSent (/home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/puppeteer/common/NetworkManager.js:219:93)
at /home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:68
at Array.map ()
at Object.emit (/home/moyen/projects/node/daraz/node_modules/puppeteer/lib/cjs/vendor/mitt/src/index.js:51:43)
Node.js v17.4.0

Related

useEffect => .then returns undefined

I try to fetch the current offer price for my NFT project but i currently get undefined in this function
useEffect(() => {
returnsCurrentOfferPrice(NFT.tokenId)
.then((offer) => {
console.log(offer);
setReturnCurrentOfferPrice(offer);
})
.catch((error) => {
console.log('Current offer price error', error);
});
}, [NFT.tokenId]);
This is my use State Snippet
const [returnCurrentOfferPrice, setReturnCurrentOfferPrice] = useState(null);
This is how i retrieve the function into my UI
const returnsCurrentOfferPrice = async (tokenId) => {
await getCurrentOfferPrice(tokenId)
}
And finally this is how i retrieve the data from the blockchain
const getCurrentOfferPrice = async (tokenId) => {
const web3Modal = new Web3Modal();
const connection = await web3Modal.connect();
const provider = new ethers.providers.Web3Provider(connection);
const contract = signerOrProvider(provider);
const currentOfferPrice = await contract.getCurrentOfferAmount(tokenId);
const bigNumber = ethers.BigNumber.from(currentOfferPrice);
const currentOfferPriceInEther = ethers.utils.formatEther(bigNumber)
console.log('Current offer price', currentOfferPriceInEther );
return currentOfferPriceInEther;
}

Overwrite cypress commands to include a wait before they are run

I am trying to overwrite Cypress commands such as click, type and should to include some waiting time before they are executed. My motivation for this is that I want to highlight the areas the test interacts with in the produced video, so in click I would like to say for example: "Display circle where the click will happen, wait 500ms, click, wait 250ms, remove circle".
The wait-part of this of this is what causes me trouble.
Google suggests I do something like this:
Cypress.Commands.overwrite('click', function (originalFN) {
const originalParams = [...arguments].slice(1);
cy.wait(500).then(() => originalFN.apply(originalFN, originalParams));
});
And I think this works for normal clicks(), but it causes the type command to fail entirely saying this: Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.
It seems type() internally calls click in a way that prevents me from using wait() inside click.
Is there any way around this?
I've found a solution in the code of a library to slow down cypress, the key is to overwrite the internal runCommand cypress function. This allows me to do what I want on click and type. Should is still an open question, but not as important. Code below is my function to patch cypress, which I call right before my tests.
export function patchCypressForVideoRecording(cy: any, Cypress: any, speedFactor = 1) {
const colorClick = 'rgba(255, 50, 50, 0.8)';
const colorType = 'rgba(50, 255, 50, 0.8)';
const colorShould = 'rgba(50, 50, 255, 0.8)';
const waitTime = 600;
const highlightArea = (rect: any, clr: string, scale: boolean) => {
const x = Math.round(rect.x);
const y = Math.round(rect.y);
const w = Math.round(rect.width);
const h = Math.round(rect.height);
// cy.window() breaks in commands like click due to promise-inside promises stuff
// this window reference is just there and allows to run synchronous side-effects js without cypress noticing it
const hackWindow = (cy as any).state('window');
hackWindow.eval(`
const time = ${waitTime / speedFactor};
const x = ${x};
const y = ${y};
const highlightElement = document.createElement('div');
highlightElement.style.backgroundColor = '${clr}';
highlightElement.style.position = 'fixed';
highlightElement.style.zIndex = '999';
highlightElement.style['pointer-events'] = 'none';
document.body.appendChild(highlightElement);
const scaleElement = (p) => {
if (${scale}) {
const psq = p;
const scale = (0.1 + ((psq < 0.5 ? (1 - psq) : psq)));
const w = scale * ${w};
const h = scale * ${h};
const wLoss = ${w} - w;
const hLoss = ${h} - h;
const x = ${x} + wLoss / 2;
const y = ${y} + hLoss / 2;
return {x, y, w, h};
} else {
const w = ${w};
const h = ${h};
const x = ${x};
const y = ${y};
return {x, y, w, h};
}
};
const newSize = scaleElement(0);
highlightElement.style.top = newSize.y + 'px';
highlightElement.style.left = newSize.x + 'px';
highlightElement.style.width = newSize.w + "px";
highlightElement.style.height = newSize.h + "px";
const tickSize = 30;
let op = 1;
let prog = 0;
const fadeIv = setInterval(() => {
prog += tickSize;
const p = Math.min(1, prog / time);
let op = 1-(p*0.5);
highlightElement.style.opacity = op + '';
const newSize = scaleElement(p);
highlightElement.style.top = newSize.y + 'px';
highlightElement.style.left = newSize.x + 'px';
highlightElement.style.width = newSize.w + "px";
highlightElement.style.height = newSize.h + "px";
}, tickSize);
setTimeout(() => {
clearInterval(fadeIv);
document.body.removeChild(highlightElement);
}, time);
`);
};
const highlightInteractedElements = (firstParam: any, clr: string, scale: boolean) => {
if (firstParam != null && firstParam.length != null && firstParam.length > 0 && typeof firstParam !== 'string') {
for (let i = 0; i < firstParam.length; i++) {
const elem = firstParam[i];
if (elem != null && 'getBoundingClientRect' in elem && typeof elem['getBoundingClientRect'] === 'function') {
highlightArea(elem.getBoundingClientRect(), clr, scale);
}
}
}
};
// To figure out the element that is clicked/typed in need to wait until
// the selector right before click/type has a subject element
const waitAndDisplay = (x: any, clr: string) => {
if (x.state === 'passed') {
highlightInteractedElements(x.attributes.subject, clr, true);
} else {
if (x.attributes.prev.state === 'queued') {
setTimeout(() => {
waitAndDisplay(x, clr);
}, 15);
} else {
highlightInteractedElements(x.attributes.prev.attributes.subject, clr, true);
}
}
};
const cqueue = (cy as any).queue;
const rc = cqueue.runCommand.bind(cqueue);
cqueue.runCommand = (cmd: any) => {
let delay = 50;
if (cmd.attributes.name === 'click') {
waitAndDisplay(cmd, colorClick);
delay = waitTime / 2;
}
if (cmd.attributes.name === 'type') {
waitAndDisplay(cmd, colorType);
delay = waitTime;
}
return Cypress.Promise.delay(delay / speedFactor)
.then(() => rc(cmd))
.then(() => Cypress.Promise.delay(delay / speedFactor));
};
Cypress.Commands.overwrite('should', function (originalFN: any) {
const originalParams = [...arguments].slice(1);
highlightInteractedElements(originalParams[0], colorShould, false);
return originalFN.apply(originalFN, originalParams);
});
}

koa js backend is showing error - DB not connected -how to fix this issue

I am also trying different network connections it returns the same error. Please help I am stuck last 15 days in this error. Oh! last one thing my laptop IP is dynamically changing so what can I do know.
this is my mongoose connecter
const mongoose = require('mongoose')
const connection = () =>{
const str = 'mongodb://localhost:27017/524'
mongoose.connect(str , () =>{
console.log("Connection is successfull")
} )
}
module.exports = {connection }
this is server js
const koa = require('koa')
const cors = require('koa-cors')
const bodyParser = require('koa-parser')
const json = require('koa-json')
const {connection} = require('./dal')
const userRouter = require('./Router/userRouter')
const app = new koa()
const PORT = 8000
app.use(cors())
app.use(bodyParser())
app.use(json())
app.use(userRouter.routes()).use(userRouter.allowedMethods())
app.listen(PORT, ()=>{
console.log(`Server is running on port ${PORT}`)
connection();
})
this is modle class
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const UserSchema = new Schema ({
name:{
type:String,
required:true
},
email:{
type:String,
required:true,
unique:true
},
password:{
type:String,
required:true
},
role:{
type: Number,
default: 0
}
},{
timestamps:true
})
const User = mongoose.model('User', UserSchema)
module.exports = User
this is login route
const KoaRouter = require('koa-router')
const { register, login ,getAll } = require('../API/userAPI')
const userRouter = new KoaRouter({prefix: '/user'})
userRouter.post('/register', register)
userRouter.post('/login', login)
userRouter.get ('/get' , getAll)
module.exports = userRouter;
this is my contraller
const UserModel = require('../models/user.model')
const bcrypt = require('bcrypt')
const register = async (ctx) => {
try{
const user = ctx.request.body
const {name, email, password, role} = user
if (!name || !email || !password){
return (ctx.body = { message: "fill" });
}
else{
const exist = await UserModel.findOne({email})
if(exist){
return (ctx.body = { message: "User already exists" });
}else{
const salt = await bcrypt.genSalt();
const hashpassword = await bcrypt.hash(password, salt)
const newUser = new UserModel({
name,
email,
password : hashpassword,
role
})
await newUser.save()
return (ctx.body = { message: "User Registered" });
}
}
}catch(err){
console.log(err.message)
return (ctx.body = { message: err.message });
}
}
const login = async (ctx) => {
try{
const {email, password} = ctx.request.body
const user = await UserModel.findOne({email})
if (!user){
return ( ctx.body = {message:"User does not exist"})
}
else {
const isMatch = await bcrypt.compare(password, user.password)
if (!isMatch) {
return (ctx.body = { message:"Wrong Password"})
}else{
return (ctx.body = { user})
}
}
}catch(err){
return (ctx.body= {err})
}
}
const getAll = async (ctx) => {
try{
const users = await UserModel.find()
return (ctx.body = users)
}catch(err){
return (ctx.body= {err})
}
}
module.exports = {register, login ,getAll}
.
how to fix this.any ideas.Can any body guide me with this scenario.

Argument of type 'Promise<T>' is not assignable to parameter of type 'SetStateAction<T>'

I'm trying to make an api call with an async function. The function is in a useEffect hook so that every time the "input" is changed by the user, it searches for a new array.
When the api function is called, it returns Promise
I though I had resolved this Promise when using async await and .then(res) ?
Here is the code:
export type SearchResults = {
art_type: string
Title: string
Culture: string
Nation: string
Nationality: string
artist_type: string
Artist: string
source_type: string
Abbr: string
Source: string
}[]
const App: NextPage = () => {
const [input, setInput] = useState('Gogh')
const [results, setResults] = useState<SearchResults | undefined>(undefined)
// const [errors, setErrors] = useState<Error | null>(null)
useEffect(() => {
const fetchData = async (input: string) => {
const data: SearchResults = await fetch(`http://localhost:8080/search/${input}`).then(res => {
return res.json()
})
return data
}
const data = fetchData(input)
setResults(data)
}, [input])
const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target !== null) setInput(e.target.value.toLowerCase())
}
const deboucedSearchHandler = useMemo(() => debounce(searchHandler, 500), [])
Solved it by moving my fetchData declaration outside useEffect. Then I made the anon func used by .then() asynchronous and has the res.json() assigned to a variable with the await keyword.
const [input, setInput] = useState('Gogh')
const [results, setResults] = useState<SearchResults | undefined>(undefined)
// const [errors, setErrors] = useState<Error | null>(null)
const fetchData = async (input: string) => {
await fetch(`http://localhost:8080/search/${input}`).then(async res => {
const response: SearchResults = await res.json()
setResults(response)
})
}
useEffect(() => {
fetchData(input)
}, [input])
const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target !== null && e.target.value !== '') setInput(e.target.value.toLowerCase())
}
const deboucedSearchHandler = useMemo(() => debounce(searchHandler, 450), [])

Nunjucks setup for koa v2

I have a Koa v2 app with koa-views#next as a renderer and nunjucks templating engine. Here is my working setup, which don't have any problem, I just confused with the double declaration of the views folder:
const Koa = require('koa');
const nunjucks = require('nunjucks');
const path = require('path');
const router = require('koa-router')();
const views = require('koa-views');
const app = new Koa();
const index = require('./routes/index');
app.use(views(path.join(__dirname, 'views'), {
extension: 'njk',
map: { njk: 'nunjucks' },
}));
nunjucks.configure(path.join(__dirname, 'views'), {
autoescape: true,
});
router.use('/', index.routes(), index.allowedMethods());
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
But if I don't do this, the rendering doesn't work. If I uncommenting the nunjucks.configure block, I'm getting the following error:
Template render error: (unknown path)
Error: template not found: layout.njk
Is there any problem with my setup?
I come up a solution to use nunjucks without any other renderer library in koa v2:
/*
USAGE:
import njk from './nunjucks';
// Templating - Must be used before any router
app.use(njk(path.join(__dirname, 'views'), {
extname: '.njk',
noCache: process.env.NODE_ENV !== 'production',
throwOnUndefined: true,
filters: {
json: function (str) {
return JSON.stringify(str, null, 2);
},
upperCase: str => str.toUpperCase(),
},
globals: {
version: 'v3.0.0',
},
}));
*/
// Inspired by:
// https://github.com/ohomer/koa-nunjucks-render/blob/master/index.js
// https://github.com/beliefgp/koa-nunjucks-next/blob/master/index.js
const Promise = require('bluebird');
const nunjucks = require('nunjucks');
function njk(path, opts) {
const env = nunjucks.configure(path, opts);
const extname = opts.extname || '';
const filters = opts.filters || {};
//console.time('benchmark');
const f = Object.keys(filters).length;
let i = 0;
while (i < f) {
env.addFilter(Object.keys(filters)[i], Object.values(filters)[i]);
i += 1;
}
//console.timeEnd('benchmark');
const globals = opts.globals || {};
const g = Object.keys(globals).length;
let j = 0;
while (j < g) {
env.addFilter(Object.keys(globals)[j], Object.values(globals)[j]);
j += 1;
}
return (ctx, next) => {
ctx.render = (view, context = {}) => {
context = Object.assign({}, ctx.state, context);
return new Promise((resolve, reject) => {
env.render(`${view}${extname}`, context, (err, res) => {
if (err) {
return reject(err);
}
ctx.body = res;
return resolve();
});
});
};
return next();
};
}
module.exports = njk;
Gist

Resources