Raygun: Tingkatkan aplikasi web dan mudah alih dengan pemantauan ralat dan prestasi

Membetulkan ralat adalah lebih mudah apabila anda tahu bagaimana ia berlaku, tetapi itu mungkin tidak selalu berlaku. Setelah perisian dihantar, anda berada di bawah belas kasihan pelanggan anda, yang mungkin tidak selalu melaporkan ranap sistem.

Apabila kod anda ranap, anda log ralat dalam fail log, meneruskan proses pembangun menjejaki berlakunya ralat dengan melihat fail log. Meneka punca ranap daripada fail log boleh menyebabkan anda menghabiskan banyak masa yang berharga.

Adakah terdapat cara yang lebih mudah untuk menyelesaikan masalah punca ralat dalam aplikasi perisian? Raygun menyediakan satu set penyelesaian yang menarik untuk mengawasi ralat apabila ia berlaku dalam web dan aplikasi mudah alih anda.

Menurut dokumentasi rasmi, Raygun menyediakan:

Pemahaman lengkap tentang isu pengguna dan alatan aliran kerja untuk menyelesaikannya dengan cepat sebagai satu pasukan.

Raygun menyediakan empat alatan yang memudahkan anda mengendalikan ralat dan ranap dalam aplikasi anda:

• Alat pelaporan ranap Raygun membantu anda memantau dan meniru setiap ranap dan ralat yang berlaku dalam aplikasi anda.
• Alat pemantauan pengguna sebenar membantu menangkap setiap sesi pengguna dan maklumat lain yang berkaitan untuk mengukur pengalaman pengguna.
• Alat penjejakan pengguna membantu mengklasifikasikan ranap dan pepijat berdasarkan pengguna apl.
• Raygun Deployment Tracking Tool memudahkan anda menjejaki setiap keluaran dan menunjukkan kepada anda cara ia mempengaruhi prestasi keseluruhan aplikasi perisian anda.

Dalam tutorial ini, anda akan belajar cara mengintegrasikan alat Raygun dengan aplikasi web anda untuk memantau dan menjejaki ralat. Dalam tutorial ini, anda akan menyepadukan alat Raygun dengan aplikasi web Angular.

Bermula dengan Raygun

Anda boleh menggunakan Raygun dengan pelbagai bahasa pengaturcaraan dan rangka kerja. Dalam tutorial ini, kita akan belajar cara mula menggunakan Raygun dengan aplikasi web Angular.

Pertama, anda perlu membuat akaun di Raygun. Selepas membuat akaun anda, anda akan melihat skrin untuk memilih bahasa atau rangka kerja pilihan anda.

Dalam tutorial ini, anda akan belajar cara mula menggunakan Raygun pada aplikasi web Angular anda.

Gunakan Angular dengan Raygun

Dari senarai rangka kerja, pilih rangka kerja Sudut. Anda akan melihat skrin di mana anda boleh memilih antara Angular (v2+) atau Angular1.x.

Memandangkan anda akan belajar cara mengintegrasikan Raygun dengan Angular 4, perhatikan tab Angular (v2+) .

Sebelum menyepadukan Raygun dengan Angular, anda perlu mencipta aplikasi Angular. Mari mulakan membuat aplikasi Angular.

Pertama, anda perlu memasang Angular CLI secara global.

npm install -g @angular/cli

Buat aplikasi Sudut menggunakan CLI Sudut.

ng new AngularRaygun

Anda akan membuat aplikasi Angular dan memasang kebergantungan yang diperlukan.

Navigasi ke direktori projek dan lancarkan aplikasi.

cd AngularRaygun

npm start

Anda akan menjalankan aplikasi di http://localhost:4200/.

Gunakan Pengurus Pakej Node (npm) untuk memasang pustaka raygun4js.

npm install raygun4js --save

raygun4js 库。

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { ErrorHandler } from '@angular/core';

import { RaygunErrorHandler } from '../config/app.raygun.setup';

import { AppComponent } from './app.component';



@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [{ 

    provide: ErrorHandler, 

    useClass: RaygunErrorHandler 

  }],

  bootstrap: [AppComponent]

})

export class AppModule { }

在 src/config 文件夹中，创建一个名为 app.raygun.setup.ts 的文件。

从 复制 <code class="inline">Angular (v2+) 的步骤 2 中的设置代码并将其粘贴到 app.raygun.setup.ts文件。

在 app.module.ts 文件中导入 RaygunErrorHandler在 Angular 应用程序内部，并添加自定义错误处理程序。以下是 app.module.ts 文件的外观：

import { Router } from '@angular/router';

现在您已经添加了一个自定义错误处理程序 RaygunErrorHandler，它将处理错误。

