Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT 故障排除

简介: Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT 故障排除

Debugging Additional Data



您可以查看事件的 JSON payload,以了解 Sentry 如何在事件中存储其他数据。数据的形状可能与描述不完全匹配。


微信图片_20220611115719.png


有关详细信息,请参阅关于 Event Payload 文档。


Max JSON Payload Size



maxValueLength 的默认值为 250,但是如果您的消息较长,则可以根据需要调整此值。请注意,并非每个单个值都受此选项影响。


CORS Attributes and Headers



要了解来自不同来源的脚本引发的 JavaScript 异常,请执行以下两项操作:

  1. 添加一个 crossorigin=”anonymous” 脚本属性

<script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>


script 属性告诉浏览器 “anonymously” 地获取目标文件。当请求此文件时,潜在的用户识别信息(如 cookie 或 HTTP 凭据)不会被浏览器传输到服务器。


  1. 添加一个 Cross-Origin HTTP header


Access-Control-Allow-Origin: *


跨域资源共享(CORS)是一组 API(主要是 HTTP headers),这些 API 决定了应如何跨源下载和服务文件。


通过设置 Access-Control-Allow-Origin: *,服务器向浏览器指示任何来源都可以获取该文件。另外,您可以将其限制为您控制的已知来源:


Access-Control-Allow-Origin: https://www.example.com


大多数社区 CDN 正确设置了 Access-Control-Allow-Origin 标头。


$ curl --head https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js | \
 grep -i "access-control-allow-origin"
 Access-Control-Allow-Origin: *


instrument.js Line Numbers for Console Log statements


如果在调试时在控制台显示 instrument.js,添加 Sentry 到你的框架 blackboxing ,设置如下:/@sentry/,这样 Chrome 在调试时忽略 SDK stackframes。


Dealing with Ad-Blockers


当您使用我们的 CDN 时,广告拦截(ad-blocking)或脚本拦截(script-blocking)扩展程序可能会阻止我们的 SDK 无法正确获取和初始化。因此,对 SDKs API 的任何调用都将失败,并可能导致您的应用程序行为异常。如果这适用于您的用例,则以下任何一种解决方案都可以缓解此问题。


处理脚本阻止扩展的最好方法是直接通过 npm 使用SDK软件包,并将其与您的应用程序捆绑在一起。这样,您可以确保代码将始终如您所愿地存在。


第二种方法是从 CDN 下载 SDK 并自己托管。这样,SDK 仍将与您的其余代码分开,但是您可以确定它不会被阻止,因为它的来源与您网站的来源相同。

您可以使用 curl 或任何其他类似的工具轻松获取它:


curl https://browser.sentry-cdn.com/5.20.1/bundle.min.js -o sentry.browser.5.20.1.min.js -s


最后一个选项是使用 Proxy 防护,即使您调用被阻止的 SDK,也可以确保您的代码不会中断。除 Internet Explorer 之外,所有浏览器均支持 Proxy,尽管该浏览器没有扩展。同样,如果您的用户浏览器中没有安装 Proxy,它也会被静默跳过,因此您不必担心它会破坏任何东西。


将此片段放在包含我们的 CDN bundle 软件的 <script> 标记上方。可读格式的代码段显示如下:


if ("Proxy" in window) {
  var handler = {
    get: function(_, key) {
      return new Proxy(function(cb) {
        if (key === "flush" || key === "close") return Promise.resolve();
        if (typeof cb === "function") return cb(window.Sentry);
        return window.Sentry;
      }, handler);
    },
  };
  window.Sentry = new Proxy({}, handler);
}


如果你想直接复制和粘贴代码片段,这里是缩小过后的:


<script>
  if ("Proxy" in window) {
    var n = {
      get: function(o, e) {
        return new Proxy(function(n) {
          return "flush" === e || "close" === e
            ? Promise.resolve()
            : "function" == typeof n
            ? n(window.Sentry)
            : window.Sentry;
        }, n);
      },
    };
    window.Sentry = new Proxy({}, n);
  }
