0

我正在Raygun.io使用 Angular Universal 将 APM 添加到我们的 Angular 8 应用程序中。

众所周知，raygun.io有一个客户端 javascript 库并将其添加到具有 Universal 的 Angular 中，必须创建 DOM 窗口 API。这可以使用以下代码使用 domino npm 来完成：

还有一个通过 npm 安装 Angular 的指南，raygun4js但是问题仍然存在。

// Domino for defining Windows API in SSR 
(found @ https://www.npmjs.com/package/domino )

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(index.html).toString();
const win = domino.createWindow(template);

global['window'] = win; // will be used for NodeJS to read Window API
global['document'] = win.document;

*domino 创建一个窗口 api 并将其设置为一个名为 win 的全局变量。将此行添加到 NPM 项目server.ts后，构建并运行命令 - 发现异常：

  Raygun.Utilities = raygunUtilityFactory(window, Raygun);
  ^

ReferenceError: raygunUtilityFactory is not defined

这源于一个raygunUtilityFactory函数未在窗口 API 中定义。raygun.js在 Github 中查看内部

window.raygunUtilityFactory = function(window, Raygun) {
  var rg = {
    getUuid: function() {
      function _p8(s) {
        var p = (Math.random().toString(16) + '000000000').substr(2, 8);
        return s ? '-' + p.substr(0, 4) + '-' + p.substr(4, 4) : p;
      }

 // more code.....

问题是，如果 NodeJSraygunUtilityFactory在窗口 API 中找不到函数，它如何在构建期间读取函数？

更新：我尝试在一个较小的项目上执行此操作，但似乎即使它的安装文档raygun.io也不包括Angular Universal. 它基本上无法使用检测窗口 APIdomino

  Raygun.Utilities = raygunUtilityFactory(window, Raygun);
  ^

ReferenceError: raygunUtilityFactory is not defined
4

2 回答 2

0

很高兴听到您已经找到了部分解决方案！

AngularJS 在后台自动捕获很多错误，为了正确捕获错误，您需要注册自己的角度错误处理程序，并且在触发回调时，您可以使用Raygun4JS 发送方法将消息发送到 Raygun。

export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    rg4js('send', {
      error: e,
    });
  }
}

Raygun 有一些Angular文档，但无法通过 npm 为 Angular Universal 导入 raygun4js（根据您的发现），因此您需要修改显示的示例。也就是说，他们应该提供一个很好的起点。

于 2020-01-10T03:39:59.943 回答
0

答：将Raygunjs 设置为全局对象，并将其引用到服务中声明的变量。

参考：https ://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

declare var rg4js: any;

*把它放在你的服务或者你的主要组件ts中。

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

*将此添加到您的 index.html 或下载并将其添加到您的项目中。

请注意，该raygun脚本应引用为 rg4js。Angular 会自动知道 TS 文件中的 rg4js 是对raygun脚本标签的引用。

-- 我现在可以在我们的客户端仪表板中看到崩溃报告和脉冲监控。但是，我注意到没有捕获所有客户端错误日志。我仍在研究发送这些未处理错误的方法 - 从windows.onerror.

于 2019-10-28T02:19:03.767 回答