Ön Uç Kodunuza Sentry SDK'yı Tanıtın

Bu öğreticide, React demo kodunu yerel geliştirme ortamınıza aktarır, Sentry SDK'yı ekler ve onu başlatırsınız.

1. Adım: Kodu alın

• GitHub’da “ön uç izleme”(frontend monitoring) örnek kod deposunu açın.
• “Çatal”(Fork) ı tıklayın ve bu havuzun çatallanmasını istediğiniz hedef GitHub hesabını seçin.

• Çatal tamamlandığında, "Klonla veya indir"i tıklayın ve depo HTTPS URL'sini kopyalayın.

> git clone <repository HTTPS url>

• Örnek kod artık yerel olarak mevcut olduğuna göre, tercih ettiğiniz kod düzenleyicide “ön uç izleme” projesini açın.

2. Adım: SDK'yı yükleyin

Sentry, uygulama çalışma zamanınızda platforma özel bir SDK kullanarak verileri yakalar. SDK'yı kullanmak için, kaynak kodunuzda içe aktarın ve yapılandırın. Demo projesi React ve Browser JS kullanıyor. Başlamanın en hızlı yolu, JavaScript tarayıcı SDK'sının CDN'de barındırılan sürümünü kullanmaktır, ancak NPM, tarayıcı SDK'sını da yükleyebilirsiniz.

1- “index.html” Dosyayı açın (altında bulunur ./frontend-monitoring/public/).

Kodumuzda SDK’yı mümkün olduğunca erken içe aktarıp başlattığımıza dikkat edin.

2- Sentry SDK yapılandırmasında, önceki adımlardaDSN oluşturduğunuz projeden kopyaladığınız anahtar değerini girin .

Sentry.init({
  dsn: "<PASTE YOUR DSN KEY HERE>",
});

3. Adım: Demo uygulamasını yükleyin ve çalıştırın

Demo uygulamasını yerel ana makinenizde oluşturmak ve çalıştırmak için:

1- Bir kabuk terminali açın ve dizini frontend-monitoringproje klasörüne değiştirin.

2- .nvmrc Bu projeyle uyumlu Düğüm sürümünü ayarlamak için dosyayı kullanın . Koşmak:

> nvm use

3- Aşağıdakileri çalıştırarak proje bağımlılıklarını kurun:

> npm install

4- Aşağıdakileri çalıştırarak projeyi yerel ana makinenizde derleyin, dağıtın ve çalıştırın:

> npm run deploy