在我的React应用程序中配置Sumo Logic RUM跟踪前端部分。

huangapple
go评论112阅读模式
英文:

Configure Sumo Logic RUM Tracing on the frontend in my React Application

问题

如标题所述，我想配置 Sumo Logic 以从我的 React 应用程序中获取 RUM 跟踪（例如用户点击、错误等）。如何做到这一点。
我已经研究了一些东西：

  • OpenTelemetry - 这似乎是最合理的选择，但我无法使其工作。
    我的实现看起来类似于这样
  1. import { SpanStatusCode, trace } from "@opentelemetry/api";
  2. import { OTLPSpanExporter } from "@opentelemetry/exporter-otlp-http";
  3. import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
  4. import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
  6. const provider = new WebTracerProvider();
  8. // 配置 Sumo Logic 导出器
  9. const exporter = new OTLPSpanExporter({
  10.   endpoint: "SUMO_ENDPOINT",
  11.   // 根据需要添加其他导出器配置选项
  12. });
  14. // 为 OpenTelemetry API 设置跟踪器提供程序
  15. trace.setGlobalTracerProvider(provider);
  • 也尝试了各种 npm 包，但它们似乎都不太可靠（https://github.com/SumoLogic/js-sumo-logger）（https://github.com/SumoLogic/sumologic-opentelemetry-js）
  • 还需要在仅在浏览器上运行此操作 - 遵循 Sumo 的文档，他们似乎希望在服务器上完成这项工作https://help.sumologic.com/docs/apm/traces/get-started-transaction-tracing/opentelemetry-instrumentation/javascript/
  • 还尝试了以下教程https://help.sumologic.com/docs/apm/real-user-monitoring/configure-data-collection/并获得了一些类似以下代码的代码
  1. export default class SumoLogger {
  2.   install(logger: Logger): void {
  3.     const defaultMethodFactory = logger.methodFactory;
  4.     const tracer = initialize({
  5.       collectionSourceUrl:
  6.         "endpoint",
  7.       serviceName: "name",
  8.       deploymentEnvironment: "local",
  9.       applicationName: "name",
  10.       samplingProbability: 1,
  11.       collectErrors: true,
  12.     });
  13.      if (method === "warn" || method === "error") {
  14.           // message may be an error
  15.           if (errorObject && errorObject instanceof Error) {
  16.             tracer?.recordError(errorObject.message);
  17.             return;
  18.           }
  19.     }

但在 Sumo Logic 中看不到任何数据。

英文:

As described in the title, I am looking to configure sumo logic to get RUM tracing from my react application (IE user clicks, errors, etc).
How can I do this.
Few things that I have looked into

  • open telemetry - this seemed to make the most sense but I wasn't able to get it working
    My implementation looked something like this
  1. import { OTLPSpanExporter } from "@opentelemetry/exporter-otlp-http";
  2. import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
  3. import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
  5. const provider = new WebTracerProvider();
  7. // Configure the Sumo Logic exporter
  8. const exporter = new OTLPSpanExporter({
  9.   endpoint: "SUMO_ENDPOINT",
  10.   // Add any other exporter configuration options as needed
  11. });
  13. // Set the tracer provider for the OpenTelemetry API
  14. trace.setGlobalTracerProvider(provider);
  1.  export default class SumoLogger {
  2.   install(logger: Logger): void {
  3.     const defaultMethodFactory = logger.methodFactory;
  4.     const tracer = initialize({
  5.       collectionSourceUrl:
  6.         "endpoint",
  7.       serviceName: "name",
  8.       deploymentEnvironment: "local",
  9.       applicationName: "name",
  10.       samplingProbability: 1,
  11.       collectErrors: true,
  12.     });
  13.      if (method === "warn" || method === "error") {
  14.           // message may be an error
  15.           if (errorObject && errorObject instanceof Error) {
  16.        
  17.             tracer?.recordError(errorObject.message);
  19.             return;
  20.           }
  21.     ``` but don't see any data in sumo logic
  23. </details>
  26. # 答案1
  27. **得分**: 2
  29. 这是一个全面的教程链接: https://help.sumologic.com/docs/apm/real-user-monitoring/configure-data-collection/，分为两个步骤：
  31. - 在Sumo Logic UI中创建一个RUM HTTP Traces数据源；
  32. - 将RUM JS脚本添加到您的页面，并初始化脚本（通过 `initialize` 函数）。V4是最新的脚本，详情请参阅 https://github.com/SumoLogic/sumologic-opentelemetry-js。
  34. <details>
  35. <summary>英文:</summary>
  37. Here is a comprehensive tutorial: https://help.sumologic.com/docs/apm/real-user-monitoring/configure-data-collection/, which consists of two steps:
  39. - creating a RUM HTTP Traces source in Sumo Logic UI;
  40. - add RUM JS script to your page and initialise the script (via `initialize` function). V4 is the newest script, see https://github.com/SumoLogic/sumologic-opentelemetry-js.
  42. </details>

huangapple
  • 本文由 发表于 2023年6月29日 04:34:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76576543.html
  • logging
  • reactjs
  • sumologic
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定