Bereitstellung und Nutzung der Sentry-Überwachung (detaillierter Prozess)

1. Einleitung

Sentry ist ein Open-Source-Echtzeit-Fehlerüberwachungsprojekt, das viele Konfigurationen unterstützt, einschließlich web 前端, 服务器端, 移动端, 游戏端.

Basierend auf Djangoder modernen Plattform zur Überwachung, Aufzeichnung und Aggregation von Echtzeit-Ereignisprotokollen wird es hauptsächlich zur schnellen Fehlersuche eingesetzt. Beheben Sie Fehler und Leistungsprobleme schneller und erhalten Sie vom Front-End bis zum Backend einen kontinuierlichen Einblick in den Zustand Ihrer Anwendungen.

Es werden verschiedene Sprachen unterstützt, z. B. python, , , usw. Es kann auch auf verschiedene Frameworks angewendet werden, beispielsweise auf die gängigsten Front-End-Frameworks wie , und so weiter.ocjavanodejavascriptvueangularreact

Bietet die Integration gängiger Entwicklungstools wie github, usw. Sie können die Anwendung selbst installieren und erstellen .slacktrellosentry
Vorteil
- Gute Produkterfahrung und perfekte Funktionen
- Zugang zu weniger Arbeitsaufwand
- SentryKonzentrieren Sie sich auf Error, Exception,Crash
- Stellen Sie umfassende Kontextinformationen bereit
- Doppelte Fragen automatisch zusammenführen
- Aktive E-Mail-Benachrichtigung
- …
Mangel
- Die Bereitstellung basiert auf vielen offiziell bereitgestellten GithubLagern Dockerund Docker Composekann tatsächlich mit einem Klick bereitgestellt und sofort verwendet werden. Wenn Sie jedoch 30einen Container vor sich sehen, sind Sie immer noch zögerlich.
- Sie müssen selbst eine hohe Verfügbarkeit sicherstellen, z. B.: ZooKeeper, usw. Es ist nicht einfach, diese Komponenten zu Nginxbedienen Redisund zu warten und eine hohe Verfügbarkeit selbst sicherzustellen.
- Wenn eine große Anzahl von Fehlermeldungen an Sentryden Server gesendet wird, kann es zu Sentryerheblichen Verzögerungen bei der Reaktion kommen
- …

2. Andere Überwachungsprogramme

Logan

Das von der Meituan Dianping Group eingeführte große Front-End-Protokollsystem umfasst Protokollerfassung und -speicherung, Berichtsanalyse und visuelle Anzeige. Es werden fünf Komponenten bereitgestellt, darunter 端上日志收集存储, Web SDK, 后端日志存储分析 Server, 日志分析平台 LoganSite.
WAFFEN

Der Front -End - Datenüberwachungsdienst von Ali konzentriert sich auf die Überwachung von und und überwacht den Zustand dieser drei Aspekte, die scheinbar Web 场景kostenpflichtig sind .Weex 场景小程序场景页面打开速度（测速）页面稳定性（JS Error）外部服务调用成功率（API）Web小程序页面
fundebug

Eine professionelle Plattform zur Überwachung von Anwendungsfehlern kann diese rechtzeitig erkennen Bugund die Effizienz verbessern Debug. Unterstützt derzeit 前端 JavaScript, 微信小程序, 微信小游戏, 支付宝小程序, usw. Es handelt sich um einen sehr umfassenden Front-End-Fehlerprotokolldienst, der ebenfalls kostenpflichtig ist React Native.JavaNode.js
BadJS

Als Open-Source-Projekt des Tencent-Teams, das auf webdie Front-End-Ausnahmeüberwachungslösung abzielt, bietet es eine websystematische Tracking-Lösung für die Überwachung, Berichterstellung, Statistik und Anzeige von Seitenskriptfehlern.
Derzeit gibt es mehrere oben erwähnte beliebte Ausnahmeüberwachungslösungen, aber im Hinblick auf die Benutzerfreundlichkeit, ob kostenlos oder nicht, und ob das Projekt Open Source ist, ist Sentry eine sehr gute Wahl, und die Serverbereitstellung ist auch sehr einfach. Natürlich kann der Server auch direkt verwenden, was Sentry bereitstellt. Der Website-Client kann den Code importieren und einfügen, um Sentry zu initialisieren , um Seitenskriptausnahmen zusentry sdk überwachen .

3. Bereitstellung (Server)

