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.

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 fetch to propagate a traceway-trace-id header on same-origin requests. This links frontend errors to the backend requests that caused them — no extra configuration needed.

For Axios users, add the interceptor to your instance:

import axios from "axios";
import { createAxiosInterceptor } from "@tracewayapp/frontend";
 
const api = axios.create({ baseURL: "/api" });
api.interceptors.request.use(createAxiosInterceptor());

See the Distributed Tracing guide for full details.

Next Steps

Quick StartTracewayProvider