使用Angular Universal运行Raygun.io

Question

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

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

还有一个名为raygun4js的Angular via npm安装指南，但是这个问题仍然存在。

// 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创建一个window api并将其设置为名为win的全局api。在将这一行添加到NPM项目server.ts之后，构建并运行命令-发现一个异常：

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

ReferenceError: raygunUtilityFactory is not defined

这是因为window API中没有定义raygunUtilityFactory函数。了解Github中的raygun.js

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.....

问题是，如果在window中找不到，NodeJS如何在构建过程中读取raygunUtilityFactory函数？

更新:我曾尝试在一个较小的项目中这样做，但似乎连安装raygun.io的文档都没有包含Angular Universal的过程。它基本上不能使用domino检测window

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

ReferenceError: raygunUtilityFactory is not defined

Answer 1

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

参考：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或下载并添加到您的项目中。

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

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

Answer 2

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

AngularJS会自动捕获许多隐藏在幕后的错误，为了正确捕获错误，您需要注册自己的angular error handler，当触发回调时，您可以使用Raygun4JS send method将消息发送给Raygun。

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

Raygun有一点angular documentation，但不能通过npm for Angular Universal导入raygun4js (根据您的发现)，因此您需要修改所示的示例。也就是说，它们应该提供一个很好的起点。