[go: nahoru, domu]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

plugin-react-load doesn't work with opentelemetry-js v0.15.0 #319

Closed
kikeyama opened this issue Jan 25, 2021 · 2 comments
Closed

plugin-react-load doesn't work with opentelemetry-js v0.15.0 #319

kikeyama opened this issue Jan 25, 2021 · 2 comments
Labels
bug Something isn't working

Comments

@kikeyama
Copy link

What version of OpenTelemetry are you using?

opentelemetry-js: v0.15.0
opentelemetry-js-contrib: v0.12.1

What version of Node are you using?

v.14.13.1

What did you do?

If possible, provide a recipe for reproducing the error.

I have React js frontend app with "@opentelemetry/plugin-react-load": "^0.12.1". It works with opentelemetry-js v0.14.0 but after update the package to v0.15.0, it fails with the following error. It prevents render web UI and displays some error stack traces.

Uncaught TypeError: BaseOpenTelemetryComponent._tracer.withSpan is not a function
    at App._instrumentFunction (BaseOpenTelemetryComponent.js:89)
    at App.patchRender (BaseOpenTelemetryComponent.js:162)
    at finishClassComponent (react-dom.development.js:17485)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at ZoneDelegate.invokeTask (zone.js:401)
    at Zone.runTask (zone.js:174)
    at ZoneTask.invokeTask [as invoke] (zone.js:483)
    at invokeTask (zone.js:1596)
    at HTMLUnknownElement.globalZoneAwareCallback (zone.js:1622)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushSync (react-dom.development.js:22467)
    at Object.scheduleRoot (react-dom.development.js:24444)
    at react-refresh-runtime.development.js:284
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:263)
    at RefreshUtils.js:62
    at ZoneDelegate.invokeTask (zone.js:401)
    at Zone.runTask (zone.js:174)
    at invokeTask (zone.js:483)
    at ZoneTask.invoke (zone.js:472)
    at timer (zone.js:2538)

---

The above error occurred in the <App> component:

    at App (http://localhost:3000/static/js/main.chunk.js:344:1)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

---

Uncaught TypeError: this._tracer.withSpan is not a function
    at documentLoad.js:76
    at NoopContextManager.with (NoopContextManager.ts:29)
    at ContextAPI.with (context.ts:86)
    at DocumentLoad._collectPerformance (documentLoad.js:71)
    at documentLoad.js:48
    at ZoneDelegate.invokeTask (zone.js:401)
    at Zone.runTask (zone.js:174)
    at invokeTask (zone.js:483)
    at ZoneTask.invoke (zone.js:472)
    at timer (zone.js:2538)

The source code is the following.

tracing.js:

import * as api from '@opentelemetry/api';
import { WebTracerProvider } from '@opentelemetry/web';
import { B3Propagator } from "@opentelemetry/propagator-b3";
import { BatchSpanProcessor, ConsoleSpanExporter } from '@opentelemetry/tracing';

import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load';
import { ZoneContextManager } from '@opentelemetry/context-zone';

import { ZipkinExporter } from '@opentelemetry/exporter-zipkin';
import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';

api.propagation.setGlobalPropagator(new B3Propagator());

const provider = new WebTracerProvider();

const exporter = new CollectorTraceExporter({
	serviceName: 'myService',
	url: 'http://localhsot:55678/v1/trace',
});

provider.addSpanProcessor(new BatchSpanProcessor(exporter));

provider.register({
  propagator: new B3Propagator(),
  contextManager: new ZoneContextManager(),
});

const tracer = provider.getTracer('myService')

// React
BaseOpenTelemetryComponent.setLogger(provider.logger);
BaseOpenTelemetryComponent.setTracer(service);

export default tracer;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import tracer from './tracing';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js:

import React from 'react';
import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load';

class App extends BaseOpenTelemetryComponent {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Display />
        </header>
      </div>
    );
  }
}

Are there any workarounds?
@kikeyama kikeyama added the bug Something isn't working label Jan 25, 2021
@Flarna
Copy link
Member
Flarna commented Jan 25, 2021

You should stick on Otel 0.14.0 until plugins 0.13.0 are released (see #316)

@kikeyama
Copy link
Author

@Flarna Thank you. I'll watch the release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Flarna @kikeyama