Debugging Cloudflare Staff with Logs

As with a few of my earlier Cloudflare posts, I’ve bought a video model of this content material so should you would quite watch that than learn, simply leap to the underside. For the remainder of you, this is a have a look at how you can do some fundamental debugging together with your Cloudflare Staff.

The Employee

Earlier than I get into how you can debug, let’s think about a easy Employee that has an API for returning random numbers. (Do not use Cloudflare Staff, or any serverless platform, for one thing so easy!)

export default {
	async fetch(request, env, ctx) {

		// ignore /favicon.ico
		if(request.url.consists of('favicon.ico')) return new Response('');

		// https://group.cloudflare.com/t/parse-url-query-strings-with-cloudflare-workers/90286/3
		const { searchParams } = new URL(request.url);
		let min = parseInt(searchParams.get('min'),10);
		let max = parseInt(searchParams.get('max'),10);
		console.log(`inititial min, max: ${min}, ${max}`);
		if(isNaN(min)) min = 1;
		if(isNaN(max)) max = 100;
		if(min >= max) { min=1; max=100 };
		console.log(`corrected min, max: ${min}, ${max}`);

		let selectedNumber = getRandomIntInclusive(min, max);
		console.log(`selectedNumber: ${selectedNumber}`);
		
		return new Response(JSON.stringify({selectedNumber}), {
			headers: {
				'Content material-Sort':'software/json;charset=UTF-8'
			}
		});


	},
};

operate getRandomIntInclusive(min, max) {
	min = Math.ceil(min);
	max = Math.flooring(max);
	return Math.flooring(Math.random() * (max - min + 1) + min); 
}

The logic boils right down to – examine the question string for a min and max worth, do some fundamental validation, after which return a random quantity in that vary. In order for you you possibly can truly hit this API right here: https://randomnumber.raymondcamden.employees.dev/

Debugging Regionally

You will discover a couple of console.log messages in there. When working the Employee regionally through npm run begin, the console messages will present up proper in your terminal. I ran the API a couple of occasions with completely different values within the question string and you may see the debug output:

Somewhat easy and really what I anticipated to see when testing, so I used to be pleased this “simply labored”.

Debugging in Manufacturing

Do not. Okay, however what if you wish to? Or just examine the output from logs? You’ve got bought two choices for that. First, within the Cloudflare Staff dashboard, choose your Employee, after which choose the Logs tab:

You then click on the great blue button, Start log stream:

Now, hit the URL on your Employee, or if it is triggered another method, await that to occur. As soon as a number of occasions have occurred, you may see them present up:

Lastly, click on on one to see the output. It is a huge JSON consequence that I’ve copied beneath. I did take away a few of the information to shorten it up a bit.

{
  "consequence": "okay",
  "scriptName": "randomnumber",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [
    {
      "message": [
        "inititial min, max: 9, 99999"
      ],
      "stage": "log",
      "timestamp": 1692730437605
    },
    {
      "message": [
        "corrected min, max: 9, 99999"
      ],
      "stage": "log",
      "timestamp": 1692730437605
    },
    {
      "message": [
        "selectedNumber: 36327"
      ],
      "stage": "log",
      "timestamp": 1692730437605
    }
  ],
  "eventTimestamp": 1692730437605,
  "occasion": {
    "request": {
      "url": "https://randomnumber.raymondcamden.employees.dev/?min=9&max=99999",
      "technique": "GET",
      "headers": {
        "settle for": "textual content/html,software/xhtml+xml,software/xml;q=0.9,picture/webp,picture/apng,*/*;q=0.8,software/signed-exchange;v=b3;q=0.7",
        "accept-encoding": "gzip",
        "accept-language": "en-US,en;q=0.9",
        "cf-connecting-ip": "76.72.14.122",
        "cf-ipcountry": "US",
        "cf-visitor": "{"scheme":"https"}",
        "connection": "Maintain-Alive",
        "dnt": "1",
        "host": "randomnumber.raymondcamden.employees.dev",
        "precedence": "u=0, i",
        "upgrade-insecure-requests": "1",
        "user-agent": "Mozilla/5.0 (Home windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.203",
        "x-forwarded-proto": "https",
        "x-real-ip": "76.72.14.122"
      },
      "cf": {
        "longitude": "-92.04770",
        "latitude": "30.18100",
        "tlsCipher": "AEAD-AES128-GCM-SHA256",
        "continent": "NA",
        "asn": 25921,
        "clientAcceptEncoding": "gzip, deflate, br",
        "nation": "US",
        "tlsVersion": "TLSv1.3",
        "colo": "ATL",
        "timezone": "America/Chicago",
        "metropolis": "Lafayette",
        "edgeRequestKeepAliveStatus": 1,
        "requestPriority": "",
        "httpProtocol": "HTTP/3",
        "area": "Louisiana",
        "regionCode": "LA",
        "asOrganization": "LUS Fiber",
        "metroCode": "642",
        "postalCode": "70503"
      }
    },
    "response": {
      "standing": 200
    }
  },
  "id": 1
}

You will discover the log messages, on high, with a helpful timestamp as properly. By the best way, be aware how the cf half consists of detailed geographic details about the requestor.

In order that’s debugging within the dashboard, how about in your native terminal? Seems that is quite straightforward with the wrangler CLI, simply use: npx wrangler tail X the place X is the identify of your Employee. So for me, that is npx wrangler tail randomnumber.

As soon as it is working, simply hit your API once more and you may instantly see outcomes.

Whereas I like the extent of element within the dashboard, I see myself utilizing the console model way more because it’s centered on simply the precise logs.

That is it! Let me know what you assume, and benefit from the video model beneath.

Photograph by Timo C. Dinger on Unsplash