</script>


Using a Client directly



为了能够管理多个 Sentry 实例而彼此之间没有任何冲突,您需要创建自己的 Client。如果您的应用程序集成在其中,这也有助于防止跟踪任何父应用程序错误。在此示例中,我们使用 @sentry/browser,但它也适用于 @sentry/node


import { BrowserClient } from "@sentry/browser";
const client = new BrowserClient({
  dsn: "___PUBLIC_DSN___",
});
client.captureException(new Error("example"));


尽管上面的示例工作得很好,但是 Client 上缺少诸如 configureScopewithScope 的某些方法,因为 Hub 负责状态管理。这就是为什么创建一个新的 Hub 并将其 Client 绑定到它上可能更容易的原因。结果是相同的,但是您还将获得状态管理。


import { BrowserClient, Hub } from "@sentry/browser";
const client = new BrowserClient({
  dsn: "___PUBLIC_DSN___",
});
const hub = new Hub(client);
hub.configureScope(function(scope) {
  scope.setTag("a", "b");
});
hub.addBreadcrumb({ message: "crumb 1" });
hub.captureMessage("test");
try {
  a = b;
} catch (e) {
  hub.captureException(e);
}
hub.withScope(function(scope) {
  hub.addBreadcrumb({ message: "crumb 2" });
  hub.captureMessage("test2");
});


Dealing with integrations


Integrations 是在 Client 上设置的,如果你需要处理多个 clients 和 hubs,你必须确保也正确地进行集成处理。下面是一个工作示例,演示如何使用多个 clients 和多个 hubs 运行全局集成。


import * as Sentry from "@sentry/browser";
// Very happy integration that'll prepend and append very happy stick figure to the message
class HappyIntegration {
  constructor() {
    this.name = "HappyIntegration";
  }
  setupOnce() {
    Sentry.addGlobalEventProcessor(event => {
      const self = Sentry.getCurrentHub().getIntegration(HappyIntegration);
      // Run the integration ONLY when it was installed on the current Hub
      if (self) {
        event.message = `\\o/ ${event.message} \\o/`;
      }
      return event;
    });
  }
}
HappyIntegration.id = "HappyIntegration";
const client1 = new Sentry.BrowserClient({
  dsn: "___PUBLIC_DSN___",
  integrations: [...Sentry.defaultIntegrations, new HappyIntegration()],
  beforeSend(event) {
    console.log("client 1", event);
    return null; // Returning null does not send the event
  },
});
const hub1 = new Sentry.Hub(client1);
const client2 = new Sentry.BrowserClient({
  dsn: "___PUBLIC_DSN___", // Can be a different DSN
  integrations: [...Sentry.defaultIntegrations, new HappyIntegration()],
  beforeSend(event) {
    console.log("client 2", event);
    return null; // Returning null does not send the event
  },
});
const hub2 = new Sentry.Hub(client2);
hub1.run(currentHub => {
  // The hub.run method makes sure that Sentry.getCurrentHub() returns this hub during the callback
  currentHub.captureMessage("a");
  currentHub.configureScope(function(scope) {
    scope.setTag("a", "b");
  });
});
hub2.run(currentHub => {
  // The hub.run method makes sure that Sentry.getCurrentHub() returns this hub during the callback
  currentHub.captureMessage("x");
  currentHub.configureScope(function(scope) {
    scope.setTag("c", "d");
  });
});


Third Party Promise Libraries


当您包含并配置 Sentry 时,我们的 JavaScript SDK 会自动将 global handlers 附加到 capture 未捕获的 exceptions 和未处理的 promise rejections。您可以通过在 GlobalHandlers 集成中将 onunhandledrejection 选项设置为 false 来禁用此默认行为,并手动挂钩到每个事件 handler,然后直接调用 Sentry.captureExceptionSentry.captureMessage


如果您使用第三方库来实现 promises,则可能还需要管理您的配置。另外,请记住,浏览器经常实施安全措施,当提供来自不同来源的脚本文件时,这些措施会阻止错误报告。


