@tracewayapp/react 0.2.0

package/README.md

@@ -0,0 +1,89 @@
+# @tracewayapp/react
+
+React integration for Traceway. Provides a context provider, error boundary, and hook.
+
+## Setup
+
+```tsx
+import { TracewayProvider } from "@tracewayapp/react";
+
+function App() {
+  return (
+    <TracewayProvider connectionString="your-token@https://your-server.com/api/report">
+      <MyApp />
+    </TracewayProvider>
+  );
+}
+```
+
+## Error Boundary
+
+Catches React render errors and reports them to Traceway.
+
+```tsx
+import { TracewayErrorBoundary } from "@tracewayapp/react";
+
+function App() {
+  return (
+    <TracewayErrorBoundary
+      fallback={<div>Something went wrong</div>}
+      onError={(error, errorInfo) => {
+        console.log("Caught:", error.message);
+      }}
+    >
+      <MyPage />
+    </TracewayErrorBoundary>
+  );
+}
+```
+
+## useTraceway Hook
+
+Access capture methods from any component inside the provider.
+
+```tsx
+import { useTraceway } from "@tracewayapp/react";
+
+function MyComponent() {
+  const { captureException, captureMessage } = useTraceway();
+
+  function handleClick() {
+    try {
+      doSomething();
+    } catch (err) {
+      captureException(err as Error);
+    }
+  }
+
+  return <button onClick={handleClick}>Do Something</button>;
+}
+```
+
+## API
+
+### TracewayProvider
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `connectionString` | `string` | Traceway connection string (`token@url`) |
+| `options` | `TracewayFrontendOptions` | Optional SDK configuration |
+| `children` | `ReactNode` | Child components |
+
+### TracewayErrorBoundary
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | `ReactNode` | Child components to wrap |
+| `fallback` | `ReactNode` | UI to render when an error is caught |
+| `onError` | `(error, errorInfo) => void` | Optional callback on error |
+
+### useTraceway()
+
+Returns `{ captureException, captureExceptionWithAttributes, captureMessage }`.
+
+Throws if used outside a `TracewayProvider`.
+
+## Requirements
+
+- React >= 18
+- `@tracewayapp/frontend` (installed automatically as dependency)

