@tnsu/monitoring-web (0.3.4)
Installation
@tnsu:registry=https://git.tnsu.kz/api/packages/tansu/npm/npm install @tnsu/monitoring-web@0.3.4"@tnsu/monitoring-web": "0.3.4"About this package
@tnsu/monitoring-web
Логи и запись экрана (rrweb) для фронтендов TNSU: React, Vue, SPFx. Всё уходит в сервис мониторинга https://monitoring.tnsu.kz с токеном Entra ID.
import { initMonitoring, log, msalTokenProvider } from '@tnsu/monitoring-web';
// service — строчными через дефис, как имя репозитория (request-portal, а не requestPortal), без префикса tansu;
// по возможности то же, что у бэкенда. msal — PublicClientApplication приложения
initMonitoring({ service: 'orders', getAccessToken: msalTokenProvider(msal) });
log.info('Заявка создана', { orderId });
// vite.config.ts — хэш коммита сборки в логи и записи (React и Vue одинаково)
import { tnsuMonitoring } from '@tnsu/monitoring-web/vite';
export default defineConfig({ plugins: [react(), tnsuMonitoring()] });
-
Токен:
msalTokenProvider(msal)— молча, scopeLogs.Writeмониторинга по умолчанию (другой — вторым параметром); SPFx —spfxTokenProvider(...). -
Запись экрана включена по умолчанию; выключить —
sessionRecording: false. -
Хэш коммита плагин берёт из
GIT_COMMIT(Docker:ARG GIT_COMMIT+ENV GIT_COMMIT=$GIT_COMMIT), иначе из git. -
React:
MonitoringErrorBoundaryиз@tnsu/monitoring-web/react; Vue 3:monitoringPluginиз@tnsu/monitoring-web/vue. -
Пока нет токена или связи, логи и запись копятся в IndexedDB (общий лимит 50 МБ) и уходят позже; ошибки пакета не выходят в приложение.
-
Тост «Ошибка №… Обратитесь к администратору», если связи нет час (не чаще 3 раз в сутки); показать своим способом —
onConnectionError.
Установка (из внутренней сети, токен не нужен): в .npmrc проекта
@tnsu:registry=https://git.tnsu.kz/api/packages/tansu/npm/
npm install @tnsu/monitoring-web
SPFx
В config/package-solution.json пакета (раздел solution) обязательно — иначе токен для мониторинга не выдаётся и логи не уходят (ошибка 1003):
"webApiPermissionRequests": [
{ "resource": "SyncByPowerShell", "scope": "Logs.Write" }
]
После загрузки .sppkg в каталог приложений админ один раз одобряет запрос: SharePoint admin center → Advanced → API access → SyncByPowerShell / Logs.Write → Approve.
import { initMonitoring, spfxTokenProvider } from '@tnsu/monitoring-web';
// в onInit() веб-части; один раз на страницу — повторный вызов другой веб-части вернёт уже запущенный
initMonitoring({
service: 'request-portal', // как имя репозитория, через дефис
getAccessToken: spfxTokenProvider(this.context.aadTokenProviderFactory),
});
Хэш коммита сборки — файл config/webpack-patch.json (heft, SPFx 1.22+), код патча — в пакете:
{ "patchFiles": ["./node_modules/@tnsu/monitoring-web/spfx/webpack-patch.cjs"] }
Окружение определяется само: при отладке (gulp serve, workbench) — development, такие записи в админке по умолчанию скрыты.
Подробно — README репозитория tansu/monitoring и docs/entra-setup.md.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @rrweb/rrweb-plugin-console-record | ^2.2.0 |
| rrweb | ^2.2.0 |
Development Dependencies
| ID | Version |
|---|---|
| @types/node | ^22.20.5 |
| @types/react | 17.0.45 |
| fake-indexeddb | ^6.2.6 |
| react | 17.0.2 |
| typescript | ~5.8.0 |
| vitest | ^4.1.11 |
| vue | ^3.5.13 |
Peer Dependencies
| ID | Version |
|---|---|
| react | >=16.8.0 |
| vue | ^3.0.0 |