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

Question

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.

Solution 1

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.

Solution 2

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.

Comments

[geocodezip]

What does this have to do with google-maps?

[Sujay]

The KML layer is placing images on top of Google Maps. I will edit the question to make it clearer. The cached images should be placed on top of Google Maps in the users' browser.

[Sujay]

Kenton thanks for taking the time to answer my question and with so much of patience. I have built and published the worker. The images I wanted to display on the map are still blocked.

[Sujay]

There are two issues : 1. When you try to access the worker in a browser, it is prompting Forbidden serve-atlas-images.nightskybrightness.workers.dev

[Sujay]

2. The following warning is being displayed worker.js:3 The Service Workers Cache API is currently unimplemented in the Cloudflare Workers Preview. Cache API operations which would function normally in production will not throw any errors, but will have no effect. Notably, Cache.match() will always return undefined, and Cache.delete() will always return false. When you deploy your script to production, its caching behavior will function as expected.