package/dist/index.d.mts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { Component } from 'react';
+import * as traceway from '@tracewayapp/frontend';
+import { TracewayFrontendOptions } from '@tracewayapp/frontend';
+
+interface TracewayContextValue {
+    captureException: typeof traceway.captureException;
+    captureExceptionWithAttributes: typeof traceway.captureExceptionWithAttributes;
+    captureMessage: typeof traceway.captureMessage;
+}
+declare const TracewayContext: React.Context<TracewayContextValue | null>;
+interface TracewayProviderProps {
+    connectionString: string;
+    options?: TracewayFrontendOptions;
+    children: React.ReactNode;
+}
+declare function TracewayProvider({ connectionString, options, children, }: TracewayProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useTraceway(): TracewayContextValue;
+
+interface TracewayErrorBoundaryProps {
+    children: React.ReactNode;
+    fallback: React.ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface TracewayErrorBoundaryState {
+    hasError: boolean;
+}
+declare class TracewayErrorBoundary extends Component<TracewayErrorBoundaryProps, TracewayErrorBoundaryState> {
+    constructor(props: TracewayErrorBoundaryProps);
+    static getDerivedStateFromError(): TracewayErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+
+export { TracewayContext, type TracewayContextValue, TracewayErrorBoundary, type TracewayErrorBoundaryProps, TracewayProvider, type TracewayProviderProps, useTraceway };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { Component } from 'react';
+import * as traceway from '@tracewayapp/frontend';
+import { TracewayFrontendOptions } from '@tracewayapp/frontend';
+
+interface TracewayContextValue {
+    captureException: typeof traceway.captureException;
+    captureExceptionWithAttributes: typeof traceway.captureExceptionWithAttributes;
+    captureMessage: typeof traceway.captureMessage;
+}
+declare const TracewayContext: React.Context<TracewayContextValue | null>;
+interface TracewayProviderProps {
+    connectionString: string;
+    options?: TracewayFrontendOptions;
+    children: React.ReactNode;
+}
+declare function TracewayProvider({ connectionString, options, children, }: TracewayProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useTraceway(): TracewayContextValue;
+
+interface TracewayErrorBoundaryProps {
+    children: React.ReactNode;
+    fallback: React.ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface TracewayErrorBoundaryState {
+    hasError: boolean;
+}
+declare class TracewayErrorBoundary extends Component<TracewayErrorBoundaryProps, TracewayErrorBoundaryState> {
+    constructor(props: TracewayErrorBoundaryProps);
+    static getDerivedStateFromError(): TracewayErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+
+export { TracewayContext, type TracewayContextValue, TracewayErrorBoundary, type TracewayErrorBoundaryProps, TracewayProvider, type TracewayProviderProps, useTraceway };

package/dist/index.js

@@ -0,0 +1,103 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TracewayContext: () => TracewayContext,
+  TracewayErrorBoundary: () => TracewayErrorBoundary,
+  TracewayProvider: () => TracewayProvider,
+  useTraceway: () => useTraceway
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var traceway = __toESM(require("@tracewayapp/frontend"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var TracewayContext = (0, import_react.createContext)(null);
+function TracewayProvider({
+  connectionString,
+  options,
+  children
+}) {
+  (0, import_react.useEffect)(() => {
+    traceway.init(connectionString, options);
+  }, [connectionString]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      captureException: traceway.captureException,
+      captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,
+      captureMessage: traceway.captureMessage
+    }),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TracewayContext.Provider, { value, children });
+}
+
+// src/use-traceway.ts
+var import_react2 = require("react");
+function useTraceway() {
+  const context = (0, import_react2.useContext)(TracewayContext);
+  if (context === null) {
+    throw new Error("useTraceway must be used within a TracewayProvider");
+  }
+  return context;
+}
+
+// src/error-boundary.tsx
+var import_react3 = require("react");
+var traceway2 = __toESM(require("@tracewayapp/frontend"));
+var TracewayErrorBoundary = class extends import_react3.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    traceway2.captureException(error);
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TracewayContext,
+  TracewayErrorBoundary,
+  TracewayProvider,
+  useTraceway
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/use-traceway.ts","../src/error-boundary.tsx"],"sourcesContent":["export { TracewayProvider, TracewayContext } from \"./provider.js\";\nexport type {\n  TracewayProviderProps,\n  TracewayContextValue,\n} from \"./provider.js\";\nexport { useTraceway } from \"./use-traceway.js\";\nexport {\n  TracewayErrorBoundary,\n} from \"./error-boundary.js\";\nexport type { TracewayErrorBoundaryProps } from \"./error-boundary.js\";\n","import React, { createContext, useEffect, useMemo } from \"react\";\nimport * as traceway from \"@tracewayapp/frontend\";\nimport type { TracewayFrontendOptions } from \"@tracewayapp/frontend\";\n\nexport interface TracewayContextValue {\n  captureException: typeof traceway.captureException;\n  captureExceptionWithAttributes: typeof traceway.captureExceptionWithAttributes;\n  captureMessage: typeof traceway.captureMessage;\n}\n\nexport const TracewayContext = createContext<TracewayContextValue | null>(null);\n\nexport interface TracewayProviderProps {\n  connectionString: string;\n  options?: TracewayFrontendOptions;\n  children: React.ReactNode;\n}\n\nexport function TracewayProvider({\n  connectionString,\n  options,\n  children,\n}: TracewayProviderProps) {\n  useEffect(() => {\n    traceway.init(connectionString, options);\n  }, [connectionString]);\n\n  const value = useMemo<TracewayContextValue>(\n    () => ({\n      captureException: traceway.captureException,\n      captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,\n      captureMessage: traceway.captureMessage,\n    }),\n    [],\n  );\n\n  return (\n    <TracewayContext.Provider value={value}>{children}</TracewayContext.Provider>\n  );\n}\n","import { useContext } from \"react\";\nimport { TracewayContext } from \"./provider.js\";\nimport type { TracewayContextValue } from \"./provider.js\";\n\nexport function useTraceway(): TracewayContextValue {\n  const context = useContext(TracewayContext);\n  if (context === null) {\n    throw new Error(\"useTraceway must be used within a TracewayProvider\");\n  }\n  return context;\n}\n","import React, { Component } from \"react\";\nimport * as traceway from \"@tracewayapp/frontend\";\n\nexport interface TracewayErrorBoundaryProps {\n  children: React.ReactNode;\n  fallback: React.ReactNode;\n  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n}\n\ninterface TracewayErrorBoundaryState {\n  hasError: boolean;\n}\n\nexport class TracewayErrorBoundary extends Component<\n  TracewayErrorBoundaryProps,\n  TracewayErrorBoundaryState\n> {\n  constructor(props: TracewayErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(): TracewayErrorBoundaryState {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    traceway.captureException(error);\n    this.props.onError?.(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback;\n    }\n    return this.props.children;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyD;AACzD,eAA0B;AAoCtB;AA3BG,IAAM,sBAAkB,4BAA2C,IAAI;AAQvE,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,8BAAU,MAAM;AACd,IAAS,cAAK,kBAAkB,OAAO;AAAA,EACzC,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL,kBAA2B;AAAA,MAC3B,gCAAyC;AAAA,MACzC,gBAAyB;AAAA,IAC3B;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SACE,4CAAC,gBAAgB,UAAhB,EAAyB,OAAe,UAAS;AAEtD;;;ACvCA,IAAAA,gBAA2B;AAIpB,SAAS,cAAoC;AAClD,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ACVA,IAAAC,gBAAiC;AACjC,IAAAC,YAA0B;AAYnB,IAAM,wBAAN,cAAoC,wBAGzC;AAAA,EACA,YAAY,OAAmC;AAC7C,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,UAAU,MAAM;AAAA,EACjC;AAAA,EAEA,OAAO,2BAAuD;AAC5D,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,kBAAkB,OAAc,WAAkC;AAChE,IAAS,2BAAiB,KAAK;AAC/B,SAAK,MAAM,UAAU,OAAO,SAAS;AAAA,EACvC;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AACvB,aAAO,KAAK,MAAM;AAAA,IACpB;AACA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":["import_react","import_react","traceway"]}

package/dist/index.mjs

@@ -0,0 +1,63 @@
+// src/provider.tsx
+import { createContext, useEffect, useMemo } from "react";
+import * as traceway from "@tracewayapp/frontend";
+import { jsx } from "react/jsx-runtime";
+var TracewayContext = createContext(null);
+function TracewayProvider({
+  connectionString,
+  options,
+  children
+}) {
+  useEffect(() => {
+    traceway.init(connectionString, options);
+  }, [connectionString]);
+  const value = useMemo(
+    () => ({
+      captureException: traceway.captureException,
+      captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,
+      captureMessage: traceway.captureMessage
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(TracewayContext.Provider, { value, children });
+}
+
+// src/use-traceway.ts
+import { useContext } from "react";
+function useTraceway() {
+  const context = useContext(TracewayContext);
+  if (context === null) {
+    throw new Error("useTraceway must be used within a TracewayProvider");
+  }
+  return context;
+}
+
+// src/error-boundary.tsx
+import { Component } from "react";
+import * as traceway2 from "@tracewayapp/frontend";
+var TracewayErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    traceway2.captureException(error);
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
+export {
+  TracewayContext,
+  TracewayErrorBoundary,
+  TracewayProvider,
+  useTraceway
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx","../src/use-traceway.ts","../src/error-boundary.tsx"],"sourcesContent":["import React, { createContext, useEffect, useMemo } from \"react\";\nimport * as traceway from \"@tracewayapp/frontend\";\nimport type { TracewayFrontendOptions } from \"@tracewayapp/frontend\";\n\nexport interface TracewayContextValue {\n  captureException: typeof traceway.captureException;\n  captureExceptionWithAttributes: typeof traceway.captureExceptionWithAttributes;\n  captureMessage: typeof traceway.captureMessage;\n}\n\nexport const TracewayContext = createContext<TracewayContextValue | null>(null);\n\nexport interface TracewayProviderProps {\n  connectionString: string;\n  options?: TracewayFrontendOptions;\n  children: React.ReactNode;\n}\n\nexport function TracewayProvider({\n  connectionString,\n  options,\n  children,\n}: TracewayProviderProps) {\n  useEffect(() => {\n    traceway.init(connectionString, options);\n  }, [connectionString]);\n\n  const value = useMemo<TracewayContextValue>(\n    () => ({\n      captureException: traceway.captureException,\n      captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,\n      captureMessage: traceway.captureMessage,\n    }),\n    [],\n  );\n\n  return (\n    <TracewayContext.Provider value={value}>{children}</TracewayContext.Provider>\n  );\n}\n","import { useContext } from \"react\";\nimport { TracewayContext } from \"./provider.js\";\nimport type { TracewayContextValue } from \"./provider.js\";\n\nexport function useTraceway(): TracewayContextValue {\n  const context = useContext(TracewayContext);\n  if (context === null) {\n    throw new Error(\"useTraceway must be used within a TracewayProvider\");\n  }\n  return context;\n}\n","import React, { Component } from \"react\";\nimport * as traceway from \"@tracewayapp/frontend\";\n\nexport interface TracewayErrorBoundaryProps {\n  children: React.ReactNode;\n  fallback: React.ReactNode;\n  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n}\n\ninterface TracewayErrorBoundaryState {\n  hasError: boolean;\n}\n\nexport class TracewayErrorBoundary extends Component<\n  TracewayErrorBoundaryProps,\n  TracewayErrorBoundaryState\n> {\n  constructor(props: TracewayErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(): TracewayErrorBoundaryState {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    traceway.captureException(error);\n    this.props.onError?.(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback;\n    }\n    return this.props.children;\n  }\n}\n"],"mappings":";AAAA,SAAgB,eAAe,WAAW,eAAe;AACzD,YAAY,cAAc;AAoCtB;AA3BG,IAAM,kBAAkB,cAA2C,IAAI;AAQvE,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,YAAU,MAAM;AACd,IAAS,cAAK,kBAAkB,OAAO;AAAA,EACzC,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,kBAA2B;AAAA,MAC3B,gCAAyC;AAAA,MACzC,gBAAyB;AAAA,IAC3B;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAe,UAAS;AAEtD;;;ACvCA,SAAS,kBAAkB;AAIpB,SAAS,cAAoC;AAClD,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ACVA,SAAgB,iBAAiB;AACjC,YAAYA,eAAc;AAYnB,IAAM,wBAAN,cAAoC,UAGzC;AAAA,EACA,YAAY,OAAmC;AAC7C,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,UAAU,MAAM;AAAA,EACjC;AAAA,EAEA,OAAO,2BAAuD;AAC5D,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,kBAAkB,OAAc,WAAkC;AAChE,IAAS,2BAAiB,KAAK;AAC/B,SAAK,MAAM,UAAU,OAAO,SAAS;AAAA,EACvC;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AACvB,aAAO,KAAK,MAAM;AAAA,IACpB;AACA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":["traceway"]}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@tracewayapp/react",
+  "version": "0.2.0",
+  "description": "Traceway React integration with ErrorBoundary and hooks",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@tracewayapp/frontend": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}