# 📈 React Tracing [![Build Status](https://travis-ci.org/react-tracing/react-tracing.svg?branch=master)](https://travis-ci.org/react-tracing/react-tracing) [![Coverage Status](https://coveralls.io/repos/github/react-tracing/react-tracing/badge.svg?branch=master)](https://coveralls.io/github/react-tracing/react-tracing?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/react-tracing/react-tracing.svg)](https://greenkeeper.io/) [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Freact-tracing%2Freact-tracing.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Freact-tracing%2Freact-tracing?ref=badge_shield) ## Goal `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:

## Introduction ### Terminology This section aims to give you a small overview into the language used in [opentracing](http://opentracing.io/documentation/pages/spec) | 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](http://opentracing.io/) 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. * [zipkin-javascript-opentracing](https://github.com/DanielMSchmidt/zipkin-javascript-opentracing) ### 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` ## Usage ```javascript import Tracing from "react-tracing"; const tracer = new Tracing({ serviceName: "Frontend", endpoint: "http://localhost:9111", kind: "client", // default }); // TRACKING HTTP REQUESTS // ====================== // 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 tracer.initGlobalNetworkTracer(); // 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}); // TRACKING USER ACTIONS // ===================== // 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("http://foo.de").then(...); }; const tracedClickHandler = tracer.wrap(clickHandler); // Usage in the component const MyTracedComponent = () => ( ({ clickPosition: e.targetX, })} {...usualProps} > ClickMe ); // ADD YOUR OWN TRACING // ==================== function myVeryLongFunction() { tracing.startSpan("Long Function"); asyncFunction().then(() => { tracing.startSpan("Synchronous Bitcoin Mining"); try { mineBitcoinsAndDonateThem(); } catch(e) { // Something went wrong, let's log the error tracing.log({ miningError: e }); } tracing.finishSpan(); }).finally(() => { tracing.finishSpan(); }); } ``` ## Contributors Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): | [

_{Daniel Schmidt}](http://danielmschmidt.de/)
[💻](https://github.com/react-tracing/react-tracing/commits?author=DanielMSchmidt "Code") [📖](https://github.com/react-tracing/react-tracing/commits?author=DanielMSchmidt "Documentation") [🤔](#ideas-DanielMSchmidt "Ideas, Planning, & Feedback") [⚠️](https://github.com/react-tracing/react-tracing/commits?author=DanielMSchmidt "Tests") [🔧](#tool-DanielMSchmidt "Tools") [💡](#example-DanielMSchmidt "Examples") | [

_{Daniel Banck}](https://dbanck.de)
[📖](https://github.com/react-tracing/react-tracing/commits?author=dbanck "Documentation") [🤔](#ideas-dbanck "Ideas, Planning, & Feedback") | [

_{Raphael Randschau}](https://www.nicolai86.eu)
[🤔](#ideas-nicolai86 "Ideas, Planning, & Feedback") | | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome! ## License [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Freact-tracing%2Freact-tracing.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Freact-tracing%2Freact-tracing?ref=badge_large)

	Stars	Issues	Version	Updated	Created
react-tracing	33	22	0.1.5	6 years ago	7 years ago
tracing-framework	2,649	119	2015.7.15-1	9 years ago	11 years ago
tracing-middleware	7	0	0.2.1	7 years ago	7 years ago
tracking	9,417	227	1.1.3	8 years ago	12 years ago

react-tracing vs tracing-framework vs tracing-middleware vs tracking

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past