React SDK

import React from "react";
import ReactDOM from "react-dom/client";
import * as Traceback from "@traceback/react";
import App from "./App";

Traceback.init({
  dsn: "https://tb_live_key@ingest.traceback.dev/1",
  integrations: [
    new Traceback.BrowserTracing(),
    new Traceback.Replay(),
  ],
  tracesSampleRate: 0.5,
  replaysOnErrorSampleRate: 1.0,
});

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <Traceback.ErrorBoundary
    fallback={({ error, resetError }) => (
      <div className="error-fallback">
        <h2>Something went wrong</h2>
        <p>{error.message}</p>
        <button onClick={resetError}>Try Again</button>
      </div>
    )}
  >
    <App />
  </Traceback.ErrorBoundary>
);

import { withProfiler } from "@traceback/react";

const HeavyCheckoutTable = ({ items }: { items: any[] }) => {
  return <table>{/* table rows */}</table>;
};

export default withProfiler(HeavyCheckoutTable, { name: "HeavyCheckoutTable" });