Die offizielle Website bietet zwei Bereitstellungsoptionen: docker 方式undpython 方式
- docker 方式Der Bereitstellungsvorgang ist relativ einfach und stellt auch die von Sentry empfohlene offizielle Methode dar. Befolgen Sie einfach die von Sentry On-Premise bereitgestellte Methode und stellen Sie Schritt für Schritt bereit. Oder Sie können sich direkt an Docker wenden, um Sentry zur Überwachung von Django-Anwendungen bereitzustellen und E-Mail+DingTalk-Benachrichtigungen zu verwenden .
- python 方式Die Bereitstellung ist relativ umständlich, aber immer noch relativ sicher und es gibt keine dockerReihe von Problemen wie unkontrollierbare Risiken bei der Bereitstellung. Sie können sich auf Folgendes beziehen: Python-Installationsmethode, offiziell von Sentry bereitgestellt .
Einsatzkampfrekord
- Docker-Bereitstellungsprozess
- Python-Bereitstellungsprozess

4. Lokaler Projekttest ( `Vue`Projektbeispiel, Konfiguration ist ähnlich)

Wenn Sie im SentryVerwaltungshintergrund ein Projekt erstellen, wird das dem Projekttyp entsprechende Zugriffsdokument angezeigt, das bei Bedarf angepasst werden kann.

VueIm Projekt einführen und konfigurieren

Installieren

# Using yarn
$ yarn add @sentry/vue

# Using npm
$ npm i @sentry/vue

main.js

// ======= Vue3
import {
        
         createApp } from 'vue'
import * as Sentry from "@sentry/vue"

const app = createApp(App)

Sentry.init({
        
        
  app,
  dsn: "http://[email protected]:9000/3"
})

app.use(...).mount('#app')


// ======= Vue2
import Vue from 'vue'
import * as Sentry from '@sentry/vue'

Sentry.init({
        
        
  Vue,
  dsn: "http://[email protected]:9000/3",
})

new Vue({
        
        ...}).$mount('#app')


// ======= 只在线上环境进行错误日志收集
// process.env.NODE_ENV === 'production' && Sentry.init({...})

// 配置字段补充
Sentry.init({
        
        
  Vue,
  // 客户端密钥，可以通过进入项目 -》右上角设置 -》客户端密钥(DSN) 里面拷贝
  dsn: "http://[email protected]:9000/3",
  // 项目版本号
  release: '1.0.0',
  // 使用哪些插件，附：http://www.javascriptcn.com/post/203679
  integrations: [new Integrations.BrowserTracing()],
  // 采样率，默认为 0.1，表示采集 10% 的请求，设置为 1.0，表示采集全部请求
  tracesSampleRate: 1.0,
  // 当前环境
  environment: 'production',
  // 发送前回调
  beforeSend(event) {
        
        
    // 在发送事件之前修改事件
    return event
  },
  ....
})

Suchen Sie einen zufälligen Ort und geben Sie einen Fehlercode ein

<template>
  <div>
    <!-- 随便找个图片添加一个点击事件 -->
    <img @click="touchImg" alt="Vue logo" src="../assets/logo.png">
  </div>
</template>

<script setup>
import * as Sentry from "@sentry/vue"

// 点击输出
function touchImg () {
        
        
  // 输出一个不存在的对象，强制报错

  // 1、检测到报错会自动上报
  // console.log(window.a.b)

  // 2、检测到报错，手动上报
  try {
        
        
    console.log(window.a.b)
  } catch (error) {
        
        
    Sentry.captureException(error)
  }
}
</script>

Überprüfen Sie das Fehlerprotokoll. Sie können das Fehlerprotokoll an den folgenden beiden Stellen sehen

Kann eine bestimmte Codezeile genau lokalisieren:

5. Testen Sie, nachdem das Projekt gepackt wurde

Überall einsetzbar, um eine Produktionsumgebung zu simulieren .

Auffüllen

Wenn der Online-Fehler nicht im spezifischen Code lokalisiert werden kann, können Sie @sentry/cliihn beheben, indem Sie eine neue .sentryclircKonfigurationsdatei zur Konfiguration hinzufügen. Anhang: @sentry/cli-Nutzungsprozess

Bereitstellung und Nutzung der Sentry-Überwachung (detaillierter Prozess)

1. Einleitung

2. Andere Überwachungsprogramme

3. Bereitstellung (Server)

4. Lokaler Projekttest ( VueProjektbeispiel, Konfiguration ist ähnlich)

5. Testen Sie, nachdem das Projekt gepackt wurde

Auffüllen

Supongo que te gusta

4. Lokaler Projekttest ( `Vue`Projektbeispiel, Konfiguration ist ähnlich)