Nocturnal Programmer's Machine


    0.1.5 • Public • Published

    📈 React Tracing Build Status Coverage Status Greenkeeper badge All Contributors FOSSA Status


    react-tracing enables React and React Native developers to build faster products by making the real-world performance visible. Although it is optimized for React and React Native we also support pure JS.

    For this we want to use well-known tooling from the backend world and bring it to the frontend, so that engineering teams might gain a better understanding where a loading time improvement might help the most.

    Imagine having graphs like this showing real users using your (web-)app when you want to decide which performance issue to tackle next:



    This section aims to give you a small overview into the language used in opentracing

    Term Description
    span a single operation that is traced
    child span like functions calls are nested, spans can be, too

    How we manage your spans

    In other tracing solutions you have to define which span is the child of which, but react-tracing handles this for you. Therefore react-tracing uses a stack, making use of Javascripts Single-Threadedness, to determine which spans should rely on each other. This stack is stored in the global scope (it's a bit ugly, do you have a better idea?) under window.reactTracing.stack or global.reactTracing.stack.

    Supported Tracing Implementations

    We can use every opentracing solution in general, but currently there is only one, therefore it is not configurable yet. As soon as there are other solutions we will add them here.

    Working with multiple systems

    Every time you send a fetch or xhr request with react-tracing's instrumented versions of them the X-B3-TraceId, X-B3-SpanId HTTP headers are set, so that your server can pick the span up and extend the tracing context.

    Environment Setup

    You need a Zipkin instance running on an accessible server. For development puropses you can start one with docker: docker run -d -p 9411:9411 openzipkin/zipkin


    import Tracing from "react-tracing";
    const tracer = new Tracing({
        serviceName: "Frontend",
        endpoint: "http://localhost:9111",
        kind: "client", // default
    // ======================
    // You have two options here depending on your style of usage
    // a) You can either use it locally, enabling you to set a different service name per fetch
    const defaultFetch = tracer.fetch();
    const tracingXhr = tracer.xhr({ XMLHttpRequest }); // last param optional, otherwise a global is used
    // b) You can choose to let us handle everything for you
    // This mutates the global fetch and XHR request
    // You can define a span that generates you the span names, this is the default one.
    // If you want to use the default and a third param pass anything that is not a function as the second parameter.
    const getSpanName = ({ url, method, body }) => `${url}-${method}`;
    const tracedFetch = tracer.fetch({ getSpanName, fetch});
    // =====================
    // You can use it in React
    const Link = tracer.component("a")
    // You can use it in React Native
    const Touchable = tracer.component(TouchableHighlight);
    // Every onPress / onClick / onLongPress is wrapped with a function like this
    // If a promise is returned, the span will end once it resolves or rejects
    const clickHandler = function() {
        return fetch("").then(...);
    const tracedClickHandler = tracer.wrap(clickHandler);
    // Usage in the component
    const MyTracedComponent = () => (
        // Either use static additional infos
          buttonLabel: 'ClickMe',
          userId: 42,
        // Or use dynamic ones
        tracingInfo={e => ({
          clickPosition: e.targetX,
    // ====================
    function myVeryLongFunction() {
      tracing.startSpan("Long Function");
      asyncFunction().then(() => {
         tracing.startSpan("Synchronous Bitcoin Mining");
         try {
         } catch(e) {
           // Something went wrong, let's log the error
             miningError: e
      }).finally(() => {


    Thanks goes to these wonderful people (emoji key):

    Daniel Schmidt

    💻 📖 🤔 ⚠️ 🔧 💡

    Daniel Banck

    📖 🤔

    Raphael Randschau


    This project follows the all-contributors specification. Contributions of any kind welcome!


    FOSSA Status


    npm i react-tracing

    DownloadsWeekly Downloads






    Last publish


    • dschmidt