# react-tracing > A set of tools to add performance tracing to your React or React Native application Latest version **0.1.5** (published 2017-11-25) · MIT license · 0 weekly downloads ## Install ```sh npm install react-tracing pnpm add react-tracing yarn add react-tracing bun add react-tracing ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.5 | | Published | 2017-11-25 | | First published | 2017-10-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 33 | | Author | DanielMSchmidt | | Maintainers | dschmidt | | Keywords | react, tracing, zipkin, performance | ## Links - npm: https://www.npmjs.com/package/react-tracing - Repository: https://github.com/react-tracing/react-tracing - Homepage: https://github.com/react-tracing/react-tracing#readme - Issues: https://github.com/react-tracing/react-tracing/issues - npm.io page: https://npm.io/package/react-tracing ## Dependencies (4) - [zipkin](https://npm.io/package/zipkin.md) ^0.11.1 - [opentracing](https://npm.io/package/opentracing.md) ^0.14.1 - [zipkin-transport-http](https://npm.io/package/zipkin-transport-http.md) ^0.11.1 - [zipkin-javascript-opentracing](https://npm.io/package/zipkin-javascript-opentracing.md) ^1.4.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.5 (latest) — 2017-11-25 - 0.0.1-0 (next) — 2017-10-15 - 0.1.4 — 2017-11-16 - 0.1.3 — 2017-11-15 - 0.1.2 — 2017-11-15 - 0.1.1 — 2017-11-15 - 0.1.0 — 2017-11-15 - 0.0.0 — 2017-10-15 ## README # 📈 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) --- _Source: https://npm.io/package/react-tracing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._