We Keep Coding

#twilio/conversations connected but forbids adding new participants

I am using the #twilio/conversations library in a NextJS + React application.
After successfully connecting with an Access Token, I am able to interact with the Client object normally and get participants, conversations, users, etc.
import { Client } from "#twilio/conversations"
const client = new Client(token)
However, when I try to add a participant I am receiving a Forbidden error. The current authenticated user is already a part of the conversation. I am trying to add a different, second user to the conversation. It doesn't matter which conversation or which user I attempt to add as a participant, the error is the same.
const conversation = await client.getConversationByUniqueName(conversationUniqueName)
const res = await conversation.add(userIdentity)
Error response:
Uncaught (in promise) Error: Forbidden
at Upstream._callee$ (browser.js?5550:2968:1)
at tryCatch (regeneratorRuntime.js?6f37:86:1)
at Generator.eval [as _invoke] (regeneratorRuntime.js?6f37:66:1)
at Generator.eval [as next] (regeneratorRuntime.js?6f37:117:1)
at asyncGeneratorStep (asyncToGenerator.js?8e4b:3:1)
at _next (asyncToGenerator.js?8e4b:25:1)

How to fix 'Uncaught (in promise) TypeError: Cannot read property 'method' of undefined' in Cloudflare worker?

I am trying to cache images that will be called by a KML layer in React Google Maps in order to reduce latency in displaying images and reduce calls to AWS S3 at scale using Cloudflare Worker .
I have followed the Cloudflare tutorial that can be found through this link : https://workers.cloudflare.com/docs/tutorials/configure-your-cdn/
The Cloudflare worker project has been compiled into a script and the console is indicating the following errors.
Uncaught (in promise) TypeError: Cannot read property 'method' of undefined
Uncaught (in response) TypeError: Cannot read property 'method' of undefined
I have checked the minified file of the script generated by Cloudflare but I am not being able to figure out what is going wrong although I followed the tutorial diligently.
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
const BUCKET_NAME = 'nightskybrightness'
const BUCKET_URL = `https://${BUCKET_NAME}.s3.eu-west-3.amazonaws.com`
async function serveAsset(event) {
const url = new URL(event.request.url)
const cache = caches.default
let response = await cache.match(event.request)
if (!response) {
response = await fetch(`${BUCKET_URL}${url.pathname}`)
const headers = { 'cache-control': 'public, max-age=15638400' }
response = new Response(response.body, { ...response, headers })
event.waitUntil(cache.put(event.request, response.clone()))
}
return response
}
async function handleRequest(event) {
if (event.request.method === 'GET') {
let response = await serveAsset(event)
if (response.status > 399) {
response = new Response(response.statusText, { status: response.status })
}
return response
} else {
return new Response('Method not allowed', { status: 405 })
}
}
Expected result : Cloudflare will cache the images on it's CDN and serve them when called by final users with reduced latency and also reduce calls to AWS S3.
cf-cache-status in network/headers section should indicate a HIT or MISS. The cached images will be positioned by the KML layer on top of Google Maps in the users' browser.
Actual result : Cloudflare worker script is throwing an error thus no image caching is taking place as intended.
cf-cache-status in network/headers section doesn't even show up in Response Headers section.

