PayloadTooLargeError for Expo in React Native - expo

What is causing the PayloadTooLargeError error? I get it sometimes and also when the payload is a few KB (as far as I can figure out).
PayloadTooLargeError: request entity too large
at readStream (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/dev-server/node_modules/raw-body/index.js:155:17)
at getRawBody (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/dev-server/node_modules/raw-body/index.js:108:12)
at read (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/dev-server/node_modules/body-parser/lib/read.js:77:3)
at jsonParser (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/dev-server/node_modules/body-parser/lib/types/json.js:135:5)
at call (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:239:7)
at next (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:183:5)
at serveStatic (/usr/local/lib/node_modules/expo-cli/node_modules/serve-static/index.js:75:16)
at call (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:239:7)
at next (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:183:5)
I found some solutions that you can set the limit to a higher value, but that's not specifically for Expo.io
There is no console.log used in the app

The error you are seeing could be caused by one of the packages you are using which uses body parser.
In body parser there is an option to limit to request body size:
limit
Controls the maximum request body size. If this is a number, then the value specifies the number of bytes; if it is a string, the value is passed to the bytes library for parsing. Defaults to '100kb'.
Taken from here.
You can see a related SO questions here and here.
I also saw this GitHub issue for Expo-Cli

I had the same problem, after a lot of trials, I figure it out. The issue is related to the way you fetch the data, you are continuously fetching the data from database, which cause this error.
The solution is to fetch the data only once,
useEffect(() => {
}, []);
Here is code example to
useEffect(() => {
const fetchUser = async () => {
try {
let user = await AsyncStorage.getItem('user_id');
let parsed = JSON.parse(user);
setUserId(parsed);
//Service to get the data from the server to render
fetch('http://myIpAddress/insaf/mobileConnection/ClientDashboard/PrivateReplyConsulationTab.php?ID=' + parsed)
//Sending the currect offset with get request
.then((response) => response.json())
.then((responseJson) => {
//Successful response from the API Call
setOffset(offset + 1);
const pri = Object.values(responseJson[0].reply_list);
setPrivateReplies(pri);
setLoading(false);
})
.catch((error) => {
console.error(error);
});
}
catch (error) {
alert(error + "Unkbown user name")
}
}
fetchUser();
}, []);

I think the storage is merging the old requests, so can you reset the async storage
AsyncStorage.clear()

Related

Next JS How can i set cookies in an api without errors?

Next JS. I am trying to set some cookies in my /api/tokencheck endpoint. Here is a very simplified version of the code:
import { serialize } from 'cookie';
export default (req, res) => {
/* I change this manually to simulate if a cookie is already set */
let cookieexists = 'no';
async function getToken() {
const response = await fetch('https://getthetokenurl');
const data = await response.json();
return data.token;
}
if (cookieexists === 'no') {
getToken().then((token) => {
res.setHeader('Set-Cookie', serialize('token', token, { path: '/' }));
});
return res.status(200).end();
} else {
return res.status(200).end();
}
};
I have tried a ton of variations as to where to put my return.res.status... code, and tried many different ways to return a success code, but depending on where I put the code I variously end up with either of the following errors:
"API resolved without sending a response for /api/checkguestytoken, this may result in stalled requests."
or
"unhandledRejection: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client"
I seem to have some gap in my knowledge about how the API works in Next JS because I cannot figure out how to just run the async function, get a result, set a couple of cookies and then exit with a 200. Could someone please tell me what I'm doing wrong?

Automatically call API from Postman and generate a JSON response in a file

