Error tracking: Sentry интеграция

Sentry — это мощный инструмент для мониторинга ошибок и производительности приложений. В контексте Vue.js он позволяет автоматически отслеживать исключения, предупреждения и проблемы с производительностью, обеспечивая детальные отчёты о состоянии приложения в реальном времени.

Установка и настройка Sentry

Для начала необходимо установить официальную библиотеку Sentry для JavaScript и адаптер для Vue:

npm install @sentry/vue @sentry/tracing

После установки создаётся базовая конфигурация в основном файле приложения, обычно main.js или main.ts:

import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

Sentry.init({
  app,
  dsn: "https://<public_key>@sentry.io/<project_id>",
  integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "my-site.com", /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
  release: "my-project@" + process.env.npm_package_version,
});

app.mount("#app");

Ключевые параметры:

  • dsn — уникальный идентификатор проекта в Sentry.
  • integrations — подключение дополнительных функций, таких как трассировка запросов.
  • tracesSampleRate — процент отслеживания производительности (от 0 до 1).
  • environment — среда исполнения (development, production).
  • release — версия приложения, полезная для отслеживания изменений между релизами.

Автоматическая обработка ошибок Vue

Sentry автоматически интегрируется с глобальным обработчиком ошибок Vue, что позволяет отслеживать исключения в компонентах:

Sentry.init({
  app,
  dsn: "...",
  integrations: [
    new Integrations.BrowserTracing(),
  ],
  logErrors: true,
});

При этом все uncaught exceptions и warnings будут отправлены на сервер Sentry с информацией о компоненте, в котором произошла ошибка, и трассировкой стека вызовов.

Ручная отправка ошибок

Иногда требуется отправить ошибку вручную, например, при обработке асинхронных операций:

try {
  await someAsyncFunction();
} catch (error) {
  Sentry.captureException(error);
}

Также можно добавлять контекст:

Sentry.withScope(scope => {
  scope.setTag("user_role", "admin");
  scope.setLevel("warning");
  Sentry.captureException(new Error("Ошибка при загрузке данных"));
});
  • setTag — пометка для фильтрации ошибок.
  • setLevel — уровень события (error, warning, info).
  • withScope — позволяет локально настраивать контекст, не влияя на глобальные события.

Интеграция с Vue Router

Sentry может отслеживать переходы между страницами и маршруты Vue Router:

import router from "./router";

Sentry.init({
  app,
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", /^\//],
    }),
  ],
});

Это позволяет собирать метрики производительности и видеть, какие маршруты вызывают задержки или ошибки.

Настройка пользовательских событий

Для аналитики действий пользователя или специфических ошибок можно использовать captureMessage:

Sentry.captureMessage("Пользователь попытался выполнить запрещённое действие", "info");
  • captureMessage — фиксирует событие без привязки к исключению.
  • Второй параметр определяет уровень важности (info, warning, error).

Дополнительные возможности

  • Breadcrumbs — Sentry автоматически собирает путь выполнения событий, сетевые запросы, действия пользователя.
  • Source Maps — подключение source maps позволяет получать реальные строки исходного кода, а не минифицированные.
  • Release Tracking — при каждом деплое можно передавать версию приложения, чтобы видеть, какие ошибки появились в конкретном релизе.

Практические советы

  • Разграничение ошибок по средам (environment) позволяет отделять тестовые сбои от боевых.
  • Настройка tracesSampleRate должна быть оптимальной: 1.0 подходит для разработки, в продакшене рекомендуется 0.1–0.25 для экономии ресурсов.
  • Использование контекстов (withScope, setUser) помогает быстро идентифицировать источник ошибки.

Sentry в связке с Vue.js создаёт мощный инструмент для детального мониторинга приложения, позволяя выявлять ошибки на ранних стадиях и повышать стабильность интерфейса.

Оглавление