Observable Framework ❤️ DownDetector and Allestoringen

Reports for incident analysis

When you face an incident it is good to make an incident report to see if you can find the root causes of it.
To share the analysis, you can create a report with all observability data, but actual data will get lost over time. Capture it as screenshot can be helpful, but hard to reproduce.
There are more ways to do that. Observable Framework provides a simple way to build interactive data reports.

The engineers of Observable Framework created a framework to create reports and provided an example of that as well:

It is also very easy to get started: https://observablehq.com/framework/getting-started
And with the Observable Framework, you can use the Observable Plot library to easily create graphs

Capture data from DownDetector / Allestoringen

When an incident occurs, customers report problems pretty quickly. DownDetector and Allestoringen (Dutch version reporting Dutch companies) provide a nice overview of the problems.
That data can be a starting point for your own incident report to indicate the customer impact.

There are kind of ways to capture data for the reports. That is described in the following link:
https://observablehq.com/framework/data-loaders

Example with ING

In this case I assume you just downloaded the raw HTML file from for example https://allestoringen.nl/storing/ing/ and store that as src/data/ing.html. Once you have to that you can make the next steps, as described below.

const ing = FileAttachment("./data/ing.html").text();

Import the functions from the downdetector.js file to convert the HTML to JSON and plot the data.
Source is available at https://github.com/cbos/observable-framework-and-allestoringen/blob/main/src/components/downdetector.js

import {convertHtmlToJson, plotOutage} from "./components/downdetector.js";

const outageData = convertHtmlToJson(ing);
display(outageData);

Now you can display the data in a graph:

plotOutage(convertHtmlToJson(ing))

Or you can render it as a card:

<div class="grid grid-cols-1">
  <div class="card">
    ${plotOutage(convertHtmlToJson(ing))}
  </div>
</div>

Reports for major banks in the Netherlands

With the steps above you can create reports for major banks in the Netherlands. This can be the starting point for your own report.
The graph from DownDetector only indicates the number of customers who complained about the problems. The actual number of customers affected is not visible.

Having this as a starting point you can add more actual numbers to the report to indicate what happened.

This interactive report is related to this blog post Observable Framework ❤️ DownDetector.