I am using Postman to call API. I have a couple to call, so I made a collection and I am able to run it.
I am trying to get the results of the API saved in a file (JSON is fine) and then everytime I call the API, to get the file updated. It is possible to automatically save a response for each API call?
Could you please how can I do it? I have tried with newman, but I`m not being succesful. Thank you.
Managed to get results in JSON files, although I have to update it manually. Followed this video on Youtube and this is the code in .js (if helps anyone in the future)
const newman = require('newman'); // require newman in your project
const fs = require('fs');
// call newman.run to pass `options` object and wait for callback
newman.run({
collection: require('./name_of_postman_collection.json'),
reporters: 'cli'
}).on('beforeRequest', (error, data) => {
if (error) {
console.log(error);
return;
}
console.log(data);
})
.on('request', (error, data) =>{
if (error) {
console.log(error);
return;
}
const fileName = `response ${data.item.name}.json`;
const content = data.response.stream.toString();
fs.writeFile(fileName, content, function (error) {
if (error) {
console.error(error);
}
});
});
I am still trying to find out how to automate the process, to get refreshed files every 2-3 hours for example.

What is wrong with my timestamp in my MWS request?

If I submit a request to MWS via the scratchpad(AmazonServices/Scratchpad),
it is successful, and I am able to view the details of the successful request. In particular, the timestamp on the request looks like this:
&Timestamp=2018-08-14T18%3A30%3A02Z
If I literally take this timestamp, as is, and try to use it in my code to make the same exact request, I get an error:
<Message>Timestamp 2018-08-14T18%3A30%3A02Z must be in ISO8601
format</Message>\n
Here is the function I am trying to place it in: (some chars changed in sensitive params)
exports.sendRequest = () => {
return agent
.post('https://mws.amazonservices.com/Products/2011-10-01')
.query({
AWSAccessKeyId: encodeURIComponent('BINAJO5TPTZ5TTRLNGQA'),
Action: encodeURIComponent('GetMatchingProductForId'),
SellerId: encodeURIComponent('H1N1R958BK8TTH'),
SignatureVersion: encodeURIComponent('2'),
Timestamp: '2018-08-14T18%3A30%3A02Z',
Version: encodeURIComponent('2011-10-01'),
Signature: encodeURIComponent(exports.generateSignature()),
SignatureMethod: encodeURIComponent('HmacSHA256'),
MarketplaceId: encodeURIComponent('ATVPDKIKX0DER'),
IdType: encodeURIComponent('UPC'),
'IdList.Id.1': encodeURIComponent('043171884536')
})
.then(res => {
console.log('here is the response');
console.log(res)
})
.catch(error => {
console.log('here is the error');
console.log(error);
})
}
What is even more strange, is that this is the path the request is being sent to:
path: '/Products/2011-10-01?
AWSAccessKeyId=BINAJO5ZPTZ5YTTPNGQA&Action=GetMatchingProductForId&SellerId=H1N1R958ET8THH&SignatureVersion=2&Timestamp=2018-08-14T18%253A30%253A02Z&Version=2011-10-01&Signature=LwZn5of9NwCAgOOB0jHAbYMeQT31M6y93QhuX0d%252BCK8%253D&SignatureMethod=HmacSHA256&MarketplaceId=ATVPDKIKX0DER&IdType=UPC&IdList.Id.1=043171884536' },
The timestamp is not the same as the one I placed in the query. Why is this happening?
Your HTTP library is already doing the url-encoding for you, so you're double-encoding things. Remove all references to encodeURIComponent() and format your timestamp normally, with : and not %3A. Observe what happens to the generated URL.
Why? URL-encoding isn't safe to do repeatedly.
: becomes %3A with one pass, but it becomes %253A with a second pass, which is wrong.

AWS X-Ray (with SailsJS) not logging things in the correct trace?

I am trying to use AWS X-Ray in my SailsJS application. I noticed missing subsegments - I added custom traces via AWSXRay.captureAsyncFunc but noticed they are missing. After some closer inspection, I think they actually ended up in a different trace. Lets say I call login API then another API later. I notice my login API trace is weird
Notice theres calls quite abit after the request should have ended.
Those requests should actually be in another segment:
I'd think they should appear after find device subsegment. Why are segments scrambled like that?
My setup: in http.js,
const AWSXRay = require('aws-xray-sdk');
const xrayEnabled = process.env.AWS_XRAY === 'yes'
module.exports.http = {
middleware: {
order: [
'startRequestTimer',
'cookieParser',
'session',
'myRequestLogger',
'bodyParser',
'handleBodyParserError',
'compress',
'methodOverride',
'poweredBy',
'awsXrayStart',
'router',
'awsXrayEnd',
'www',
'favicon',
'404',
'500',
],
awsXrayStart: xrayEnabled ? AWSXRay.express.openSegment(`cast-${process.env.NODE_ENV || 'noenv'}`) : (req, res, next) => next(),
awsXrayEnd: xrayEnabled ? AWSXRay.express.closeSegment() : (req, res, next) => next(),
Then I wrapped my promises like:
instrumentPromise(promise, name, metadata = {}) {
if (this.isXrayEnabled()) {
return new Promise((resolve, reject) => {
AWSXRay.captureAsyncFunc(name, (subsegment) => {
if (!subsegment) console.warn(`[XRAY] Failed to instrument ${name}`)
Object.keys(metadata).forEach(k => {
if (subsegment) subsegment.addMetadata(k, metadata[k])
})
console.time(`[XRAY TIME] ${name}`)
promise
.then((data) => {
if (subsegment) subsegment.close()
console.timeEnd(`[XRAY TIME] ${name}`)
resolve(data)
})
.catch(err => {
if (subsegment) subsegment.close()
console.timeEnd(`[XRAY TIME] ${name}`)
reject(err)
})
})
})
}
return promise
}
Is there any information I am missing here? What am I doing wrong?
I tried manual mode and its alot more reliable but I have to manually pass segment around. Whats wrong with automatic mode? I am kind of guessing it does not work well with async nature nodejs? Like the SDK is not able to differenciate between the various async requests? And may close or track segments in the wrong places? That said ... its supposed to work with express, why isit not working as expected ...
Another thing is how will a shared mysql connection pool be tracked correctly by X-Ray? Different segments will be using the same mysql pool. I assume this will not work work well at all?
The issue you encounter seems to be related to how CLS handle context binding with Promise. There is a opt-in promise patch introduced in this PR https://github.com/aws/aws-xray-sdk-node/pull/11. It has full discussion around the repros and fixes. That should resolve the issue with subsegments being attached to the wrong trace.
The SDK does support capturing pool.query. You can see examples here https://www.npmjs.com/package/aws-xray-sdk-mysql.

Why does React fetch retrieve blank object?

I have a working Django REST API which returns this:
{
"id": 1,
"brand": "peugeot",
"model": "3008",
"variant": "allure"
}
I am using the following code to fetch the above data:
render() {
const { brand, model, variant } = this.props;
let url = `http://127.0.0.1:8000/api/car/${brand}/${model}/${variant}/`;
console.log(url) <== url is correct when checked in console
fetch(url)
.then(response => response.json())
.then(data => data.length === 0 ? this.setState({
data : data
}) : null ) <== I have used a condition for setState to stop fetching infintely
const { data } = this.state;
console.log(data) <== This is a blank object with no data in console
console.log(data.id) <== This is undefined in console
return (
<div>
{data.id} <== No data is shown on webpage
Car Details
</div>
);
}
No error is shown when I try to fetch the data on my webpage. What am I doing wrong?
P.S. Data can be fetched from the same API server when I have an array of objects, and I use map to loop over the data. Over here I am trying to fetch a single item so there is no array, just an object. Am I doing something wrong with the syntax?
You should never fetch or setState inside the render function.
render is called many times due to all kinds of side effects, i.e scrolling, clicking, props changing etc. This kind of code could cause all kinds of trouble.
If you need to perform the request once, call the fetch function inside componentDidMount. Also, I believe your callbacks should look something like this:
fetch(url)
.then(response => response.json())
.then(data => this.setState({ data : data }))
Taken from the docs:
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
I changed the condition before 'setState' to JSON.stringify(data) !== JSON.stringify(this.state.data) and now it works.
should it be:
.then(data => data.length > 0 ? this.setState({ data }) : null )