@echoteam/signoz-react 1.0.0 → 1.0.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 CODR Team
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2024 CODR Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE. 

package/README.md

@@ -1,285 +1,286 @@
-# @codr/signoz-react
-
-Library React untuk monitoring dan tracing aplikasi menggunakan OpenTelemetry dan SignOz.
-
-## 🚀 Fitur
-
-- **Tracing Otomatis**: Integrasi OpenTelemetry untuk tracing HTTP requests, fetch, dan XMLHttpRequest
-- **Error Boundary**: Komponen React untuk menangkap dan melaporkan error dengan tracing
-- **Error Page**: Halaman error untuk React Router dengan integrasi tracing
-- **TypeScript Support**: Dukungan penuh untuk TypeScript
-- **Zero Configuration**: Mudah digunakan dengan environment variables
-- **Customizable**: ErrorPage dan ErrorBoundary dapat dikustomisasi sesuai kebutuhan
-
-## 📦 Instalasi
-
-```bash
-yarn add @codr/signoz-react
-```
-
-## 🔧 Konfigurasi
-
-### Environment Variables
-
-Tambahkan environment variables berikut ke file `.env`:
-
-```env
-REACT_APP_SIGNOZ_SERVICE_NAME=my-react-app
-REACT_APP_SIGNOZ_SERVICE_VERSION=1.0.0
-REACT_APP_SIGNOZ_ENV=production
-REACT_APP_SIGNOZ_SERVICE_NAMESPACE=frontend
-REACT_APP_SIGNOZ_URL=https://your-signoz-instance.com/v1/traces
-```
-
-### Inisialisasi
-
-```typescript
-import { initializeSignOzTracing } from '@codr/signoz-react';
-
-// Inisialisasi dengan environment variables
-initializeSignOzTracing();
-
-// Atau dengan konfigurasi manual
-initializeSignOzTracing({
-  serviceName: 'my-react-app',
-  serviceVersion: '1.0.0',
-  environment: 'production',
-  serviceNamespace: 'frontend',
-  url: 'https://your-signoz-instance.com/v1/traces',
-  headers: {
-    'Authorization': 'Bearer your-token'
-  }
-});
-```
-
-## 🎯 Penggunaan
-
-### Error Boundary
-
-#### Penggunaan Dasar
-```tsx
-import { ErrorBoundary } from '@codr/signoz-react';
-
-function App() {
-  return (
-    <ErrorBoundary>
-      <YourApp />
-    </ErrorBoundary>
-  );
-}
-```
-
-#### Error Boundary dengan Kustomisasi
-```tsx
-import { ErrorBoundary, ErrorBoundaryProps } from '@codr/signoz-react';
-
-// Custom fallback component
-const CustomErrorFallback: React.FC<{ error: Error; resetErrorBoundary: () => void }> = ({ 
-  error, 
-  resetErrorBoundary 
-}) => (
-  <div className="custom-error">
-    <h2>Terjadi Kesalahan!</h2>
-    <p>{error.message}</p>
-    <button onClick={resetErrorBoundary}>Coba Lagi</button>
-  </div>
-);
-
-function App() {
-  const handleError = (error: Error, errorInfo: React.ErrorInfo) => {
-    console.log('Error caught:', error);
-    // Kirim ke service lain jika diperlukan
-  };
-
-  return (
-    <ErrorBoundary
-      fallback={CustomErrorFallback}
-      onError={handleError}
-      onReset={() => console.log('Error boundary reset')}
-      fallbackClassName="my-error-boundary"
-    >
-      <YourApp />
-    </ErrorBoundary>
-  );
-}
-```
-
-### Error Page untuk React Router
-
-#### Penggunaan Dasar
-```tsx
-import { ErrorPage } from '@codr/signoz-react';
-import { createBrowserRouter } from 'react-router-dom';
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Root />,
-    errorElement: <ErrorPage />,
-  },
-]);
-```
-
-#### Error Page dengan Kustomisasi
-```tsx
-import { ErrorPage, ErrorPageProps } from '@codr/signoz-react';
-
-// Custom error page
-const CustomErrorPage: React.FC<ErrorPageProps> = (props) => (
-  <ErrorPage
-    title="Halaman Tidak Ditemukan"
-    message="Maaf, halaman yang Anda cari tidak tersedia."
-    showStackTrace={process.env.NODE_ENV === 'development'}
-    actionButton={
-      <button onClick={() => window.history.back()}>
-        Kembali ke Halaman Sebelumnya
-      </button>
-    }
-    className="custom-error-page"
-  />
-);
-
-// Atau dengan custom render function
-const CustomErrorPageWithRender: React.FC<ErrorPageProps> = () => (
-  <ErrorPage
-    renderError={(error) => (
-      <div className="my-custom-error">
-        <h1>🚨 Error!</h1>
-        <p>Kode Error: {error.name}</p>
-        <p>Pesan: {error.message}</p>
-        <button onClick={() => window.location.href = '/'}>
-          Kembali ke Beranda
-        </button>
-      </div>
-    )}
-  />
-);
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Root />,
-    errorElement: <CustomErrorPage />,
-  },
-]);
-```
-
-### Tracing Manual
-
-```typescript
-import { trace } from '@opentelemetry/api';
-
-const tracer = trace.getTracer('my-service');
-const span = tracer.startSpan('my-operation');
-
-try {
-  // Lakukan operasi
-  span.setAttribute('operation.type', 'database-query');
-  span.setAttribute('operation.result', 'success');
-} catch (error) {
-  span.recordException(error);
-  span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
-} finally {
-  span.end();
-}
-```
-
-## 📋 API Reference
-
-### `initializeSignOzTracing(config?)`
-
-Inisialisasi SignOz tracing untuk aplikasi React.
-
-**Parameter:**
-- `config` (opsional): Konfigurasi SignOz
-  - `serviceName`: Nama layanan
-  - `serviceVersion`: Versi layanan
-  - `environment`: Environment (production, staging, development)
-  - `serviceNamespace`: Namespace layanan
-  - `url`: URL endpoint SignOz
-  - `headers`: Headers tambahan untuk request
-
-### `ErrorBoundary`
-
-Komponen React untuk menangkap error dan melaporkan ke SignOz.
-
-**Props:**
-- `children`: React children
-- `fallback`: Custom fallback component
-- `onError`: Custom error handler function
-- `onReset`: Custom reset handler
-- `showResetButton`: Apakah menampilkan reset button (default: true)
-- `resetButtonText`: Custom reset button text
-- `fallbackClassName`: Custom CSS class untuk fallback
-
-### `ErrorPage`
-
-Komponen halaman error untuk React Router.
-
-**Props:**
-- `title`: Judul halaman error (default: "Oops!")
-- `message`: Pesan error utama (default: "Terjadi kesalahan yang tidak terduga.")
-- `renderError`: Custom render function untuk menampilkan error
-- `className`: Custom CSS class untuk container
-- `showStackTrace`: Apakah menampilkan stack trace (default: false)
-- `actionButton`: Custom action button
-
-## 🔍 Monitoring
-
-Setelah setup, Anda dapat melihat traces di dashboard SignOz:
-
-1. **Service Overview**: Melihat performa layanan secara keseluruhan
-2. **Traces**: Melihat detail traces untuk setiap request
-3. **Errors**: Melihat error yang terjadi dengan stack trace
-4. **Metrics**: Melihat metrics performa aplikasi
-
-## 🛠️ Development
-
-### Setup Development
-
-```bash
-# Clone repository
-git clone https://gitlab.echoteam.tech/codr/package/signoz-react-js.git
-cd signoz-react-js
-
-# Install dependencies
-yarn install
-
-# Build package
-yarn build
-
-# Development mode
-yarn dev
-```
-
-### Scripts
-
-- `yarn build`: Build package untuk production
-- `yarn dev`: Build dalam mode development dengan watch
-- `yarn test`: Jalankan tests
-- `yarn lint`: Lint kode
-- `yarn format`: Format kode dengan Prettier
-
-## 📄 License
-
-MIT License - lihat file [LICENSE](LICENSE) untuk detail.
-
-## 🤝 Contributing
-
-1. Fork repository
-2. Buat feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit perubahan (`git commit -m 'Add amazing feature'`)
-4. Push ke branch (`git push origin feature/amazing-feature`)
-5. Buat Pull Request
-
-## 📞 Support
-
-- **Issues**: [GitLab Issues](https://gitlab.echoteam.tech/codr/package/signoz-react-js/-/issues)
-- **Email**: dev@codr.id
-- **Documentation**: [GitLab Wiki](https://gitlab.echoteam.tech/codr/package/signoz-react-js/-/wikis)
-
-## 🔗 Links
-
-- [SignOz Documentation](https://signoz.io/docs/)
-- [OpenTelemetry Documentation](https://opentelemetry.io/docs/)
-- [React Error Boundary](https://reactjs.org/docs/error-boundaries.html)
+# @echoteam/signoz-react
+
+Library React untuk monitoring dan tracing aplikasi menggunakan OpenTelemetry dan SignOz.
+
+## 🚀 Fitur
+
+- **Tracing Otomatis**: Integrasi OpenTelemetry untuk tracing HTTP requests, fetch, dan XMLHttpRequest
+- **Error Boundary**: Komponen React untuk menangkap dan melaporkan error dengan tracing
+- **Error Page**: Halaman error untuk React Router dengan integrasi tracing
+- **TypeScript Support**: Dukungan penuh untuk TypeScript
+- **Zero Configuration**: Mudah digunakan dengan environment variables
+- **Customizable**: ErrorPage dan ErrorBoundary dapat dikustomisasi sesuai kebutuhan
+
+## 📦 Instalasi
+
+```bash
+yarn add @echoteam/signoz-react
+npm install @echoteam/signoz-react
+```
+
+## 🔧 Konfigurasi
+
+### Environment Variables
+
+Tambahkan environment variables berikut ke file `.env`:
+
+```env
+REACT_APP_SIGNOZ_SERVICE_NAME=my-react-app
+REACT_APP_SIGNOZ_SERVICE_VERSION=1.0.0
+REACT_APP_SIGNOZ_ENV=production
+REACT_APP_SIGNOZ_SERVICE_NAMESPACE=frontend
+REACT_APP_SIGNOZ_URL=https://your-signoz-instance.com/v1/traces
+```
+
+### Inisialisasi
+
+```typescript
+import { initializeSignOzTracing } from '@echoteam/signoz-react';
+
+// Inisialisasi dengan environment variables
+initializeSignOzTracing();
+
+// Atau dengan konfigurasi manual
+initializeSignOzTracing({
+  serviceName: 'my-react-app',
+  serviceVersion: '1.0.0',
+  environment: 'production',
+  serviceNamespace: 'frontend',
+  url: 'https://your-signoz-instance.com/v1/traces',
+  headers: {
+    'Authorization': 'Bearer your-token'
+  }
+});
+```
+
+## 🎯 Penggunaan
+
+### Error Boundary
+
+#### Penggunaan Dasar
+```tsx
+import { ErrorBoundary } from '@echoteam/signoz-react';
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <YourApp />
+    </ErrorBoundary>
+  );
+}
+```
+
+#### Error Boundary dengan Kustomisasi
+```tsx
+import { ErrorBoundary, ErrorBoundaryProps } from '@echoteam/signoz-react';
+
+// Custom fallback component
+const CustomErrorFallback: React.FC<{ error: Error; resetErrorBoundary: () => void }> = ({ 
+  error, 
+  resetErrorBoundary 
+}) => (
+  <div className="custom-error">
+    <h2>Terjadi Kesalahan!</h2>
+    <p>{error.message}</p>
+    <button onClick={resetErrorBoundary}>Coba Lagi</button>
+  </div>
+);
+
+function App() {
+  const handleError = (error: Error, errorInfo: React.ErrorInfo) => {
+    console.log('Error caught:', error);
+    // Kirim ke service lain jika diperlukan
+  };
+
+  return (
+    <ErrorBoundary
+      fallback={CustomErrorFallback}
+      onError={handleError}
+      onReset={() => console.log('Error boundary reset')}
+      fallbackClassName="my-error-boundary"
+    >
+      <YourApp />
+    </ErrorBoundary>
+  );
+}
+```
+
+### Error Page untuk React Router
+
+#### Penggunaan Dasar
+```tsx
+import { ErrorPage } from '@echoteam/signoz-react';
+import { createBrowserRouter } from 'react-router-dom';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    errorElement: <ErrorPage />,
+  },
+]);
+```
+
+#### Error Page dengan Kustomisasi
+```tsx
+import { ErrorPage, ErrorPageProps } from '@echoteam/signoz-react';
+
+// Custom error page
+const CustomErrorPage: React.FC<ErrorPageProps> = (props) => (
+  <ErrorPage
+    title="Halaman Tidak Ditemukan"
+    message="Maaf, halaman yang Anda cari tidak tersedia."
+    showStackTrace={process.env.NODE_ENV === 'development'}
+    actionButton={
+      <button onClick={() => window.history.back()}>
+        Kembali ke Halaman Sebelumnya
+      </button>
+    }
+    className="custom-error-page"
+  />
+);
+
+// Atau dengan custom render function
+const CustomErrorPageWithRender: React.FC<ErrorPageProps> = () => (
+  <ErrorPage
+    renderError={(error) => (
+      <div className="my-custom-error">
+        <h1>🚨 Error!</h1>
+        <p>Kode Error: {error.name}</p>
+        <p>Pesan: {error.message}</p>
+        <button onClick={() => window.location.href = '/'}>
+          Kembali ke Beranda
+        </button>
+      </div>
+    )}
+  />
+);
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    errorElement: <CustomErrorPage />,
+  },
+]);
+```
+
+### Tracing Manual
+
+```typescript
+import { trace } from '@opentelemetry/api';
+
+const tracer = trace.getTracer('my-service');
+const span = tracer.startSpan('my-operation');
+
+try {
+  // Lakukan operasi
+  span.setAttribute('operation.type', 'database-query');
+  span.setAttribute('operation.result', 'success');
+} catch (error) {
+  span.recordException(error);
+  span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
+} finally {
+  span.end();
+}
+```
+
+## 📋 API Reference
+
+### `initializeSignOzTracing(config?)`
+
+Inisialisasi SignOz tracing untuk aplikasi React.
+
+**Parameter:**
+- `config` (opsional): Konfigurasi SignOz
+  - `serviceName`: Nama layanan
+  - `serviceVersion`: Versi layanan
+  - `environment`: Environment (production, staging, development)
+  - `serviceNamespace`: Namespace layanan
+  - `url`: URL endpoint SignOz
+  - `headers`: Headers tambahan untuk request
+
+### `ErrorBoundary`
+
+Komponen React untuk menangkap error dan melaporkan ke SignOz.
+
+**Props:**
+- `children`: React children
+- `fallback`: Custom fallback component
+- `onError`: Custom error handler function
+- `onReset`: Custom reset handler
+- `showResetButton`: Apakah menampilkan reset button (default: true)
+- `resetButtonText`: Custom reset button text
+- `fallbackClassName`: Custom CSS class untuk fallback
+
+### `ErrorPage`
+
+Komponen halaman error untuk React Router.
+
+**Props:**
+- `title`: Judul halaman error (default: "Oops!")
+- `message`: Pesan error utama (default: "Terjadi kesalahan yang tidak terduga.")
+- `renderError`: Custom render function untuk menampilkan error
+- `className`: Custom CSS class untuk container
+- `showStackTrace`: Apakah menampilkan stack trace (default: false)
+- `actionButton`: Custom action button
+
+## 🔍 Monitoring
+
+Setelah setup, Anda dapat melihat traces di dashboard SignOz:
+
+1. **Service Overview**: Melihat performa layanan secara keseluruhan
+2. **Traces**: Melihat detail traces untuk setiap request
+3. **Errors**: Melihat error yang terjadi dengan stack trace
+4. **Metrics**: Melihat metrics performa aplikasi
+
+## 🛠️ Development
+
+### Setup Development
+
+```bash
+# Clone repository
+git clone https://gitlab.echoteam.tech/codr/package/signoz-react-js.git
+cd signoz-react-js
+
+# Install dependencies
+yarn install
+
+# Build package
+yarn build
+
+# Development mode
+yarn dev
+```
+### Scripts
+
+- `yarn build`: Build package untuk production
+- `yarn dev`: Build dalam mode development dengan watch
+- `yarn test`: Jalankan tests
+- `yarn lint`: Lint kode
+- `yarn format`: Format kode dengan Prettier
+
+## 📄 License
+
+MIT License - lihat file [LICENSE](LICENSE) untuk detail.
+
+## 🤝 Contributing
+
+1. Fork repository
+2. Buat feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit perubahan (`git commit -m 'Add amazing feature'`)
+4. Push ke branch (`git push origin feature/amazing-feature`)
+5. Buat Pull Request
+
+## 📞 Support
+
+- **Issues**: [GitLab Issues](https://gitlab.echoteam.tech/codr/package/signoz-react-js/-/issues)
+- **Email**: dev@codr.id
+- **Documentation**: [GitLab Wiki](https://gitlab.echoteam.tech/codr/package/signoz-react-js/-/wikis)
+
+## 🔗 Links
+
+- [SignOz Documentation](https://signoz.io/docs/)
+- [OpenTelemetry Documentation](https://opentelemetry.io/docs/)
+- [React Error Boundary](https://reactjs.org/docs/error-boundaries.html)
+