Architecture

Short Introduction

• GitHub is used for recording issues
• Flask for the main backend operation
• A layer of JavaScript to handle the JSON data

The simplified graphical version looks a bit like this:

@startuml
Browser -> webcompat: HTTP Request [by JS on client]
webcompat -> Browser: HTTP Response (html/css/js/images)
Browser -> "webcompat API": HTTP XHR Request [by JS on client]
"webcompat API" -> "GitHub API": HTTP Request [by Python]
"GitHub API" -> "webcompat API": HTTP Response (json)
"webcompat API" -> Browser: HTTP Response (json) [by Python on server]
@enduml

API description

There are two different post to create a new bug report on webcompat.com. Both cases involves that the user accepts through a final step to create the issue. This is important for privacy reasons.

URL with parameter (Deprecated)

It takes basically an API with parameters URL

https://webcompat.com/issues/new?src=desktop-reporter&label=type-media&label=type-stylo&url=https://url.example.com/

will return an HTML page pre-populated with parameters ready to be submitted by the user.

HTTP POST with a JSON body (Recommended)

POST /issues/new HTTP/1.1
Accept: application/json, */*
Content-Length: 45
Content-Type: application/json
User-Agent: something

{
    "src": "web", 
    "url": "https://example.com/"
}

The list of acceptable keywords is the same than in the case of URL parameters. This will return a web page pre-populated with parameters that the user can submit.

HTTP/1.1 200 OK

Webhook

Webcompat-bot is the main customer of the webhook system. Each time a new issue is created, webcompat-bot will assign labels and milestones to the issue, depending on a certain number of parameters.

• URI parameters assign labels
• new issue created goes automatically to triage.
• User Agent detection assign browser labels.

Webcompat-bot

Webcompat-bot is here to help with:

• automatic labeling
• handling anonymous bug reporting.

Flask + JS

The site currently delivers mostly empty HTML templates containing JavaScript. Once a page is delivered on a HTTP request /issues/[number], a JavaScript fetch is executed to get both the issue description and the associated comments with it. These are sent with a JSON format. Then the page is rendered with this JSON information reformatted on the fly into HTML.