为react和vanillaJS项目打开Telemetry

Question

有人能帮我了解是否有办法在客户端为react和vanilla JS项目配置打开的Telemetry吗？我只想控制台从浏览器进行的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'));