The problem is that on this line:
event.respondWith(handleRequest(event.request))
you are passing event.request as the parameter to handleRequest(). But on this line:
async function handleRequest(event) {
handleRequest() is defined to take just event, not event.request. So on this line:
if (event.request.method === 'GET') {
you are actually accessing event.request.request.method. But event.request.request is undefined, therefore you get an exception about trying to access undefined.method.
I would suggest changing the event.respondWith line to:
event.respondWith(handleRequest(event))
This is how it looks in the example code that you linked to.

I think the root of the issue is in CloudFlare's Worker Editor Preview implementation. I found the clue in a "chore" issue in Udacity's code.
which mentions ...
WARNING: Request Attributes do not currently work in the Worker Editor
Preview, resulting in an error: "Uncaught (in response) TypeError: Cannot read property 'country' of undefined."
So, just the error in the preview. "Save & Deploy" and test the *.worker.dev URL in a real browser if it works.

Handle 401 unauthorized code with react-router

I am wrapping some components with a function to handle errors, let's call this: wrapError.
Here some important points:
Some of the components call endpoints to fetch information.
I am using react-router
Everything works fine, but here we have the edge case:
When the access token of the users expires, the user can click and go to another page(component) and the new component will try to call its endpoint, then because the token is not valid we will receive a 401 error, finally remember that we have the wrapError that will handle this code Error.
This error is handled by using push(pushing to a 401 page error) from react-router but push is async so by a moment the code on the components keeps running, and prompts errors in the console.
Do you know how can I stop the flow, and redirect to the 401 screen?
function wrapError(callback, errorCode = 401) {
return callback.catch(e => {
if (errorCode === error.statusCode) {
// delete access token
history.push("/my401page");
... etc
The error is:
TypeError: Cannot read property 'variable' of undefined...
Because in that moment the endpoint returns undefined.

it's not related to react.
Cannot read property 'variable' of undefined...
This means you wanna access to property of object. but object is undefined.
in your example you catched error as e, but you used it as error.
Try this:
function wrapError(callback, errorCode = 401) {
return callback.catch(e => {
if (errorCode === e.statusCode) {
// delete access token
history.push("/my401page");
... etc

Firestore error 'Updating a non-existent query'

Sorry for my poor English.
When executing code like the following, an error like the image appears.
#firebase/firestore: - "Firestore(5.5.0): FIRESTORE(5.5.0) INTERNAL ASSERTION FAILED: Updating a non-existent query"
#firebase/firestore: - "Firestore(5.5.0): INTERNAL UNHANDLED ERROR: "
Unhandled Promise Rejection: Error: FIRESTORE(5.5.0) INTERNAL ASSERTION FAILED: Updating a non-exixtent query
Error: FIRESTORE(5.5.0) INTERNAL ASSERTION FAILED: Updating a non-existent query
firestore_error
const db = firebase.firestore();
const dammyRef = db.collection('dammy');
dammyRef.where('num', '>=', 18).where('num', '<', 30).get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(doc.data());
})
});
However, this error occurs only when using iPhone's Safari or Chrome.
There is no error in Chrome on the PC version.
The version of Firebase,
"firebase": "^ 5.5.0",
Please tell me the reason why this error occurs.
Thank you.

For me, this error occurred when I had an invalid data type as the third parameter of the Firestore 'where' query. Check your data type and make sure the value matches what is in the database.

Url is defined but still getting error of Protocol of Undefined

I am trying to make a GET request using axios and getting the error
Cannot read property 'protocol' of undefined
This API endpoint was http://gateway.apps.test-digital.co.za/api/content/movies and was working fine. We changed the last part of it in the back-end from 'movies' to 'movie' and did the same in the front-end and now it's breaking with the error message aforementioned.
I have had a look at these resources
TypeError: Cannot read property 'protocol' of undefined
Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
Cannot read property 'protocol' of undefined : axios react
关于import axios报错Cannot read property ‘protocol’ of undefined
And none of them has solved my problem. Reason being, all these issues turned out to be caused by the fact the url passed to the axios GET method were not defined which is not the case in my instance. When I log the url right before dispatching the axios call, it displays the correct url.
If I change, in the front-end, the last part of the end point from 'movie' to 'movies' (from what it actually is in the backend to what it was) I get a 404, which is expected because the endpoint changed from 'movies' to 'movie', but when I change back to 'movie' (what it actually is in the back-end) I get the error mentioned above.
Here is the code making the request
function getMovies() {
const url = movieContentUrls.getMovieUrl();
console.log("The url: ", url) //This logs the correct url to where the movies sit
return axios
.get(url)
.then(response => response.data)
.catch(error => {
console.error('ERROR: ', error.message);
return null;
});
}
The getMovieUrl function is defined in an object like this:
getMovieUrl: () => `${moviesApiBaseUrl}/content/movie`
And the network tab:
Questions
What may be going wrong here?
How do I fix it?