-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
180 lines (180 loc) · 9.21 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bug-Hunter | Homepage</title>
<link rel="stylesheet" href="./src/styles/main.css">
<link rel="shortcut icon" href="/bug-hunter.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body data-theme="dark" class="flex c">
<header class="flex">
<div class="brand flex">
<img src="/bug-hunter.png" alt="Bug-Hunter logo">
<b>Bug-Hunter</b>
</div>
<div class="section flex">
<a href="https://github.com/Techzy-Programmer/Bug-Hunter" target="_blank" class="github">
<img src="/icons/github.png" width="28" alt="Github Logo">
</a>
<img class="profile icon hide" src="/icons/user.png" width="28" alt="User Profile Logo">
<div class="auth button" data-action="console">Console</div>
</div>
</header>
<div class="spinner"></div>
<div id="app" class="page out">
<div class="home flex c">
<div class="authwall flex c hide">
<b>Login or Register</b>
<i>To access Console</i>
<div class="comps flex c">
<label class="email field flex c">
<input type="email" id="c-email" placeholder=" "/>
<label for="c-email" class="placeholder">Enter your email</label>
<span class="error-message" aria-live="polite"></span>
</label>
<label class="passcode field flex c hide">
<input type="text" id="c-passcode" placeholder=" "/>
<label for="c-passcode" class="placeholder">Enter the Passcode to continue</label>
<span class="error-message" aria-live="polite"></span>
</label>
<label class="name field flex c hide">
<input type="text" id="c-name" placeholder=" "/>
<label for="c-name" class="placeholder">Enter your full name</label>
<span class="error-message" aria-live="polite"></span>
</label>
<div class="button inv" data-action="auth">Authenticate</div>
</div>
</div>
<div class="box-section flex c">
<b>Our Striking Features!</b>
<div class="subsec flex">
<div class="card flex a" style="--_spacer: 4;">Realtime logs tracing</div>
<div class="card flex b" style="--_spacer: 6;">Automated errors & bugs reporting</div>
</div>
<div class="subsec flex">
<div class="card flex c" style="--_spacer: 10;">Effortless & super easy integration</div>
</div>
<div class="subsec flex">
<div class="card flex d" style="--_spacer: 6;">Remote cluster monitoring & control</div>
<div class="card flex e" style="--_spacer: 4;">Detailed contextual reports</div>
</div>
</div>
<div class="box-section flex c">
<b>How It Works?</b>
<div class="super flex">
<div class="info" index="1"><b>Initialization</b>: The application begins by creating a new instance of the <code>Hunter</code> class, passing in a configuration object. This configuration includes details like the application name, email addresses for error reporting, and various options to customize the error handling behavior.</div>
<div class="info" index="2"><b>Start Hunting</b>: <code>startHunting</code> method is invoked to start listening for uncaught exceptions and unhandled promise rejections in the Node.js application. This is achieved by attaching event listeners to the process object.</div>
<div class="info" index="3"><b>Error Occurence</b>: When an uncaught exception or unhandled rejection happens, the corresponding handler function <code>handleUncaughtException</code> or <code>handleUnhandledRejection</code> is triggered.</div>
<div class="info" index="4"><b>Error Handling</b>: These handler functions parse the error stack, construct the error data, and send it to the server for email reporting. If local logging is enabled, the error data is also written to a log file.</div>
<div class="info" index="5"><b>Error Reporting</b>: The <code>Agent</code> class is responsible for sending the error data to the server. It constructs the error data into an exception template, which includes details like the error message, stack trace, and code context. This data is then sent to the server via HTTP request.</div>
<div class="info" index="6"><b>Stop Hunting</b>: If the <code>quitOnError</code> option is enabled in the configuration, the application will exit when error occurs. Otherwise, the <code>stopHunting()</code> method can be called to stop listening for errors by removing the event listeners from the process object.</div>
</div>
</div>
<div class="box-section flex c">
<b>Feeling Excited?</b>
<div class="subsec flex">
<div class="button inv" data-action="goto-npm">Explore</div>
<code>npm install bug-hunter</code>
</div>
<div class="subsec flex">
<div class="notif block">Login or Register to</div>
<div class="button" data-action="console">Access Console</div>
</div>
</div>
</div>
<footer class="flex">
<div class="flex c sec left" style="--_align: start;">
<a href="#" class="link pricing">Free?</a>
<a href="#" class="link contact">Reach Us</a>
<a href="#" class="link articles">Articles</a>
</div>
<div class="flex c sec right" style="--_align: end;">
<a href="#" class="link github">Github</a>
<a href="#" class="link linkedIn">LinkedIn</a>
<a href="#" class="link docs">Documentation</a>
</div>
<b class="complv" id="copywrt"></b>
<div class="complv sm">Made with ❤️ in <b>India</b></div>
</footer>
</div>
<div id="console" class="page out">
<div class="tabs up flex">
<span class="selected" data-tab="home"><img src="/icons/home.png" alt="Home icon">Home</span>
<span data-tab="monitor"><img src="/icons/workstation.png" alt="Home icon">Monitor</span>
<span data-tab="keys"><img src="/icons/access.png" alt="Home icon">Keys</span>
<span data-tab="settings"><img src="/icons/settings.png" alt="Home icon">Settings</span>
</div>
<div class="container">
<div class="section flex c push" data-section="home">
<div class="data flex">
<div class="item">
<div class="key">Last login time</div>
<div class="value time"></div>
</div>
<div class="item">
<div class="key">Last login IP</div>
<div class="value ip"></div>
</div>
<div class="item">
<div class="key">Emails delivered</div>
<div class="value emails"></div>
</div>
</div>
<div class="server-list na">
<div class="warn">No servers configured yet.<br>
<a href="https://github.com/Node-Bug-Hunter/Bug-Hunter" class="link" target="_blank">Get started now!</a>
</div>
<h4>Select & Start Monitoring!</h4>
<u>none of your servers are online</u>
<ul class="flex c"></ul>
</div>
</div>
<div class="section flex c" data-section="monitor">
<div class="table console-tb">
<div class="thead">
<div class="tr flex">
<div class="td">Level</div>
<div class="td">Time</div>
<div class="td">Size</div>
</div>
</div>
<div class="status flex">
<div class="flex">
<span class="loading" style="--dim: 20px;"></span>
<b>Server offline</b>
</div>
<div class="flex">
<div class="action green" data-action="clear-logs">Clear</div>
<div class="button inv disabled" data-action="resume">Start</div>
</div>
</div>
<div class="tbody"></div>
</div>
</div>
<div class="section flex c" data-section="keys">
<div class="caution">
<b>⚠ WARNING:</b> Use API keys with extreme caution!
</div>
<div class="api-key flex c">
<b>Your API Key</b>
<span></span>
<div class="flex">
<div class="action blue" data-action="copy">Copy</div>
<div class="action yellow" data-action="rotate">Rotate</div>
<div class="action red" data-action="revoke">Disable</div>
</div>
</div>
</div>
<div class="section flex c" data-section="settings">Coming soon...</div>
</div>
<div class="tabs down flex hide" data-state="con">
<span class="selected" data-tab="logs"><img src="/icons/logs.png" alt="Home icon">Logs</span>
<span data-tab="health"><img src="/icons/health.png" alt="Home icon">Health</span>
<div></div>
</div>
</div>
<div class="note-msg flex" data-type="err"><b>Hi</b><span></span></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>