feat: add telemetry configuration option

Add a `telemetry` config option to Porto.create() that allows developers
to disable Sentry error tracking in the Porto dialog and authentication
interfaces.

Changes:
- Add `telemetry?: boolean` to Porto.Config (defaults to true)
- Pass telemetry setting through dialog mode to all dialog types
- Update dialog and id apps to respect telemetry preference via localStorage
- Make React error handlers conditional based on Sentry initialization
- Update documentation with telemetry parameter

Usage:
```ts
Porto.create({ telemetry: false })
```

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: TimDaub

apps/dialog/src/main.tsx

@@ -14,24 +14,40 @@ import * as Wagmi from '~/lib/Wagmi.ts'
 import { App } from './App.js'
 import './styles.css'
 
+// Initialize Sentry conditionally based on telemetry setting
+let sentryInitialized = false
+
 if (import.meta.env.PROD) {
-  Sentry.init({
-    dsn: 'https://457697aad11614a3f667c8e61f6b9e20@o4509056062849024.ingest.us.sentry.io/4509080285741056',
-    enabled: document.referrer
-      ? TrustedHosts.hostnames.includes(new URL(document.referrer).hostname)
-      : true,
-    environment: Env.get(),
-    integrations: [
-      Sentry.replayIntegration(),
-      Sentry.tanstackRouterBrowserTracingIntegration(Router.router),
-    ],
-    replaysOnErrorSampleRate: 1.0,
-    replaysSessionSampleRate: 0.1,
-  })
+  // Check localStorage for telemetry preference
+  const telemetryDisabled = localStorage.getItem('__porto_telemetry_disabled') === 'true'
+
+  if (!telemetryDisabled) {
+    Sentry.init({
+      dsn: 'https://457697aad11614a3f667c8e61f6b9e20@o4509056062849024.ingest.us.sentry.io/4509080285741056',
+      enabled: document.referrer
+        ? TrustedHosts.hostnames.includes(new URL(document.referrer).hostname)
+        : true,
+      environment: Env.get(),
+      integrations: [
+        Sentry.replayIntegration(),
+        Sentry.tanstackRouterBrowserTracingIntegration(Router.router),
+      ],
+      replaysOnErrorSampleRate: 1.0,
+      replaysSessionSampleRate: 0.1,
+    })
+    sentryInitialized = true
+  }
 }
 
 const offInitialized = Events.onInitialized(porto, async (payload, event) => {
-  const { chainIds, mode, referrer, theme } = payload
+  const { chainIds, mode, referrer, telemetry, theme } = payload
+
+  // Store telemetry preference in localStorage
+  if (telemetry === false) {
+    localStorage.setItem('__porto_telemetry_disabled', 'true')
+  } else {
+    localStorage.removeItem('__porto_telemetry_disabled')
+  }
 
   // Prevent showing stale route from a previous action.
   const pathname = Router.router.state.location.pathname.replace(/\/+$/, '')
@@ -163,15 +179,27 @@ const rootElement = document.querySelector('div#root')
 if (!rootElement) throw new Error('Root element not found')
 
 createRoot(rootElement, {
-  onCaughtError: Sentry.reactErrorHandler((error) => {
-    console.error(error)
-  }),
-  onRecoverableError: Sentry.reactErrorHandler((error) => {
-    console.error(error)
-  }),
-  onUncaughtError: Sentry.reactErrorHandler((error) => {
-    console.error(error)
-  }),
+  onCaughtError: sentryInitialized
+    ? Sentry.reactErrorHandler((error) => {
+        console.error(error)
+      })
+    : (error) => {
+        console.error(error)
+      },
+  onRecoverableError: sentryInitialized
+    ? Sentry.reactErrorHandler((error) => {
+        console.error(error)
+      })
+    : (error) => {
+        console.error(error)
+      },
+  onUncaughtError: sentryInitialized
+    ? Sentry.reactErrorHandler((error) => {
+        console.error(error)
+      })
+    : (error) => {
+        console.error(error)
+      },
 }).render(
   <StrictMode>
     <App />

apps/docs/pages/sdk/api/porto/create.mdx

@@ -147,6 +147,21 @@ Available:
 - [`Storage.localStorage()`](/sdk/api/storage#storagelocalstorage): Uses `window.localStorage{:ts}`
 - [`Storage.cookie()`](/sdk/api/storage#storagecookie): Uses `document.cookie{:ts}`
 
+### telemetry
+
+- **Type:** `boolean | undefined`
+- **Default:** `true{:ts}`
+
+Whether to enable telemetry and error tracking. When set to `false`, disables anonymous error reporting via Sentry in the Porto dialog and authentication interfaces.
+
+```ts twoslash
+import { Porto } from 'porto'
+
+const porto = Porto.create({
+  telemetry: false, // Disable telemetry
+})
+```
+
 ### transports
 
 - **Type:** `{ [chainId: string]: Transport }{:ts}`

apps/id/src/main.tsx

@@ -7,29 +7,50 @@ import * as Router from '~/lib/Router.js'
 import { App } from './App.js'
 import './styles.css'
 
+// Initialize Sentry conditionally based on telemetry setting
+let sentryInitialized = false
+
 if (import.meta.env.PROD) {
-  Sentry.init({
-    dsn: 'https://1b4e28921c688e2b03d1b63f8d018913@o4509056062849024.ingest.us.sentry.io/4509080371724288',
-    environment: Env.get(),
-    integrations: [
-      Sentry.replayIntegration(),
-      Sentry.tanstackRouterBrowserTracingIntegration(Router.router),
-    ],
-    replaysOnErrorSampleRate: 1.0,
-    replaysSessionSampleRate: 0.1,
-  })
+  // Check localStorage for telemetry preference
+  const telemetryDisabled = localStorage.getItem('__porto_telemetry_disabled') === 'true'
+
+  if (!telemetryDisabled) {
+    Sentry.init({
+      dsn: 'https://1b4e28921c688e2b03d1b63f8d018913@o4509056062849024.ingest.us.sentry.io/4509080371724288',
+      environment: Env.get(),
+      integrations: [
+        Sentry.replayIntegration(),
+        Sentry.tanstackRouterBrowserTracingIntegration(Router.router),
+      ],
+      replaysOnErrorSampleRate: 1.0,
+      replaysSessionSampleRate: 0.1,
+    })
+    sentryInitialized = true
+  }
 }
 
 const rootElement = document.querySelector('div#root')
 
 if (!rootElement) throw new Error('Root element not found')
 
 createRoot(rootElement, {
-  onCaughtError: Sentry.reactErrorHandler(),
-  onRecoverableError: Sentry.reactErrorHandler(),
-  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
-    console.warn('Uncaught error', error, errorInfo.componentStack)
-  }),
+  onCaughtError: sentryInitialized
+    ? Sentry.reactErrorHandler()
+    : (error) => {
+        console.error(error)
+      },
+  onRecoverableError: sentryInitialized
+    ? Sentry.reactErrorHandler()
+    : (error) => {
+        console.error(error)
+      },
+  onUncaughtError: sentryInitialized
+    ? Sentry.reactErrorHandler((error, errorInfo) => {
+        console.warn('Uncaught error', error, errorInfo.componentStack)
+      })
+    : (error) => {
+        console.warn('Uncaught error', error)
+      },
 }).render(
   <StrictMode>
     <App />

src/core/Dialog.ts

@@ -33,6 +33,7 @@ export type Dialog = {
   setup: (parameters: {
     host: string
     internal: Internal
+    telemetry?: boolean | undefined
     theme?: ThemeFragment | undefined
     themeController?: ThemeController | undefined
   }) => {
@@ -83,7 +84,7 @@ export function iframe(options: iframe.Options = {}) {
   return from({
     name: 'iframe',
     setup(parameters) {
-      const { host, internal, theme, themeController } = parameters
+      const { host, internal, telemetry, theme, themeController } = parameters
       const { store } = internal
 
       const fallback = popup().setup(parameters)
@@ -191,6 +192,7 @@ export function iframe(options: iframe.Options = {}) {
           chainIds: compatibleChainIds,
           mode: 'iframe',
           referrer: getReferrer(),
+          telemetry,
           theme,
           type: 'init',
         })
@@ -310,6 +312,7 @@ export function iframe(options: iframe.Options = {}) {
           messenger.send('__internal', {
             mode: 'iframe',
             referrer: getReferrer(),
+            telemetry,
             type: 'init',
           })
 
@@ -340,6 +343,7 @@ export function iframe(options: iframe.Options = {}) {
           messenger.send('__internal', {
             mode: 'iframe',
             referrer: getReferrer(),
+            telemetry,
             type: 'init',
           })
         },
@@ -445,7 +449,7 @@ export function popup(options: popup.Options = {}) {
   return from({
     name: 'popup',
     setup(parameters) {
-      const { host, internal, themeController } = parameters
+      const { host, internal, telemetry, themeController } = parameters
       const { store } = internal
 
       const hostUrl = new URL(host)
@@ -515,6 +519,7 @@ export function popup(options: popup.Options = {}) {
           messenger.send('__internal', {
             mode: resolvedType === 'page' ? 'page' : 'popup',
             referrer: getReferrer(),
+            telemetry,
             theme: themeController?.getTheme() ?? parameters.theme,
             type: 'init',
           })
@@ -826,7 +831,7 @@ export function experimental_inline(options: inline.Options) {
   return from({
     name: 'inline',
     setup(parameters) {
-      const { host, internal, theme, themeController } = parameters
+      const { host, internal, telemetry, theme, themeController } = parameters
       const { store } = internal
 
       let open = false
@@ -874,6 +879,7 @@ export function experimental_inline(options: inline.Options) {
         messenger.send('__internal', {
           mode: 'inline-iframe',
           referrer: getReferrer(),
+          telemetry,
           theme,
           type: 'init',
         })
@@ -896,6 +902,7 @@ export function experimental_inline(options: inline.Options) {
           messenger.send('__internal', {
             mode: 'iframe',
             referrer: getReferrer(),
+            telemetry,
             type: 'init',
           })
         },

src/core/Messenger.ts

@@ -93,6 +93,7 @@ export type Schema = [
             icon?: string | { light: string; dark: string } | undefined
             title: string
           }
+          telemetry?: boolean | undefined
           theme?: Theme.ThemeFragment | undefined
         }
       | {

src/core/Porto.ts

@@ -72,6 +72,7 @@ export function create(
     relay: parameters.relay ?? defaultConfig.relay,
     storage: parameters.storage ?? defaultConfig.storage,
     storageKey: parameters.storageKey ?? defaultConfig.storageKey,
+    telemetry: parameters.telemetry ?? true,
     transports,
   } satisfies Config
 
@@ -210,6 +211,11 @@ export type Config<
    * Key to use for store.
    */
   storageKey?: string | undefined
+  /**
+   * Whether to enable telemetry/error tracking.
+   * @default true
+   */
+  telemetry?: boolean | undefined
   /**
    * Public RPC Transport overrides to use for each chain.
    */

src/core/internal/modes/dialog.ts

@@ -958,11 +958,12 @@ export function dialog(parameters: dialog.Parameters = {}) {
     name: 'dialog',
     setup(parameters) {
       const { internal } = parameters
-      const { store } = internal
+      const { config, store } = internal
 
       const dialog = renderer.setup({
         host,
         internal,
+        telemetry: config.telemetry,
         theme,
         themeController,
       })