-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
106 lines (100 loc) · 3.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<meta charset="utf-8"/>
<title>Loggerhead.js Tester</title>
<style>
input[type='text'] {
width: 500px;
}
input, label{
vertical-align: middle;
}
label {
margin-right: 1em;
}
p {
margin: 1.5em;
}
i {
display: inline-block;
margin-bottom: 0.3em;
}
</style>
<script type="text/javascript" src="loggerhead.js"></script>
</head>
<body>
<h3>Loggerhead.js tester</h3>
<span>Open browser's Development Tools pane and take a look at the "Console" tab or at "Network" tab</span>
<p>
<i>Set the enpoint URL where to POST the log message <small>(e.g.: https://httpbin.org/post )</small></i>
<br />
<input type='text' name='url' placeholder='set the enpoint URL here' value='https://httpbin.org/post' />
</p>
<p>
<i>Prepare the log message for the test</i>
<br />
<input type='text' name='log-message' placeholder='write a log message to send' value='default log message' />
</p>
<hr />
<p>
<i>Choose the severity log-level you want to test</i>
<br />
<input type='radio' id='info' value='info' name='log-level' checked /><label for='info'>info</label>
<input type='radio' id='debug' value='debug' name='log-level' /><label for='debug'>debug</label>
<input type='radio' id='warning' value='warning' name='log-level' /><label for='warning'>warning</label>
<input type='radio' id='error' value='error' name='log-level' /><label for='error'>error</label>
</p>
<p>
<i>Send the log message via Loggerhead.js</i>
<br />
<button id='send-log'>Send Log Message</button>
<br />
<br />
<i>The following is the return value of the POST request triggered by the 'Send Log Message' button above.</i>
<p id='text-result'><i>no-request sent yet</i></p>
<hr />
</p>
<p>
<i>Send the log message through Loggerhead.js by throwing a simple Javascript error</i>
<br />
<button id='throw-error'>Throw Error</button>
</p>
<script>
// keep config values up-to-date
const urlInput = document.getElementsByName('url')[0];
urlInput.addEventListener('keyup', (e) => Loggerhead.set({ url : e.target.value }));
urlInput.addEventListener('change', (e) => Loggerhead.set({ url : e.target.value }));
// set config values
Loggerhead.set({ url : urlInput.value, console: { info: false, debug: false } });
// additional action after Loggerhead function call
function writeResponse (jsonText) {
document.getElementById('text-result').innerHTML = JSON.stringify(jsonText)
}
// call Loggerhead function here, based on the choosen log level
function sendLog() {
const message = document.getElementsByName('log-message')[0].value;
let result;
switch(document.querySelector('input[name="log-level"]:checked').value) {
case 'info': result = Loggerhead.info(message); break;
case 'debug': result = Loggerhead.debug(message); break;
case 'warning': result = Loggerhead.warning(message); break;
case 'error': result = Loggerhead.error(message); break;
default: result = Loggerhead.info('[unknown log level]');
}
if (result){
result.then(resultJson => writeResponse(JSON.parse(resultJson.data))).catch(e => writeResponse(e));
}
}
document.getElementById('send-log').addEventListener('click', sendLog);
// let's see what happens with the Loggerhead plugin when an error is thrown
function newError() {
throw new Error("boom!");
}
document.getElementById('throw-error').addEventListener('click', newError);
Loggerhead.setHeaders = function(headers) {
headers.set('X-CSRF-Token', '<my-token-value>');
return headers
}
</script>
</body>
</html>