@tramvai/module-application-monitoring 6.80.8 → 7.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -276
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,278 +1,3 @@
|
|
|
1
1
|
# @tramvai/module-application-monitoring
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
Tramvai application's health and performance monitoring. It monitors critical lifecycle events from HTML parsing through app initialization and rendering, capturing errors and performance metrics along the way.
|
|
8
|
-
|
|
9
|
-
### Monitored Events
|
|
10
|
-
|
|
11
|
-
| Event | Description | Trigger Point |
|
|
12
|
-
| --- | --- | --- |
|
|
13
|
-
| `html-opened` | HTML document parsed and ready | Document parse complete |
|
|
14
|
-
| `assets-loaded` | All critical assets loaded successfully | Window load event |
|
|
15
|
-
| `assets-load-failed` | One or more critical assets failed to load | Window load event (with errors) |
|
|
16
|
-
| `app:initialized` | Application initialization complete | After 'init' command line |
|
|
17
|
-
| `app:initialize-failed` | Application failed to initialize | App init error |
|
|
18
|
-
| `app:rendered` | Application rendered successfully | After successful app render |
|
|
19
|
-
| `app:render-failed` | Application rendering failed | Error boundary or renderer callback |
|
|
20
|
-
| `react:render` | React rendered successfully | After successful react render |
|
|
21
|
-
| `react:error` | React rendered with error | The error occure while react hydration, it can be uncaughtError,caughtError or recoverableError |
|
|
22
|
-
| `app:render-failed` | Application rendering failed | Error boundary or renderer callback |
|
|
23
|
-
|
|
24
|
-
| `unhandled-error` | Unhandled promise rejection | Global unhandledrejection event |
|
|
25
|
-
|
|
26
|
-
## Installation
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
npm install @tramvai/module-application-monitoring
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
Or with yarn:
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
yarn add @tramvai/module-application-monitoring
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Basic Usage
|
|
39
|
-
|
|
40
|
-
### 1. Register the Module
|
|
41
|
-
|
|
42
|
-
Add the module to your Tramvai application:
|
|
43
|
-
|
|
44
|
-
```typescript
|
|
45
|
-
import { createApp } from '@tramvai/core';
|
|
46
|
-
import { ApplicationMonitoringModule } from '@tramvai/module-application-monitoring';
|
|
47
|
-
|
|
48
|
-
createApp({
|
|
49
|
-
name: 'my-app',
|
|
50
|
-
modules: [ApplicationMonitoringModule],
|
|
51
|
-
});
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### 2. Provide an Inline Reporter Factory
|
|
55
|
-
|
|
56
|
-
Inline reporter are used to capture lifecycle events and send them to a monitoring service (like an analytics tool or error logger). Inline reporters are injected into the HTML during server-side rendering. This allows to detect errors and performance issues early, even before the app is fully up and running.
|
|
57
|
-
|
|
58
|
-
Key Events Sent Through Inline Reporters:
|
|
59
|
-
|
|
60
|
-
- **HTML Opened** (`html-opened`): Tracks when the HTML is parsed and ready.
|
|
61
|
-
- **Assets Loaded** (`assets-loaded`) / Assets Load Failed (`**assets-load-failed**`): Tracks the success/failure of loading assets (JS, CSS, etc.).
|
|
62
|
-
- **App Start Failed** (`app-start-failed`): Tracks initialization errors.
|
|
63
|
-
- **Unhandled Errors** (`unhandled-error`): Tracks unhandled errors or promise rejections.
|
|
64
|
-
|
|
65
|
-
The module requires an inline reporter factory to send events to your monitoring service. To do this provide `INLINE_REPORTER_FACTORY_SCRIPT_TOKEN` using inline script or object
|
|
66
|
-
|
|
67
|
-
```typescript
|
|
68
|
-
import { provide } from '@tramvai/core';
|
|
69
|
-
import { INLINE_REPORTER_FACTORY_SCRIPT_TOKEN } from '@tramvai/module-application-monitoring';
|
|
70
|
-
|
|
71
|
-
const providers = [
|
|
72
|
-
provide({
|
|
73
|
-
provide: INLINE_REPORTER_FACTORY_SCRIPT_TOKEN,
|
|
74
|
-
useValue: (parameters) => {
|
|
75
|
-
return {
|
|
76
|
-
send(eventName, payload) {
|
|
77
|
-
fetch('/api/monitoring', {
|
|
78
|
-
method: 'POST',
|
|
79
|
-
headers: { 'Content-Type': 'application/json' },
|
|
80
|
-
body: JSON.stringify({
|
|
81
|
-
event: eventName,
|
|
82
|
-
...parameters,
|
|
83
|
-
...payload,
|
|
84
|
-
timestamp: Date.now(),
|
|
85
|
-
}),
|
|
86
|
-
});
|
|
87
|
-
},
|
|
88
|
-
};
|
|
89
|
-
},
|
|
90
|
-
}),
|
|
91
|
-
];
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
```typescript
|
|
95
|
-
import { provide } from '@tramvai/core';
|
|
96
|
-
import { INLINE_REPORTER_FACTORY_SCRIPT_TOKEN } from '@tramvai/module-application-monitoring';
|
|
97
|
-
import { inlineReporterFactoryScript } from './inlineReporter.inline';
|
|
98
|
-
|
|
99
|
-
const providers = [
|
|
100
|
-
provide({
|
|
101
|
-
provide: INLINE_REPORTER_FACTORY_SCRIPT_TOKEN,
|
|
102
|
-
useFactory: () => {
|
|
103
|
-
return inlineReporterFactoryScript;
|
|
104
|
-
},
|
|
105
|
-
}),
|
|
106
|
-
];
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Configuration
|
|
110
|
-
|
|
111
|
-
### Tokens
|
|
112
|
-
|
|
113
|
-
#### INLINE_REPORTER_PARAMETERS_TOKEN
|
|
114
|
-
|
|
115
|
-
**Example: Adding Custom Parameters**
|
|
116
|
-
|
|
117
|
-
```typescript
|
|
118
|
-
import { provide } from '@tramvai/core';
|
|
119
|
-
import { INLINE_REPORTER_PARAMETERS_TOKEN } from '@tramvai/module-application-monitoring';
|
|
120
|
-
|
|
121
|
-
provide({
|
|
122
|
-
provide: INLINE_REPORTER_PARAMETERS_TOKEN,
|
|
123
|
-
useFactory: ({ appInfo, envManager }) => {
|
|
124
|
-
return {
|
|
125
|
-
appName: appInfo.appName,
|
|
126
|
-
appRelease: envManager.get('APP_RELEASE'),
|
|
127
|
-
appVersion: envManager.get('APP_VERSION'),
|
|
128
|
-
environment: envManager.get('NODE_ENV'),
|
|
129
|
-
region: envManager.get('DEPLOY_REGION'),
|
|
130
|
-
};
|
|
131
|
-
},
|
|
132
|
-
deps: {
|
|
133
|
-
envManager: ENV_MANAGER_TOKEN,
|
|
134
|
-
appInfo: APP_INFO_TOKEN,
|
|
135
|
-
},
|
|
136
|
-
});
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
### How to configure monitoring for main Tramvai events
|
|
140
|
-
|
|
141
|
-
There is a possibility to monitor the main events that occur while the Tramvai application is being initialized. Here is a list of these events:
|
|
142
|
-
|
|
143
|
-
- `app:initialized`
|
|
144
|
-
- `app:initialize-failed`
|
|
145
|
-
- `app:rendered`
|
|
146
|
-
- `app:render-failed`
|
|
147
|
-
- `react:render`
|
|
148
|
-
- `react:error`
|
|
149
|
-
|
|
150
|
-
When you are using ApplicationMonitoringModule, these events are sent to your remote logger by default. But in some cases, you will need custom metrics. Here is an example of how to do this:
|
|
151
|
-
|
|
152
|
-
```typescript
|
|
153
|
-
import { provide } from '@tramvai/core';
|
|
154
|
-
import { TRAMVAI_HOOKS_TOKEN, commandLineListTokens } from '@tramvai/core';
|
|
155
|
-
|
|
156
|
-
const providers = [
|
|
157
|
-
provide({
|
|
158
|
-
provide: commandLineListTokens.init,
|
|
159
|
-
useFactory: ({ tramvaiHooks }) => {
|
|
160
|
-
hooks['app:initialized'].tap('app-init', () => {
|
|
161
|
-
fetch('/api/monitoring', {
|
|
162
|
-
method: 'POST',
|
|
163
|
-
headers: { 'Content-Type': 'application/json' },
|
|
164
|
-
body: JSON.stringify({
|
|
165
|
-
event: 'app-initialized',
|
|
166
|
-
...parameters,
|
|
167
|
-
...payload,
|
|
168
|
-
timestamp: Date.now(),
|
|
169
|
-
}),
|
|
170
|
-
});
|
|
171
|
-
});
|
|
172
|
-
hooks['app:initialize-failed'].tap('app-init-failed', (_, { error }) => {
|
|
173
|
-
fetch('/api/monitoring', {
|
|
174
|
-
method: 'POST',
|
|
175
|
-
headers: { 'Content-Type': 'application/json' },
|
|
176
|
-
body: JSON.stringify({
|
|
177
|
-
event: 'app-initialize-failed',
|
|
178
|
-
...error,
|
|
179
|
-
...parameters,
|
|
180
|
-
...payload,
|
|
181
|
-
timestamp: Date.now(),
|
|
182
|
-
}),
|
|
183
|
-
});
|
|
184
|
-
});
|
|
185
|
-
hooks['app:rendered'].tap('app-rendered', () => {
|
|
186
|
-
fetch('/api/monitoring', {
|
|
187
|
-
method: 'POST',
|
|
188
|
-
headers: { 'Content-Type': 'application/json' },
|
|
189
|
-
body: JSON.stringify({
|
|
190
|
-
event: 'app-rendered',
|
|
191
|
-
...parameters,
|
|
192
|
-
...payload,
|
|
193
|
-
timestamp: Date.now(),
|
|
194
|
-
}),
|
|
195
|
-
});
|
|
196
|
-
s;
|
|
197
|
-
});
|
|
198
|
-
hooks['app:render-failed'].tap('app-render-failed', (_, { error }) => {
|
|
199
|
-
fetch('/api/monitoring', {
|
|
200
|
-
method: 'POST',
|
|
201
|
-
headers: { 'Content-Type': 'application/json' },
|
|
202
|
-
body: JSON.stringify({
|
|
203
|
-
event: 'app-render-failed',
|
|
204
|
-
error,
|
|
205
|
-
...parameters,
|
|
206
|
-
...payload,
|
|
207
|
-
timestamp: Date.now(),
|
|
208
|
-
}),
|
|
209
|
-
});
|
|
210
|
-
s;
|
|
211
|
-
});
|
|
212
|
-
|
|
213
|
-
hooks['react:render'].tap('react-render', () => {
|
|
214
|
-
fetch('/api/monitoring', {
|
|
215
|
-
method: 'POST',
|
|
216
|
-
headers: { 'Content-Type': 'application/json' },
|
|
217
|
-
body: JSON.stringify({
|
|
218
|
-
event: eventName,
|
|
219
|
-
...parameters,
|
|
220
|
-
...payload,
|
|
221
|
-
timestamp: Date.now(),
|
|
222
|
-
}),
|
|
223
|
-
});
|
|
224
|
-
});
|
|
225
|
-
|
|
226
|
-
hooks['react:error'].tap('react-error', (_, { error }) => {
|
|
227
|
-
fetch('/api/monitoring', {
|
|
228
|
-
method: 'POST',
|
|
229
|
-
headers: { 'Content-Type': 'application/json' },
|
|
230
|
-
body: JSON.stringify({
|
|
231
|
-
error,
|
|
232
|
-
event: 'react-error',
|
|
233
|
-
...parameters,
|
|
234
|
-
...payload,
|
|
235
|
-
timestamp: Date.now(),
|
|
236
|
-
}),
|
|
237
|
-
});
|
|
238
|
-
});
|
|
239
|
-
},
|
|
240
|
-
deps: {
|
|
241
|
-
tramvaiHooks: TRAMVAI_HOOKS_TOKEN,
|
|
242
|
-
},
|
|
243
|
-
}),
|
|
244
|
-
];
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
## How It Works
|
|
248
|
-
|
|
249
|
-
### Server-Side
|
|
250
|
-
|
|
251
|
-
1. **Inline Scripts Injection**: The module injects monitoring scripts into the HTML `<head>` during server-side rendering
|
|
252
|
-
2. **Early Monitoring**: Scripts execute immediately to catch early errors and events
|
|
253
|
-
3. **Reporter Initialization**: The inline reporter factory creates a global reporter instance
|
|
254
|
-
4. **Hook Registration**: Server-side hooks are registered to track initialization events
|
|
255
|
-
|
|
256
|
-
### Client-Side
|
|
257
|
-
|
|
258
|
-
1. **HTML Opened**: First script executes when HTML is parsed
|
|
259
|
-
2. **Asset Monitoring**: Error listeners track script/link loading failures
|
|
260
|
-
3. **App Creation**: Monitors unhandled errors during app bootstrap
|
|
261
|
-
4. **Initialization**: Tracks when app completes initialization
|
|
262
|
-
5. **Rendering**: Integrates with error boundaries and renderer callbacks
|
|
263
|
-
|
|
264
|
-
### Event Flow
|
|
265
|
-
|
|
266
|
-
```
|
|
267
|
-
HTML Parse → html-opened
|
|
268
|
-
↓
|
|
269
|
-
Asset Loading → assets-loaded / assets-load-failed
|
|
270
|
-
↓
|
|
271
|
-
App Bootstrap → app-start-failed (on error)
|
|
272
|
-
↓
|
|
273
|
-
App Init → app-initialized
|
|
274
|
-
↓
|
|
275
|
-
App Render → app-rendered / app-render-failed
|
|
276
|
-
↓
|
|
277
|
-
Runtime → unhandled-error (if occurs)
|
|
278
|
-
```
|
|
3
|
+
[Actual documentation](03-features/014-monitoring/04-application-health.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tramvai/module-application-monitoring",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.16.1",
|
|
4
4
|
"description": "Модуль сбора и отправки событий мониторинга состояния приложения",
|
|
5
5
|
"browser": "lib/browser.js",
|
|
6
6
|
"main": "lib/server.js",
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
"registry": "https://registry.npmjs.org/"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@tramvai/module-common": "
|
|
27
|
-
"@tramvai/tokens-render": "
|
|
26
|
+
"@tramvai/module-common": "7.16.1",
|
|
27
|
+
"@tramvai/tokens-render": "7.16.1"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@tinkoff/dippy": "^1.0.0",
|
|
31
|
-
"@tramvai/core": "
|
|
32
|
-
"@tramvai/react": "
|
|
31
|
+
"@tramvai/core": "7.16.1",
|
|
32
|
+
"@tramvai/react": "7.16.1",
|
|
33
33
|
"tslib": "^2.4.0"
|
|
34
34
|
}
|
|
35
35
|
}
|