@echoteam/signoz-react 1.0.0

package/LICENSE

@@ -0,0 +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
+SOFTWARE. 

package/README.md

@@ -0,0 +1,285 @@
+# @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)

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+
+interface SignOzConfig {
+    serviceName: string;
+    serviceVersion: string;
+    environment: string;
+    serviceNamespace: string;
+    url: string;
+    headers?: Record<string, string>;
+}
+declare global {
+    interface Window {
+        REACT_APP_SIGNOZ_SERVICE_NAME: string;
+        REACT_APP_SIGNOZ_SERVICE_VERSION: string;
+        REACT_APP_SIGNOZ_ENV: string;
+        REACT_APP_SIGNOZ_SERVICE_NAMESPACE: string;
+        REACT_APP_SIGNOZ_URL: string;
+    }
+}
+/**
+ * Inisialisasi SignOz tracing untuk aplikasi React
+ * @param config - Konfigurasi SignOz (opsional, akan menggunakan environment variables jika tidak disediakan)
+ */
+declare function initializeSignOzTracing(config?: SignOzConfig): void;
+
+interface ErrorFallbackProps {
+    error: Error;
+    resetErrorBoundary: () => void;
+}
+interface ErrorBoundaryProps {
+    /** React children */
+    children: React.ReactNode;
+    /** Custom fallback component */
+    fallback?: React.ComponentType<ErrorFallbackProps>;
+    /** Custom error handler function */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /** Custom reset handler */
+    onReset?: () => void;
+    /** Apakah menampilkan reset button (default: true) */
+    showResetButton?: boolean;
+    /** Custom reset button text */
+    resetButtonText?: string;
+    /** Custom CSS class untuk fallback */
+    fallbackClassName?: string;
+}
+declare const ErrorBoundary: React.FC<ErrorBoundaryProps>;
+
+interface ErrorPageProps {
+    /** Judul halaman error (default: "Oops!") */
+    title?: string;
+    /** Pesan error utama (default: "Terjadi kesalahan yang tidak terduga.") */
+    message?: string;
+    /** Custom render function untuk menampilkan error */
+    renderError?: (error: Error) => React.ReactNode;
+    /** Custom CSS class untuk container */
+    className?: string;
+    /** Apakah menampilkan stack trace (default: false) */
+    showStackTrace?: boolean;
+    /** Custom action button */
+    actionButton?: React.ReactNode;
+}
+declare const ErrorPage: React.FC<ErrorPageProps>;
+
+export { ErrorBoundary, ErrorPage, initializeSignOzTracing };
+export type { ErrorBoundaryProps, ErrorPageProps, SignOzConfig };