Docs
React
Quick Start

React Quick Start

Integrate Traceway into your React application with the @tracewayapp/react package.

Installation

npm install @tracewayapp/react

Setup

Wrap your application with TracewayProvider. It also acts as an error boundary: render-time exceptions thrown anywhere in the tree are captured and reported automatically, then re-thrown so your app behaves exactly as it would without Traceway installed. Session recording is on by default; the last ~30s of DOM events ship with every captured exception:

import { TracewayProvider } from "@tracewayapp/react";
 
function App() {
  return (
    <TracewayProvider connectionString="your-token@https://traceway.example.com/api/report">
      <YourApp />
    </TracewayProvider>
  );
}
 
export default App;

Custom fallback UI? If you want to replace a crashed subtree with a fallback view instead of letting the error propagate, wrap the relevant section in TracewayErrorBoundary. It's still exported for that purpose, but is no longer required for capture.

Seeing every dev-mode error twice? That is React StrictMode, which double-invokes the provider's constructor and creates two SDK clients. Production is unaffected. See A note on StrictMode.

Capture Errors Manually

Use the useTraceway hook in components:

import { useTraceway } from "@tracewayapp/react";
 
function MyComponent() {
  const { captureException } = useTraceway();
 
  async function handleSubmit() {
    try {
      await submitForm();
    } catch (error) {
      captureException(error);
    }
  }
 
  return <button onClick={handleSubmit}>Submit</button>;
}

With Options

<TracewayProvider
  connectionString="your-token@https://traceway.example.com/api/report"
  options={{
    debug: true,
    version: "1.0.0",
  }}
>
  <YourApp />
</TracewayProvider>

Test Your Integration

import { useTraceway } from "@tracewayapp/react";
 
function TestButton() {
  const { captureException } = useTraceway();
 
  return (
    <button onClick={() => captureException(new Error("Test error"))}>
      Send Test Error
    </button>
  );
}

Click the button and check your Traceway dashboard to verify the error appears.

Distributed Tracing

The SDK automatically instruments both fetch and XMLHttpRequest to propagate a traceway-trace-id header on same-origin requests. This links frontend errors to the backend requests that caused them.

Axios needs no setup. It uses XMLHttpRequest in the browser, which the SDK already instruments. Do not register createAxiosInterceptor() in a browser app: it adds a second ID under the same header name, and the combined value is rejected by the backend.

Your backend still has to set the incoming header on its server span as the traceway.distributed_trace_id attribute, or the two sides never join. See the Distributed Tracing guide for the middleware.

Next Steps

LogsTracewayProvider