@inso_web/els-react 0.1.1 → 0.3.0

package/examples/vite-react/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "els-react-vite-example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@inso_web/els-client": "^0.2.0",
+    "@inso_web/els-react": "^0.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  }
+}

package/examples/vite-react/src/App.tsx

@@ -0,0 +1,19 @@
+import { ELSErrorBoundary } from '@inso_web/els-react';
+import ErrorTrigger from './ErrorTrigger';
+
+export default function App() {
+  return (
+    <main>
+      <h1>@inso_web/els-react — Vite example</h1>
+      <p>
+        Этот пример демонстрирует <code>ELSProvider</code>,{' '}
+        <code>useErrorReporter</code> и <code>ELSErrorBoundary</code>.
+      </p>
+      <ELSErrorBoundary
+        fallback={<div className="err">Что-то сломалось (поймал ELSErrorBoundary)</div>}
+      >
+        <ErrorTrigger />
+      </ELSErrorBoundary>
+    </main>
+  );
+}

package/examples/vite-react/src/ErrorTrigger.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { useErrorReporter } from '@inso_web/els-react';
+
+export default function ErrorTrigger() {
+  const [crash, setCrash] = useState(false);
+  const report = useErrorReporter();
+
+  if (crash) throw new Error('Manual crash for ELSErrorBoundary demo');
+
+  return (
+    <div className="card">
+      <button
+        onClick={() => {
+          try {
+            throw new Error('Manual error from useErrorReporter');
+          } catch (e) {
+            report(e as Error);
+            alert('Sent to ELS!');
+          }
+        }}
+      >
+        Send error via useErrorReporter()
+      </button>
+      <button onClick={() => setCrash(true)}>
+        Crash component (caught by ELSErrorBoundary)
+      </button>
+    </div>
+  );
+}

package/examples/vite-react/src/main.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ELSProvider } from '@inso_web/els-react';
+import App from './App';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ELSProvider
+      config={{
+        endpoint: import.meta.env.VITE_ELS_URL || 'https://api.insoweb.ru/els',
+        apiKey: import.meta.env.VITE_ELS_API_KEY || 'els_live_xxxxxxxx',
+        appSlug: 'examples',
+        deploymentEnv: 'DEV',
+        serviceName: 'vite-react-example',
+      }}
+    >
+      <App />
+    </ELSProvider>
+  </React.StrictMode>,
+);

package/examples/vite-react/src/styles.css

@@ -0,0 +1,40 @@
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  max-width: 720px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+  color: #222;
+}
+
+h1 {
+  font-size: 1.6rem;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  cursor: pointer;
+  border: 1px solid #888;
+  background: #fff;
+  border-radius: 4px;
+}
+
+button:hover {
+  background: #f0f0f0;
+}
+
+.card {
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.err {
+  background: #ffecec;
+  border: 1px solid #f88;
+  padding: 1rem;
+  border-radius: 6px;
+  color: #900;
+}

package/examples/vite-react/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/examples/vite-react/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/vite-react/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inso_web/els-react",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "React‑обёртка для Error Logs Service (ELS): Provider, hooks, ErrorBoundary и HOC для автоматического репорта ошибок компонентов.",
   "homepage": "https://api.insoweb.ru/els",
   "author": "INSOWEB",
@@ -17,6 +17,7 @@
   },
   "files": [
     "dist",
+    "examples",
     "README.md",
     "LICENSE"
   ],
@@ -49,7 +50,7 @@
     "react": ">=17.0.0"
   },
   "dependencies": {
-    "@inso_web/els-client": "^0.2.1"
+    "@inso_web/els-client": "^0.3.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",