@tracewayapp/react 0.2.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +40 -19
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -2,63 +2,84 @@
2
2
 
3
3
  React integration for Traceway. Provides a context provider, error boundary, and hook.
4
4
 
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @tracewayapp/react
9
+ ```
10
+
5
11
  ## Setup
6
12
 
13
+ Wrap your application with `TracewayProvider`:
14
+
7
15
  ```tsx
8
16
  import { TracewayProvider } from "@tracewayapp/react";
9
17
 
10
18
  function App() {
11
19
  return (
12
- <TracewayProvider connectionString="your-token@https://your-server.com/api/report">
13
- <MyApp />
20
+ <TracewayProvider connectionString="your-token@https://traceway.example.com/api/report">
21
+ <YourApp />
14
22
  </TracewayProvider>
15
23
  );
16
24
  }
25
+
26
+ export default App;
17
27
  ```
18
28
 
19
29
  ## Error Boundary
20
30
 
21
- Catches React render errors and reports them to Traceway.
31
+ Wrap components that might throw errors:
22
32
 
23
33
  ```tsx
24
- import { TracewayErrorBoundary } from "@tracewayapp/react";
34
+ import { TracewayProvider, TracewayErrorBoundary } from "@tracewayapp/react";
25
35
 
26
36
  function App() {
27
37
  return (
28
- <TracewayErrorBoundary
29
- fallback={<div>Something went wrong</div>}
30
- onError={(error, errorInfo) => {
31
- console.log("Caught:", error.message);
32
- }}
33
- >
34
- <MyPage />
35
- </TracewayErrorBoundary>
38
+ <TracewayProvider connectionString="your-token@https://traceway.example.com/api/report">
39
+ <TracewayErrorBoundary fallback={<ErrorPage />}>
40
+ <YourApp />
41
+ </TracewayErrorBoundary>
42
+ </TracewayProvider>
36
43
  );
37
44
  }
38
45
  ```
39
46
 
40
47
  ## useTraceway Hook
41
48
 
42
- Access capture methods from any component inside the provider.
49
+ Use the `useTraceway` hook to capture errors manually:
43
50
 
44
51
  ```tsx
45
52
  import { useTraceway } from "@tracewayapp/react";
46
53
 
47
54
  function MyComponent() {
48
- const { captureException, captureMessage } = useTraceway();
55
+ const { captureException } = useTraceway();
49
56
 
50
- function handleClick() {
57
+ async function handleSubmit() {
51
58
  try {
52
- doSomething();
53
- } catch (err) {
54
- captureException(err as Error);
59
+ await submitForm();
60
+ } catch (error) {
61
+ captureException(error);
55
62
  }
56
63
  }
57
64
 
58
- return <button onClick={handleClick}>Do Something</button>;
65
+ return <button onClick={handleSubmit}>Submit</button>;
59
66
  }
60
67
  ```
61
68
 
69
+ ## With Options
70
+
71
+ ```tsx
72
+ <TracewayProvider
73
+ connectionString="your-token@https://traceway.example.com/api/report"
74
+ options={{
75
+ debug: true,
76
+ version: "1.0.0",
77
+ }}
78
+ >
79
+ <YourApp />
80
+ </TracewayProvider>
81
+ ```
82
+
62
83
  ## API
63
84
 
64
85
  ### TracewayProvider
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@tracewayapp/react",
3
- "version": "0.2.0",
3
+ "version": "1.0.0",
4
4
  "description": "Traceway React integration with ErrorBoundary and hooks",
5
- "main": "./dist/index.cjs",
6
- "module": "./dist/index.js",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
7
  "types": "./dist/index.d.ts",
8
8
  "exports": {
9
9
  ".": {
10
10
  "types": "./dist/index.d.ts",
11
- "import": "./dist/index.js",
12
- "require": "./dist/index.cjs"
11
+ "import": "./dist/index.mjs",
12
+ "require": "./dist/index.js"
13
13
  }
14
14
  },
15
15
  "files": [
@@ -23,7 +23,7 @@
23
23
  "dev": "tsup --watch"
24
24
  },
25
25
  "dependencies": {
26
- "@tracewayapp/frontend": "0.2.0"
26
+ "@tracewayapp/frontend": "1.0.0"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "react": ">=18.0.0",