What is Mist?

Why use Mist?

With wrangler 1.0, setting up a local dev environment with Cloudflare required a stable internet connection, as serverless functions run on Cloudflare’s Edge Network. Requiring a live internet connection added a layer of complexity to the development process. When Miniflare came along, it became possible to run serverless functions locally. Unfortunately, Cloudflare’s GraphQL Analytics API only works when serverless functions are fully deployed to CloudFlare’s Edge Network. We saw the need to create an APM tool that would run in a local dev environment; thus, Mist was born.

How does Mist work?

Mist is relatively straightforward in its implementation. It uses a port on the developer’s local machine to host a sandbox environment for workers, which replicates cloud-hosted conditions. Another local port hosts Mist’s GUI for recording and displaying visual metrics. Following a recording session, Mist relays the recorded activity to a developer’s SQL database to store past sessions for easy retrieval and future analysis. It then logs worker activity, including HTTP request and response times, duration, status codes, etc. Finally, it maps retrieved data across several charts to easily visualize worker performance. Visuals include:

  • A table featuring the entire log of recorded activity for a given session
  • A scatter chart displaying individual requests and responses, complete with the duration of time between the request and the response.
  • A pie chart showing successes and errors for the recorded session
  • A bar chart displaying the average response times of the worker from the most recent recording sessions.

Getting Started

Install the mist package by running npm i mist-analytics to get started. Once Mist is installed, you’ll want to open it up in your browser with npm run mist. This command will open up the Mist GUI on localhost:8080. Now run node — require ‘./server/tracing.js’ server/miniflare to create a server instance with Miniflare and our tracing package. You’ll also want to create an .env file. Here, declare a variable called WORKER_NAME, and set it equal to the exact name of the Worker file you will be tracing.

Database

To store your metrics, you’ll want to create a database. For set-up purposes, we’ll assume you’re using ElephantSQL, but other postgreSQL database services will work as well.

  1. Create a new postgreSQL database
  2. Copy the link for that database
  3. Open up the Mist directory in your terminal
  4. Run the following command: psql -d <url from elephantSQL> -f db_template.sql. Ensure that your url is a string.
  5. Run a query to ensure that the table is present.
  6. In the .env file, store your postgreSQL link to a variable called MY_URI.

Gathering Metrics

On Mist, press start to begin a recording session. Now navigate to your localhost:8788, to run your app.

Stretch Goals

With the future in mind, the team behind Mist has already begun planning the implementation of extended features:

  • Previous recording session look-up
  • More worker-specific metrics (CPU median time, subrequests, performance, etc.)
  • Improved support for multiple workers

Team Mist

Continuing Development

Mist is an ever-evolving open-source product. If you’d like to contribute, please reach out to a team member with your proposal so we can incorporate you into the development process.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store