Ошибки? на производстве? Обработка исключений является основным требованием для приложения. Как мы справляемся с неизвестными загадочными ошибками, которые возникают только у определенного пользователя, машины или браузера?

Он работает на моей машине, а почему не на твоей?
Как воспроизвести?
- Разработчики

Наша команда обсуждает метод. Как мы делаем это ? Затем Google показал мне это https://stackoverflow.com/questions/21403895/does-a-crashlytics-like-service-for-web-app-exists. Почему бы нам не попробовать.

Мы выбрали Sentry. Прямая документация. Интеграция со многими платформами. Простая настройка и многое другое.

Их документация хороша, но нам пришлось копнуть глубже, чтобы это сделать. Как мы сделали ?

Поймем ошибки

Создал учетную запись (бесплатную учетную запись разработчика) в Sentry. Выберите Vue в качестве платформы (отфильтруйте ее, если она недоступна). Дайте название проекту и команде. Вы готовы выдать ошибку.

Установите @sentry/browser с помощью NPM (—-save) или Yarn.
в main.js вставьте следующее для базовой настройки.

import * as Sentry from '@sentry/browser'

Sentry.init({
  dsn: 'https://[email protected]/00000000',
  integrations: [new Sentry.Integrations.Vue({ Vue })]
})

Если вы хотите использовать config.errorHandler, см. Проблему на StackOverflow

Копаем глубже, чтобы получить больше возможностей

Играем, сторожевой разблокируется.

Среды

Проблемы можно фильтровать в зависимости от среды. Добавлена ​​новая переменная .env *
VUE_APP_ENV=production

* Чтобы читать переменные среды из Vue. Переменные должны иметь префикс VUE_APP_.

Sentry.init({
  dsn: 'https://[email protected]/00000000',
  integrations: [new Sentry.Integrations.Vue({ Vue })],
  environment: process.env.VUE_APP_ENV
})

После добавления ключа «среда» в Sentry.init Sentry дает нам возможность фильтровать и создавать отчеты на основе среды. А также, когда Ошибка была впервые замечена и замечена в последний раз.

Релизы

Фильтрация проблем по выпускам версий продукта. Например, 0.0.2 имеет проблему, но не 0.0.1. Он также служит еще одной важной цели, связывая конкретный выпуск с конкретным коммитом, что облегчает нашу жизнь.

Базовая настройка

Sentry.init({
  dsn: 'https://[email protected]/1354918',
  integrations: [new Sentry.Integrations.Vue({ Vue })],
  environment: process.env.VUE_APP_ENV,
  release: process.env.VUE_APP_SENTRY_RELEASE
})

Расширенная настройка

Git Commit Hash (git rev-parse HEAD) как Sentry Release.

Добавление данных о выпуске вручную утомительно. Итак, мы добавили хеш-данные фиксации в качестве нашей версии выпуска.

Как мы это сделали?
на package.json добавил новый скрипт и экспортировал переменную env.

{
  "name": "sentryTest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-sentry": "export VUE_APP_SENTRY_RELEASE=$(git rev-parse HEAD) && npm run build",
  },
  ...
}

Плагин Webpack для загрузки артефактов (исходный код)

С webpack код будет бессмысленным, когда дело доходит до отладки.

Для этой проблемы Sentry предлагает решение в виде плагина. Установил как зависимость от разработчика.

npm install --save-dev @sentry/webpack-plugin

и настройте его на vue.config.js. Устанавливаем только в производственной и постановочной среде.

module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging') {
      config.plugins.push(new SentryPlugin({
        release: process.env.VUE_APP_SENTRY_RELEASE,
        include: './dist',
        ignore: ['node_modules', 'webpack.config.js']
      }))
    }
  }
}

это оно. Когда мы будем строить в следующий раз,

После сборки мы получили значимые исключения. Что нас было легко идентифицировать.

Тогда у нас был полный контроль над ошибками в нашем приложении.

PS: переключив productionSourceMap на true в vue.config.js, он генерирует исходные карты для блоков (приложение + поставщики), а также добавляет их в папку dist. Что нежелательно и не видно публике.