让我们添加一些代码来创建错误。在 app.component.ts 文件中导入 RouterDalam folder src/config, buat fail bernama app.raygun.setup.ts.

Salin kod persediaan dalam langkah 2 Angular (v2+) daripada dan tampalkannya ke dalam <code class="inline" >app.raygun. fail setup.ts.

Import RaygunErrorHandler dalam aplikasi Angular dalam fail app.module.ts dan tambah pengendali ralat tersuai. Begini rupa fail app.module.ts:

constructor(private router: Router) {}

Kini anda telah menambahkan pengendali ralat tersuai RaygunErrorHandler yang akan mengendalikan ralat.

Mari tambahkan beberapa kod untuk mencipta ralat. Import Router dalam fail app.component.ts.

NullInjectorError: No provider for Router!

🎜Ubah suai kaedah pembinaan seperti berikut: 🎜

rg4js('setUser', {

  identifier: 'roy_agasthyan_unique_id',

  isAnonymous: false,

  email: 'royagasthyan@gmail.com',

  firstName: 'Roy',

  fullName: 'Roy Agasthyan'

});

🎜Kod di atas akan menimbulkan ralat apabila anda menjalankan aplikasi kerana ia belum diimport ke dalam AppModule. Mari lihat bagaimana Raygun menangkap ralat. Simpan perubahan di atas dan mulakan semula aplikasi. 🎜 🎜Arahkan pelayar anda ke http://localhost:4200. Semak konsol penyemak imbas anda dan anda akan mendapat ralat yang direkodkan. 🎜 🎜Papan Pemuka Raygun🎜 🎜Apabila anda menjalankan aplikasi, ralat akan dilog masuk dalam konsol penyemak imbas. 🎜

NullInjectorError: No provider for Router!

在 Raygun 应用程序中，单击左侧的仪表板选项卡，您将获得有关 Raygun 记录的请求的详细信息。

如 Raygun 仪表板中所示，它显示与以下内容相关的会话计数、最近请求、错误实例计数等您使用 Raygun 配置的 Angular 应用程序。

点击仪表板右侧显示的最近请求，您将获得与特定请求相关的详细信息.

Raygun 崩溃报告

处理软件应用程序时，应用程序崩溃是一种常见情况。许多此类崩溃发生在实时场景中，因此如果没有适当的崩溃报告系统就很难跟踪。

Raygun 提供了一个名为“崩溃报告”的工具，可以更深入地了解应用程序崩溃。让我们看看崩溃报告是如何工作的。

您的 Angular 应用程序中存在一个导致其崩溃的错误。让我们看看如何使用 Raygun 崩溃报告来报告它。

点击左侧菜单中的崩溃报告标签。您将看到列出的错误报告。

在 Raygun 崩溃报告选项卡中，它显示应用程序中发生的错误。在上面显示的选项卡中，错误已分为活动、已解决、已忽略和永久忽略。

您在运行应用程序时遇到的错误已记录在活动选项卡下。

单击列出的错误后，您将被重定向到另一个页面，其中包含与该错误相关的详细信息。在此页面上，您将获得错误摘要、HTTP 信息、发生错误的环境详细信息（例如操作系统、浏览器等）、原始错误信息和错误堆栈跟踪等信息。

当显示与特定错误相关的信息时，Raygun 为您提供了根据您的情况更改错误状态的功能。使固定。您可以将状态更改为活动、已解决、已忽略等。

Raygun 的崩溃报告工具提供了向错误添加注释的功能，这对于讨论有关错误的详细信息非常有帮助团队合作。

崩溃报告：设置

崩溃报告附带了一些设置，使用户可以更轻松地管理应用程序中发生的错误。

它为您提供了启用实时刷新、错误组上首次看到日期以及仪表板上的用户计数的选项。

您可以选择批量更改错误状态，也可以选择删除应用程序中发生的所有错误。

崩溃报告：入站过滤器

Raygun 提供了一个根据 IP 地址、机器名称等过滤请求的选项。如果您不想跟踪来自特定 IP 地址的错误，您可以创建入站过滤器，并从应用程序中跟踪错误在该 IP 地址上运行的程序将不会被进一步跟踪。

让我们尝试为在 127.0.0.0.1 上运行的应用程序添加过滤器，看看它是否会被跟踪。

在左侧菜单的崩溃报告选项卡下，单击入站过滤器链接。将 IP 地址 127.0.0.0.1 添加到过滤器列表中。

现在，如果您尝试运行应用程序，则崩溃报告屏幕中不会跟踪该应用程序，因为它是已被过滤掉。

您还可以根据计算机名称、HTTP、构建版本、标签和用户代理添加过滤器。

