openstatus.dev
Openstatus
www.openstatus.dev
docs: update getting started (#452)
authored by
Maximilian Kaske
and committed by
GitHub
64ced46f
f9f404a1
+106
-40
-12
apps/docs/getting-started/alerting.mdx
-12
apps/docs/getting-started/alerting.mdx
···
1
-
---
2
-
title: Alert
3
-
description: "How to create your first alert with OpenStatus.dev"
4
-
---
5
-
6
-
## What is an alert? 🚨
7
-
8
-
An alert is a notification that is sent to you when a condition is met. For
9
-
instance, you can set up an alert to notify you when your website monitor fails
10
-
to ping your website.
11
-
12
-
## Configure your alert 🛠
+12
apps/docs/getting-started/incident.mdx
+12
apps/docs/getting-started/incident.mdx
···
1
+
---
2
+
title: Incident
3
+
description: "How to create your first incident 🔥"
4
+
---
5
+
6
+
When creating an incident, you can map it to either to a **status page** or to a
7
+
**monitor**. This will allow you access the latest incidents on your status
8
+
page.
9
+
10
+
Update your incident over time and keep your users informed. Add a new
11
+
**status**, **date** and **message** to your incident. They will be displayed on
12
+
a timeline.
+45
-11
apps/docs/getting-started/monitor.mdx
+45
-11
apps/docs/getting-started/monitor.mdx
···
10
10
11
11
## Configure your monitor 🛠
12
12
13
-
<Frame caption="Create your first monitor">
14
-
<img src="/images/monitor/monitor.png" alt="Create your first monitor" />
13
+
Your endpoint check requires:
14
+
15
+
- a **name** to identify your monitor
16
+
- the **URL** to checked
17
+
18
+
We will store the **response time** and the **status code** of your endpoint.
19
+
20
+
<Frame caption="Monitor your endpoint">
21
+
<img
22
+
src="/images/monitor/monitor-detail.png"
23
+
alt="Charts with status code and response time"
24
+
/>
15
25
</Frame>
16
26
17
-
A monitor requires a few things to be configured:
27
+
### HTTP Request 📤
18
28
19
-
- an endpoint to check 🔗
20
-
- a check interval ⏰
21
-
- a region to run the check from 🌍
29
+
Customize the request sent to your endpoint.
22
30
23
-
## Advanced configuration 🧙♂️
31
+
Choose between one of the request **HTTP Method**: `GET` (default), `POST` or
32
+
`HEAD`.
24
33
25
-
Sometimes you need to configure your monitor more precisely.
34
+
Add custom key-value **HTTP Headers** to your request.
26
35
27
-
- set a Method (GET, POST) 🧭
28
-
- set a custom HTTP Headers (useful if your endpoint is secured) 🔑
29
-
- set a custom HTTP Body (for POST request only) 📦
36
+
> OpenStatus automatically appends the `"OpenStatus-Ping": "true"` header to
37
+
> your request. This header is used to identify the request as a ping request
38
+
> and can be exluded from your analytics.
39
+
40
+
If you select the `POST` method, you can add a custom **HTTP Body** to your
41
+
request.
42
+
43
+
### Advanced Configuration ⏱️
44
+
45
+
Define the **frequency** of your checks. You can choose between: `1m`, `5m`,
46
+
`10m` (default), `30min` or `1h`.
47
+
48
+
By default, **all regions** are enabled. You can disable some regions if you
49
+
want to. Leaving it empty will check your endpoint from a random region.
50
+
51
+
The **description** is optional. If defined, an `Info` tooltip will be added to
52
+
your monitor name.
53
+
54
+
You can always pause your monitor with the **active** switch button.
55
+
56
+
### Notifications 🔔
57
+
58
+
Get informed whenever a check fails. You can add multiple notification channels.
59
+
60
+
We send a webhook to Slack or Discord channels. Or you can also receive an
61
+
email.
62
+
63
+
---
30
64
31
65
> Create an API key and use it in your HTTP Headers to create your monitor
32
66
> programmatically API.
+33
apps/docs/getting-started/notification.mdx
+33
apps/docs/getting-started/notification.mdx
···
1
+
---
2
+
title: Notification
3
+
description: "How to create your first alert with OpenStatus.dev"
4
+
---
5
+
6
+
You get notified when your monitor has failed. Configure multiple alerts for
7
+
each monitor.
8
+
9
+
We support the following notification channels: **email**, **slack** and
10
+
**discord**.
11
+
12
+
<Frame caption="Create your notification channel">
13
+
<img
14
+
src="/images/notification/discord-notification.png"
15
+
alt="Create your notification bot"
16
+
/>
17
+
</Frame>
18
+
19
+
### Email ✉️
20
+
21
+
Enter your email address in the alert configuration.
22
+
23
+
### Slack 📣
24
+
25
+
Create an [incoming webhook](https://api.slack.com/messaging/webhooks) in your
26
+
Slack workspace. Copy the webhook URL and paste it in the alert configuration.
27
+
28
+
### Discord 🤖
29
+
30
+
Create a
31
+
[webhook](https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks)
32
+
in your Discord server. Copy the webhook URL and paste it in the alert
33
+
configuration.
-2
apps/docs/getting-started/status-widget.mdx
-2
apps/docs/getting-started/status-widget.mdx
apps/docs/images/monitor/monitor-detail.png
apps/docs/images/monitor/monitor-detail.png
This is a binary file and will not be displayed.
apps/docs/images/notification/discord-notification.png
apps/docs/images/notification/discord-notification.png
This is a binary file and will not be displayed.
+6
-6
apps/docs/introduction.mdx
+6
-6
apps/docs/introduction.mdx
···
25
25
## Start with OpenStatus
26
26
27
27
<CardGroup cols={2}>
28
-
<Card title="Alert" href="/getting-started/alerting">
29
-
Learn how to set up alerting for your monitors
30
-
</Card>
31
-
<Card title="Heartbeat" href="/getting-started/heartbeat">
32
-
Learn how to create your first heartbeat monitor
33
-
</Card>
34
28
<Card title="Monitor" href="/getting-started/monitor">
35
29
Learn how to create your first monitor
36
30
</Card>
37
31
<Card title="Status Page" href="/getting-started/status-page">
38
32
Learn how to set up your status page
33
+
</Card>
34
+
<Card title="Notification" href="/getting-started/notification">
35
+
Learn how to set up alerting for your monitors
36
+
</Card>
37
+
<Card title="Incident" href="/getting-started/incident">
38
+
Learn how to create your first incident
39
39
</Card>
40
40
</CardGroup>
+4
-3
apps/docs/mint.json
+4
-3
apps/docs/mint.json
···
71
71
{
72
72
"group": "Getting Started",
73
73
"pages": [
74
-
"getting-started/alerting",
75
-
"getting-started/heartbeat",
76
74
"getting-started/monitor",
77
-
"getting-started/status-page"
75
+
"getting-started/status-page",
76
+
"getting-started/incident",
77
+
"getting-started/notification",
78
+
"getting-started/heartbeat"
78
79
]
79
80
},
80
81
"getting-started/status-widget"
+6
-6
packages/react/README.md
+6
-6
packages/react/README.md
···
1
-
## Status Widget
1
+
# Status Widget
2
2
3
3
Create an account on [openstatus.dev](https://openstatus.dev), start monitoring
4
4
your endpoints and include your own StatusWidget into your React Application.
5
5
6
6
7
7
8
-
### Install
8
+
## Install
9
9
10
10
```bash
11
11
npm install @openstatus/react
···
14
14
bun add @openstatus/react
15
15
```
16
16
17
-
### How to use the StatusWidget in your Next.js App Router
17
+
## How to use the StatusWidget in your Next.js App Router
18
18
19
-
#### Include the styles.css
19
+
### Include the styles.css
20
20
21
21
If you are using tailwind, extend your config with:
22
22
···
53
53
}
54
54
```
55
55
56
-
### Headless getStatus utility function
56
+
## Headless getStatus utility function
57
57
58
58
If you would like to style it yourself, you can use the `getStatus` function to
59
59
access the type response of the api call to:
···
90
90
91
91
Learn more in the [docs](https://docs.openstatus.dev/packages/react).
92
92
93
-
#### About OpenStatus
93
+
### About OpenStatus
94
94
95
95
OpenStatus is an open source monitoring services with incident managements.
96
96