打开React和Vanilla JS项目的遥测

Question

有人可以帮助我了解是否有一种方法可以在客户端为 React 和 vanilla JS 项目配置开放遥测，我想做的就是控制台从浏览器进行的 fetch 调用的跟踪。

我看到的大部分文档都是针对nodejs的。请指出文档是否有？

Answer 1

该文档提供了 Javascript 的通用指南。您为 React 所做的事情与您为 Node.js 甚至简单的 JS 脚本所做的事情相同。

只需按照文档操作即可。创建并导出跟踪器：

import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';

const setupTracer = () => {
    const provider = new WebTracerProvider();

    provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
    
    provider.register({
      // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
      contextManager: new ZoneContextManager(),
    });
    
    // Registering instrumentations
    registerInstrumentations({
      instrumentations: [
        new DocumentLoadInstrumentation(),
        new UserInteractionInstrumentation(),
        new XMLHttpRequestInstrumentation(),
        new FetchInstrumentation()
      ],
    });
    
}

export default setupTracer;

在应用程序的入口点（通常是 index.js）中像这样导入跟踪器：

setupTracer();
ReactDOM.render(<App />, document.getElementById('root'));