Was macht sentry-browser-sdk?
Vollständige Sentry-SDK-Einrichtung für Browser-JavaScript. Verwenden Sie dies, wenn Sie aufgefordert werden, „Sentry zu einer Website hinzuzufügen“, „@sentry/browser zu installieren“ oder Fehlerüberwachung, Tracing, Session Replay oder Logging für Vanilla-JavaScript, jQuery, statische Websites oder WordPress zu konfigurieren.
Installation
Installieren Sie das SDK über npm:
npm install @sentry/browser
Oder binden Sie es über CDN ein:
<script src="https://browser.sentry-cdn.com/8.9.2/bundle.min.js" crossorigin="anonymous"></script>
Konfiguration
Initialisieren Sie Sentry mit Ihrem DSN und konfigurieren Sie optional Tracing und Session Replay:
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'https://[email protected]/0',
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
tracesSampleRate: 1.0, // Für das Tracing (1.0 = 100% in der Entwicklung, anpassen für die Produktion)
replaysSessionSampleRate: 0.1, // Für Session Replay (10%)
replaysOnErrorSampleRate: 1.0, // Bei Fehlern immer ein Replay aufzeichnen
});
Fehler erfassen
Sentry erfasst automatisch nicht abgefangene Ausnahmen und unbehandelte Promise-Ablehnungen. Sie können auch manuell Fehler melden:
try {
// Ihr Code, der einen Fehler auslösen könnte
} catch (error) {
Sentry.captureException(error);
}
Benutzerdefinierte Ereignisse (Logging)
Senden Sie benutzerdefinierte Nachrichten, um Logging-Informationen anzuzeigen:
Sentry.captureMessage('Etwas ist passiert', {
level: 'info',
});
Optionen für verschiedene Setups
Vanilla JavaScript / jQuery
Für einfache Projekte initialisieren Sie Sentry einfach direkt nach dem Laden der Seite:
// Nach dem Laden des DOM
$(document).ready(function() {
Sentry.init({ dsn: '...' });
});
Statische HTML-Seite
Verwenden Sie das CDN-Skript und initialisieren Sie es inline:
<!DOCTYPE html>
<html>
<head>
<!-- Andere Metadaten -->
</head>
<body>
<!-- Ihr Inhalt -->
<script src="https://browser.sentry-cdn.com/8.9.2/bundle.min.js" crossorigin="anonymous"></script>
<script>
Sentry.init({ dsn: 'https://[email protected]/0' });
</script>
</body>
</html>
WordPress
Fügen Sie das CDN-Skript in Ihre functions.php oder ein Plugin ein, oder fügen Sie es direkt in die Kopfzeile Ihrer Theme-Datei (header.php) ein:
function add_sentry_script() {
?>
<script src="https://browser.sentry-cdn.com/8.9.2/bundle.min.js" crossorigin="anonymous"></script>
<script>
Sentry.init({ dsn: 'https://[email protected]/0' });
</script>
<?php
}
add_action('wp_head', 'add_sentry_script');
Weitere Informationen
Weitere Details finden Sie in der offiziellen Sentry-Dokumentation für JavaScript.