Supported Browsers


Sentry 的 JavaScript SDK 支持以下浏览器:


Android Firefox Chrome IE iPhone Edge Safari
4.4 latest latest IE 10
iOS12 latest latest
5.0

IE 11 iOS13

6.0





7.1





8.1





9.0





10.0







Support for <= IE 11


在 5.7.0 版之前,我们的 JavaScript SDK 需要为旧版浏览器(如IE 11和更低版本)提供一些 polyfill。如果您正在使用它,请先升级到最新版本或在下面添加脚本标签,然后再加载我们的 SDK。


<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise%2CObject.assign%2CString.prototype.includes%2CNumber.isNaN"></script>


我们需要以下polyfill:


  • Promise
  • Object.assign
  • Number.isNaN
  • String.prototype.includes


此外,请记住在 HTML 页面顶部定义一个有效的 HTML 文档类型,以确保 IE 不会进入兼容模式。


相关实践学习
通过Ingress进行灰度发布
本场景您将运行一个简单的应用,部署一个新的应用用于新的发布,并通过Ingress能力实现灰度发布。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
相关文章
|
3月前
|
Kubernetes Cloud Native 持续交付
容器化、Kubernetes与微服务架构的融合
容器化、Kubernetes与微服务架构的融合
82 1
|
3月前
|
监控 持续交付 Docker
Docker 容器化部署在微服务架构中的应用有哪些?
Docker 容器化部署在微服务架构中的应用有哪些?
|
3月前
|
安全 持续交付 Docker
微服务架构和 Docker 容器化部署的优点是什么?
微服务架构和 Docker 容器化部署的优点是什么?
|
3月前
|
监控 持续交付 Docker
Docker容器化部署在微服务架构中的应用
Docker容器化部署在微服务架构中的应用
|
3月前
|
存储 监控 Docker
探索微服务架构下的容器化部署
本文旨在深入探讨微服务架构下容器化部署的关键技术与实践,通过分析Docker容器技术如何促进微服务的灵活部署和高效管理,揭示其在现代软件开发中的重要性。文章将重点讨论容器化技术的优势、面临的挑战以及最佳实践策略,为读者提供一套完整的理论与实践相结合的指导方案。
|
3月前
|
运维 Kubernetes Docker
利用Docker和Kubernetes构建微服务架构
利用Docker和Kubernetes构建微服务架构
|
3月前
|
Kubernetes API 调度
【赵渝强老师】Kubernetes的体系架构
本文介绍了Kubernetes的体系架构及其核心组件。Kubernetes采用主从分布式架构,由master主节点和多个node工作节点组成。master节点负责集群管理和调度,运行API Server、scheduler、controller-manager等服务组件;node节点运行kubelet、kube-proxy和Docker容器守护进程,负责实际业务应用的运行。文章还简要介绍了Kubernetes的附加组件及其作用。
103 5
|
3月前
|
运维 Kubernetes Cloud Native
Kubernetes云原生架构深度解析与实践指南####
本文深入探讨了Kubernetes作为领先的云原生应用编排平台,其设计理念、核心组件及高级特性。通过剖析Kubernetes的工作原理,结合具体案例分析,为读者呈现如何在实际项目中高效部署、管理和扩展容器化应用的策略与技巧。文章还涵盖了服务发现、负载均衡、配置管理、自动化伸缩等关键议题,旨在帮助开发者和运维人员掌握利用Kubernetes构建健壮、可伸缩的云原生生态系统的能力。 ####
|
3月前
|
JavaScript 持续交付 Docker
解锁新技能:Docker容器化部署在微服务架构中的应用
【10月更文挑战第29天】在数字化转型中,微服务架构因灵活性和可扩展性成为企业首选。Docker容器化技术为微服务的部署和管理带来革命性变化。本文探讨Docker在微服务架构中的应用,包括隔离性、可移植性、扩展性、版本控制等方面,并提供代码示例。
97 1
|
3月前
|
存储 Kubernetes 调度

热门文章

最新文章