API Status Page

[michaelrambeau]

This issue is a discussion about the requirements of the first page we'd like to implement: the API status page.

Goal

Create a page to monitor the status of all the APIs we connect in Best of JavaScript, and especially the API we created.

We want to know:

• if the API is online (does it respond with a 200 status)
• how much time it takes to respond
• how much data it returns (the size)

We'd like to check the JSON content returned by the API end-point.

In this first iteration, no backend is required, it would be a "real time check" every time the user opens the page.

How it could look like

The page could display several cards, every card would show the status of a given end-point.

The card would display:

• The status online / error
• The response time
• The size of data returned
• Data returned by the payload (maybe inside an expandable section, collapsed by default):
  • Raw data (JSON or HTML)
  • Formatted Data (JSON with syntax highlighted or HTML preview)

There would be a way to refresh data for any card.

We could use a timer to refresh data after every seconds.

Optional: the card could store in its local state the history of every request, so that we compare the results of the last N requests triggered since the page was opened.

Components

We could use a stateful component <FetchStatus> to fetch data about the status for a given URL , using the "render prop" pattern.

<FetchStatus url="https://bestofjs-api-v2.now.sh/projects/reduxjs/redux">
  ({ data, responseTime, responseSize, isLoading }) => <div />
</FetchStatus>

It could use, under the hood, this component: https://github.com/ghengeveld/react-async that has interesting features:

• startedAt and finishedAt dates (useful to compute the response time)
• cancel and reload action

To render the status of a given API end-point, we could create stateful <Status /> component

<Status
 url="https://bestofjs-api-v2.now.sh/projects/reduxjs/redux"
 httpStatus={200}
 responseTime={1248}
 responseSize={145}
 data={{ "name": "Redux" }}
/>

API URLs

Most of the URLs return JSON data, except get-github-readme-v2 URL that returns HTML.

• https://bestofjs-api-v2.firebaseapp.com/projects.json called when the application starts, to fetch data about ALL projects displayed in list of project pages
• https://bestofjs-api-v2.now.sh/projects/:owner/:repo called to get the details of a given project:
  • number of contributors
  • list of dependencies
  • data for the daily trends "heat map"
  • ...
• https://get-github-readme-v2.now.sh/:owner/:repo?branch=master called to fetch and format the README.md of a given project from GitHub
• https://bestofjs-api-v1.now.sh/projects/:owner/:repo/user-content called to fetch user links and user reviews about a given project.

[michaelrambeau]

Inspiration for the UI

ChecklyHQ

https://checklyhq.com/

A better way to monitor your API's and site click flows
Seamlessly monitor the performance and correctness of your API endpoints and vital site transactions from a single dashboard."

Insomnia