Apache SkyWalking Client JS

Apache SkyWalking — клиентская библиотека JavaScript для сбора и трассировки исключений.

• Предоставляет метрики и сбор данных об ошибках на серверную часть SkyWalking.
• Имеет небольшой размер.
• Делает браузер отправной точкой распределённой трассировки.

Внимание: версии SkyWalking Client JS 0.8.0 и более поздние требуют SkyWalking v9.

Использование

Установка

Библиотека времени выполнения skywalking-client-js доступна на npm.

npm install skywalking-client-js --save

Быстрый старт

Для работы с skywalking-client-js требуется SkyWalking 8.2+.

Пользователь может использовать метод register, чтобы автоматически загружать и передавать данные.

import ClientMonitor from 'skywalking-client-js';

// Отчёт о собранных данных по адресу http:// + window.location.host + /browser/perfData по умолчанию
ClientMonitor.register({
  # Используйте core/default/restPort на сервере OAP.
  # Если активированы внешние каналы связи, `receiver-sharing-server/default/restPort`,
  # см. https://skywalking.apache.org/docs/main/latest/en/setup/backend/backend-expose/
  collector: 'http://127.0.0.1:12800',
  service: 'test-ui',
  pagePath: '/current/page/name',
  serviceVersion: 'v1.0.0',
});

Параметры

Метод register поддерживает следующие параметры.

Сбор метрик вручную

Используйте метод setPerformance, чтобы отправлять метрики в момент загрузки страницы или в любой другой значимый момент.

1. Установите для параметра конфигурации SDK autoTracePerf значение false, чтобы отключить автоматическую отправку метрик производительности и дождаться ручного запуска эскалации.
2. Вызовите метод ClientMonitor.setPerformance(object), чтобы отправить данные.

• Примеры

import ClientMonitor from 'skywalking-client-js';

ClientMonitor.setPerformance({
  collector: 'http://127.0.0.1:12800',
  service: 'browser-app',
  serviceVersion: '1.0.0',
  pagePath: location.href,
  useFmp: true
});

Специальная сцена

SPA Page

В одностраничном приложении (spa) страница будет обновляться только один раз. Традиционный метод отправляет отчёт о PV только после загрузки страницы, но не может подсчитать PV каждой подстраницы и не может агрегировать другие типы журналов по подстраницам.
SDK предоставляет два метода обработки для страниц spa:

1. Включите автоматический анализ spa
   Этот метод подходит для большинства сценариев одностраничных приложений с использованием хэша URL в качестве маршрута.
   В инициализированной конфигурации установите Включение SPA

Чтобы включить прослушивание событий изменения хэша страницы (что приведёт к повторной отчётности PV), необходимо установить значение enableSPA в true. Также следует использовать хэш URL в качестве поля страницы в других отчётах о данных.

2. Ручная отчётность Этот метод можно использовать во всех сценариях одностраничных приложений. Этот метод можно применять, если первый метод не работает. SDK предоставляет набор методов страницы для ручного обновления имени страницы при отправке данных. Когда этот метод вызывается, страница PV будет повторно отправлена по умолчанию. Подробнее см. setPerformance().

app.on('routeChange', function (next) {
  ClientMonitor.setPerformance({
    collector: 'http://127.0.0.1:12800',
    service: 'browser-app',
    serviceVersion: '1.0.0',
    pagePath: location.href,
    useFmp: true
  });
});   

Трассировка диапазона запросов данных в браузере Поддерживаются два режима запросов данных: XMLHttpRequest и Fetch API. В то же время поддерживаются библиотеки и инструменты, основанные на XMLHttpRequest и fetch, такие как Axios, SuperAgent, OpenApi и так далее.

Перехват ошибок во фреймах, включая React, Angular, Vue

// Angular
import { ErrorHandler } from '@angular/core';
import ClientMonitor from 'skywalking-client-js';
export class AppGlobalErrorhandler implements ErrorHandler {
  handleError(error) {
    ClientMonitor.reportFrameErrors({
      collector: 'http://127.0.0.1:12800',
      service: 'angular-demo',
      pagePath: '/app',
      serviceVersion: 'v1.0.0',
    }, error);
  }
}
@NgModule({
  ...
  providers: [{provide: ErrorHandler, useClass: AppGlobalErrorhandler}]
})
class AppModule {}

// React
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    ClientMonitor.reportFrameErrors({
      collector: 'http://127.0.0.1:12800',
      service: 'react-demo',
      pagePath: '/app',
      serviceVersion: 'v1.0.0',
    }, error);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

// Vue
Vue.config.errorHandler = (error) => {
  ClientMonitor.reportFrameErrors({
    collector: 'http://127.0.0.1:12800',
    service: 'vue-demo',
    pagePath: '/app',
    serviceVersion: 'v1.0.0',
  }, error);
}

Демо-проект Демо-проект предоставляет инструментированное веб-приложение с необходимой средой. Вы можете просто использовать его, чтобы увидеть данные, собранные SkyWalking, и то, как SkyWalking визуализируется в пользовательском интерфейсе. Дополнительная информация: нажмите здесь.

Контакты

• Отправьте проблему.
• Список рассылки: dev@skywalking.apache.org. Напишите на dev-subscribe@skywalking.apache.org, следуйте ответу, чтобы подписаться на список рассылки.
• Присоединяйтесь к каналу #skywalking в Apache Slack. Если ссылка не работает, найдите последнюю версию на Apache INFRA WIKI.
• Группа QQ: 392443393, 901167865.

Руководство по выпуску Все коммиттеры должны следовать Руководству по выпуску, чтобы опубликовать официальный выпуск.

Лицензия Apache 2.0