Raygun 用户跟踪

用户在使用该软件时遇到的大多数问题都没有报告。沮丧的用户报告问题的可能性非常低。因此，您往往会失去用于提高软件质量的用户反馈。

Raygun 提供受影响的用户跟踪报告。此报告显示您的应用程序中遇到错误的用户列表。它提供了特定用户如何遇到特定错误的完整视图。您可以通过单击屏幕左侧的用户选项卡来查看此报告。

在您的 Angular 应用程序中，您尚未使用 Raygun 受影响的用户详细信息功能。因此，在受影响的用户跟踪报告中，您会发现匿名的用户详细信息以及错误详细信息。

点击用户跟踪信息中的匿名用户链接，您将看到与该特定匿名用户相关的详细信息。诸如活动错误信息、用户体验、会话、用户使用的设备等详细信息都将显示在用户报告中。

您可以将用户信息详细信息添加到 Raygun 配置文件中。将以下代码添加到 config/app.raygun.setup.ts 文件中，将用户信息详细信息发送到 Raygun。

rg4js('setUser', {

  identifier: 'roy_agasthyan_unique_id',

  isAnonymous: false,

  email: 'royagasthyan@gmail.com',

  firstName: 'Roy',

  fullName: 'Roy Agasthyan'

});

以下是 config/app.raygun.setup.ts 文件的外观：

import * as rg4js from 'raygun4js';

import { ErrorHandler } from '@angular/core';



const VERSION_NUMBER = '1.0.0.0';



rg4js('apiKey', 'FehB7YwfCf/F+KrFCZdJSg==');

rg4js('setVersion', VERSION_NUMBER);

rg4js('enableCrashReporting', true);

rg4js('enablePulse', true);

rg4js('setUser', {

  identifier: 'roy_agasthyan_unique_id',

  isAnonymous: false,

  email: 'royagasthyan@gmail.com',

  firstName: 'Roy',

  fullName: 'Roy Agasthyan'

});



export class RaygunErrorHandler implements ErrorHandler {

  handleError(e: any) {

    rg4js('send', {

      error: e,

    });

  }

}

保存上述更改并重新加载 Angular Web 应用程序。转到 Raygun 应用程序控制台，然后单击左侧菜单中的用户选项卡。您将能够看到受影响用户列表中显示的新用户。

单击用户名可查看与特定用户关联的详细信息。

Raygun 真实用户监控

Raygun 的真实用户监控工具可让您深入了解实时用户会话。它可让您从用户环境中识别用户与应用交互的方式以及它如何影响应用的性能。

让我们运行您的 Angular 应用程序，看看如何在真实用户监控工具中对其进行监控。单击左侧菜单中的真实用户监控选项卡。您将能够查看实时用户详细信息和会话。

通过单击不同的选项卡，您可以监控所请求页面的性能。

它提供有关最慢和请求最多的页面的信息。根据多项指标，您可以监控加载时间较长的页面并修复它们以提高应用程序的性能。

真实用户监控中还有许多其他选项卡，可以根据浏览器、平台和用户位置等不同参数深入了解用户信息。

Raygun 部署跟踪

当您发布软件的新版本时，预计该版本会是一个更好的版本，其中包含针对早期版本中报告的问题的错误修复和补丁。

Raygun 提供了一个工具来跟踪部署过程并监控版本。单击左侧菜单中的部署选项卡，您将看到有关如何使用部署系统配置 Raygun 的信息。配置完成后，您将能够查看与每个版本相关的详细报告。

设置部署跟踪系统将使您能够更深入地了解每个版本。您可以监控趋势并查看是否正在提高构建质量或降低构建质量。对于每个新版本，您可以比较错误率并跟踪版本中出现的任何新错误。

我建议阅读官方文档，了解如何将 Raygun 部署跟踪与您的部署系统集成。

总结

在本教程中，您了解了如何开始将 Raygun 与 Angular Web 应用程序结合使用。您学习了如何使用崩溃报告工具来监控和跟踪崩溃的发生。使用真实用户监控工具，您了解了如何了解用户体验详细信息，例如页面加载时间、平均加载时间等。

用户跟踪工具可让您根据应用程序用户监控错误和崩溃并对其进行分类。部署跟踪工具可帮助您跟踪应用程序的每个版本是否有崩溃和错误，并让您了解它如何影响应用程序的整体运行状况。

有关将 Raygun 与其他语言和框架集成的详细信息，我建议阅读官方 Raygun 文档。

如果您对今天的教程有任何问题和意见，请在下面发布。

Atas ialah kandungan terperinci Raygun: Tingkatkan aplikasi web dan mudah alih dengan pemantauan ralat dan prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!