im trying to get data from this page
https://ahrefs.com/backlink-checker
its basically a website to check a domain rank and other status , when u enter a domain and click the check Check backlinks button it shows a google recaptcha
im using a captcha service to bypass this , problem is this site uses a callback on the captcha completion , when i recive the token from my api and put it in the #g-recaptcha-response i have to call the callback to move on there is no submit button
i used to find the callback in this object
___grecaptcha_cfg.clients[0].L.L.callback
and just call it like
page.evaluate(`___grecaptcha_cfg.clients[0].L.L.callback("${cap}")`)
but recently this obeject is nowhere to be found
and i get
Evaluation failed: TypeError: Cannot read property 'L' of undefined
any idea?
When I checked that url and when the captcha was there on the screen, then the object inside ___grecaptcha_cfg.clients[0] where callback was available was different i.e., L was not there on ___grecaptcha_cfg.clients[0], that's why you might have got the error. So thought of navigating to the callback object based on the type rather than directly accessing.
const client = ___grecaptcha_cfg.clients[0]
const keys = Object.keys(client)
const requiredKey = keys.find(key => client[key].constructor.name === "VK");
const requiredObj = client[requiredKey];
const callbackObjKey = Object.keys(requiredObj).find(key => requiredObj[key].callback);
requiredObj[callbackObjKey].callback("${cap}")
Hope this helps.
I have modified the code and used below approach to find the callback object, though this method is not so optimised but this is the way I could think to find out the callback method
const reduceObjectToArray = (obj) => Object.keys(obj).reduce(function (r, k) {
return r.concat(k, obj[k]);
}, []);
const client = ___grecaptcha_cfg.clients[0]
let result = [];
result = reduceObjectToArray(client).filter(c => Object.prototype.toString.call(c) === "[object Object]")
result = result.flatMap(r => {
return reduceObjectToArray(r)
})
result = result.filter(c => Object.prototype.toString.call(c) === "[object Object]")
const reqObj = result.find( r => r.callback)
reqObj.callback("${cap}")
Related
I have a problem with a download button. If I reload the page, the onClick={() => ExportAll(data)} works fine the first time when pressing the download button, however when I try it after that the console throws this error:
The function itself looks like this:
const exportAll = (data) => {
const arr = []
data.map((element) => {
element.orderlines = element?.orderlines?.join(' , ')
arr.push(element)
}
);
exportFileAsXLSX(arr, `Meest recente orders-${props.timespan}`);
};
The data object is set using the useState hook
If anyone has any idea why this doesn't work, please let me know!
const exportAll = (data) => {
const arr = []
data.map((element) => {
let newElement = { ...element}
newElement.orderlines = element?.orderlines?.join(' , ')
arr.push(newElement)
}
);
exportFileAsXLSX(arr, `Meest recente orders-${props.timespan}`);
};
At first execution you overwrite original objects orderlines field value. Then at the next time you try to apply join operation to that field value again. Now it is a string not an array. That is the reason for the error.Change the code as above it will work.Above code I create a new obj rather than overwriting it.
Is orderlines an array? Cause you can only use join() if it is indeed an array!
Double check if it's not an object.
I'm struggling to figure out how to prevent my app from crashing after fetching data from an API. Here's what I have done so far:
User searches for a word and based on that word, the program goes to a link with the searched phrase, then fetches and stores data in a const
var baseUrl = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${search}&apikey=****`;
${search} = whatever the user enters in the searchbar
then baseUrl is the webite used to get all the data from API
useEffect(() => {
axios.get(baseUrl)
.then(res => {
setChart(res.data);
// console.log(res.data)
})
.catch(error => {
console.log("there was an error: " + error);
})
}, [baseUrl]);
useEffect(()=>{}, [chart]);
then the program loops thru the API and stores DATE and PRICE for each entry in const stockPrices and stockDates.
const stockPrices = useMemo(() => chart && Object.values(chart['Time Series (Daily)']).map(i => i['1. open']).reverse(), [chart]);
const stockDates = useMemo(() => chart && Object.keys(chart['Time Series (Daily)']).map(x => x.replace(/\d{4}-/, "")).reverse(), [chart]);
However, sometimes if user enter a search for which there's no existing link.. the app crashes, as it's trying to loop and display data that doesn't exist.
I'm not really sure how to handle this.
In the search component, I added this little "if" statement to stop it doing anything if the search is empty ( because no such link exists ):
const handleSearch = (e) => {
e.preventDefault();
if (e.target.value !== ``) {
setSearch(e.target.value.toUpperCase())
}};
However, this only solves a small part of the problem. If the app tries to fetch data from an invalid link it simply crashes.
when the app crashes - in the console it says
"Cannot convert undefined or null to object" which is reported from the line where const stockPrices and const stockDates are sitting on.
How can I stop the app from fetching data if a link doesn't exist - how to handle this bug ?
just for context the data stored in those variables is then passed to render a chart with prices (Y-axis) and dates(X-axis) so it needs to at least have some sort of replacement..
if(typeof stockDates === 'undefined') {
return ('undefined');
} else if(stockDates=== null){
return ('null');
}
I tried doing this to replace bad fetch with 'null' || 'undefined' but it's still crashing.
Please help.
IN SHORT: App crashes if it's trying to fetch data from a link that doesn't exist ( based on input from searchbar )
I'm not sure what error you're facing with the search problem.
The other one's the error you get when you pass undefined to Object.keys or Object.values function.
I'm gonna guess the API returns some data for invalid links so chart is not undefined. In the code, you're checking to make sure chart is not undefined. But most likely, chart['Time Series (Daily)'] is undefined.
I don't know enough about your requirements to suggest a fix. But you could add an additional check and make it so...
const stockPrices = useMemo(() => chart && chart['Time Series (Daily)'] && Object.values(chart['Time Series (Daily)']).map(i => i['1. open']).reverse(), [chart]);
const stockDates = useMemo(() => chart && chart['Time Series (Daily)'] && Object.keys(chart['Time Series (Daily)']).map(x => x.replace(/\d{4}-/, "")).reverse(), [chart]);
But I think it'd be better to fix the fetch code.
axios.get(baseUrl)
.then(res => {
if (res.data?.['Time Series (Daily)']) {
setChart(res.data);
}
else {
setChart(undefined);
//maybe set some error states so you can display the appropriate message?
}
})
I have tried getting cypress to save a text for later usage but I feel unable to reuse it as a variable
cy.get('.unrd').then(($span) => {
const filteredunread = $span.text()
cy.wrap(filteredunread).as('oldunreadmessage');
})
Codeblock to send a mail, wait and return to the inbox expecting an echo reply
cy.get('.unrd').then(($span) => {
cy.get('#oldunreadmessage') //seen as object
const newunread = $span.text()
expect(newunread).to.eq(cy.get('#oldunreadmessage') +1)
})
This gives me errors such as:
expected '(27)' to equal '[object Object]1'
I have tried to use .as(). However I seem to be unable to properly resolve my old object as a text or integer constant.
The first part is fine, but because of the cy.wrap you need to use should or then on the cy.get('#oldunreadmessage')
cy.get('.unrd').then(($span) => {
const newunread = $span.text();
cy.get('#oldunreadmessage').should('have.text', newunread);
})
or
cy.get('.unrd').then(($span) => {
const newunread = $span.text();
cy.get('#oldunreadmessage').then((oldunread) => {
expect(newunread)...
}
})
I have a frontend app with many API requests, but it's a pain to work with error responses.
Sometimes I need to go through many nested objects like: error.response.data.email and sometimes it is error.response.data.address.province[0].
I can't predict all of the errors, and writing manual "parsers" looks like a dirty extra solution to me:
const errorsObject = err.response.data
let errors = ''
Object.keys(errorsObject).map(key => {
if (key === 'address') {
Object.keys(errorsObject.address).map(
key => (errors += `${key} : ${errorsObject.address[key]}\n`)
)
} else {
errors += `${key} : ${errorsObject[key]}\n`
}
return undefined
})
yield toast.error(errors)
Also it still doesn't cover everything.
Is there any frontend parsers for that? If not, our backend is Python(Django), maybe there is a package for backend side? Ideally I'd want to see a flat array of objects {title, message}.
Your error objects are wellformed and the base idea of parsing the errors is right from a frontend perspective.
The only issues I see in your errors response is nesting and hydration.
If you want hydrated responses you should provide to your parser the feature of retrieving correctly data and eventually map it to frontend UI.
Usually I feed my forms with an object, usually called errors where I can safely retrieve the errors related to a field by its name.
IMHO you are doing it "right", try to work on object type instead of object specific key (like "address).
This is an example of a error parser I use very often. When a very deep nesting occurs or array parsing is needed, I usually update the parser to reach the error and gain the ability to retrieve it from my UI, for example to show the error under the field, border it in red and so on:
import _ from 'lodash';
export const getErrors = (errors) => {
const validationErrors = _.get(errors, 'data.validation_messages') ? errors.data.validation_messages : {};
// Iterate over object keys
_.forOwn(validationErrors, (value, key) => {
// Simple error: { key: { errorKey: value }} - Nested Error {key: { nestedErrorKey: { errorKey: value }}
const data = validationErrors[key][Object.keys(validationErrors[key])[0]];
// Check that content of key is neither null or object (nested validation)
if (validationErrors[key] !== null && typeof data !== 'object') {
validationErrors[key] = _.values(value)[0];
} else if (validationErrors[key] !== null && typeof data === 'object') { // TODO: Recursive approach ?
// Trasform nested values so obj: { nestedKey: nestedvalue } becomes obj_nestedKey: nestedValue
_.forOwn(validationErrors[key], (nestedValue, nestedKey) => {
validationErrors[`${key}_${nestedKey}`] = _.values(nestedValue)[0];
});
}
});
return validationErrors;
};
export default getErrors;
In my previous project, every error has an error code coming in the response and on the frontend side, every error code gets mapped with error messages, which was very easy to provide multi-locale error messages. You can try that if you have control on APIs and add one more key as error_code.
I have a firebase reference, where I pull data down for a specific custom index I created.
requestsRef
.orderByChild('systemgameindex')
.startAt(lastrequest.systemgameindex.toString())
.endAt(lastrequest.systemgameindex.toString() + '~')
.limitToFirst(customElem.dataops.limit + 1)
.on('child_added', function (snapshot) {
var request = snapshot.val() || {};
request.key = snapshot.key();
request.systemColor = customElem.getSystemColor(request.system);
request.description = customElem.truncateText(request.description, 65);
customElem.getUserProfile(request);
customElem.getCommentCount(request.key);
if (request.systemgameindex !== lastrequest.systemgameindex) { customElem.push('requests', request); };
customElem.removeSpinnerRoo();
});
Right before I make the call to firebase, I have a custom spinner I dislay with a function called addSpinnerRoo(), and when data is returned, I make a call to removeSpinnerRoo() to hide the spinner on the DOM.
It works beautifully when there's data to return from firebase, but if the firebase query brings back no results, the callback on child_added never gets fired, so I have a spinner still spinning on the DOM.
Is there a way to handle when there's no data returned within Firebase?
Any insight would be appreciated a lot. Thanks
After reading this from the documentation from here:
The callback function receives a DataSnapshot, which is a snapshot of the data. A snapshot is a picture of the data at a particular database reference at a single point in time. Calling val() on a snapshot returns the JavaScript object representation of the data. If no data exists at the reference's location, the snapshots value will be null.
I was able to do use "val" instead of "child_added" to actually have firebase still fire the callback for the ".on()" method. So my code now looks like this:
var data = snapshot.val();
if (data !== null && data !== undefined) {
var requests = _.map(data, function (val, key) {
val.key = key;
return val;
});
_.each(requests, function (request) {
request.systemColor = customElem.getSystemColor(request.system);
request.description = customElem.truncateText(request.description, 65);
customElem.getUserProfile(request);
customElem.getCommentCount(request.key);
customElem.push('requests', request);
});
}
customElem.removeSpinnerRoo();
And with that, I was able to get what I needed. If this helps anyone, great...