Error Reporting & Monitoring

import { createApp } from '@thelacanians/vue-native-runtime'
import App from './App.vue'

const app = createApp(App)

// Save the default handler before overriding
const defaultHandler = app.config.errorHandler

app.config.errorHandler = (err, instance, info) => {
  // Your custom reporting logic
  sendToErrorService(err, instance, info)

  // Preserve the default behavior (native error overlay in dev)
  if (defaultHandler) {
    defaultHandler(err, instance, info)
  }
}

app.start()

// services/sentry.ts
import { useHttp } from '@thelacanians/vue-native-runtime'

const SENTRY_DSN = 'https://examplePublicKey@o0.ingest.sentry.io/0'

// Parse DSN into its components
function parseDSN(dsn: string) {
  const match = dsn.match(/^https:\/\/(.+?)@(.+?)\/(.+)$/)
  if (!match) throw new Error('Invalid Sentry DSN')
  return { publicKey: match[1], host: match[2], projectId: match[3] }
}

export function createSentryReporter() {
  const { publicKey, host, projectId } = parseDSN(SENTRY_DSN)
  const http = useHttp({
    baseURL: `https://${host}`,
    headers: {
      'Content-Type': 'application/json',
      'X-Sentry-Auth': `Sentry sentry_version=7, sentry_key=${publicKey}`,
    },
  })

  return {
    captureException(err: Error, context?: Record<string, any>) {
      const payload = {
        event_id: generateUUID(),
        timestamp: new Date().toISOString(),
        platform: 'javascript',
        exception: {
          values: [{
            type: err.name,
            value: err.message,
            stacktrace: { frames: parseStack(err.stack) },
          }],
        },
        tags: context,
      }

      http.post(`/api/${projectId}/store/`, payload).catch((e) => {
        console.warn('[Sentry] Failed to send event:', e.message)
      })
    },
  }
}

function generateUUID(): string {
  return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = Math.random() * 16 | 0
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
  })
}

function parseStack(stack?: string) {
  if (!stack) return []
  return stack.split('\n').slice(1).map((line) => {
    const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/)
    if (!match) return { filename: 'unknown', function: line.trim() }
    return {
      function: match[1],
      filename: match[2],
      lineno: parseInt(match[3]),
      colno: parseInt(match[4]),
    }
  })
}

// services/bugsnag.ts
import { useHttp } from '@thelacanians/vue-native-runtime'

const BUGSNAG_API_KEY = 'your-api-key'

export function createBugsnagReporter() {
  const http = useHttp({
    baseURL: 'https://notify.bugsnag.com',
    headers: {
      'Bugsnag-Api-Key': BUGSNAG_API_KEY,
      'Bugsnag-Payload-Version': '5',
    },
  })

  return {
    notify(err: Error, context?: Record<string, any>) {
      const payload = {
        apiKey: BUGSNAG_API_KEY,
        payloadVersion: '5',
        notifier: { name: 'vue-native', version: '1.0.0' },
        events: [{
          exceptions: [{
            errorClass: err.name,
            message: err.message,
            stacktrace: err.stack,
          }],
          metaData: context,
        }],
      }

      http.post('/', payload).catch((e) => {
        console.warn('[Bugsnag] Failed to send event:', e.message)
      })
    },
  }
}

// services/errorReporter.ts
import { useHttp } from '@thelacanians/vue-native-runtime'
import { useDeviceInfo, usePlatform } from '@thelacanians/vue-native-runtime'

export function createErrorReporter(endpoint: string, apiKey: string) {
  const http = useHttp({
    baseURL: endpoint,
    headers: { Authorization: `Bearer ${apiKey}` },
  })

  return {
    async report(err: Error, context?: Record<string, any>) {
      const device = useDeviceInfo()
      const { platform } = usePlatform()

      const payload = {
        timestamp: Date.now(),
        error: {
          name: err.name,
          message: err.message,
          stack: err.stack,
        },
        device: {
          platform: platform.value,
          model: device.model.value,
          osVersion: device.osVersion.value,
        },
        context,
      }

      try {
        await http.post('/errors', payload)
      } catch (e) {
        // Avoid infinite loops -- do NOT throw from error reporter
        console.warn('[ErrorReporter] Failed to send:', (e as Error).message)
      }
    },
  }
}

// main.ts
import { createApp } from '@thelacanians/vue-native-runtime'
import App from './App.vue'
import { createErrorReporter } from './services/errorReporter'

const app = createApp(App)

// Create the reporter outside the error handler
// (useHttp must be called in a setup context or at module scope)
const reporter = createErrorReporter(
  'https://errors.myapp.com',
  'my-api-key'
)

// Save the built-in handler that sends to __VN_handleError
const builtInHandler = app.config.errorHandler

app.config.errorHandler = (err, instance, info) => {
  const error = err instanceof Error ? err : new Error(String(err))
  const componentName = instance?.$options?.name || 'Anonymous'

  // 1. Send to your error service
  reporter.report(error, {
    componentName,
    lifecycleHook: info,
    route: getCurrentRoute(), // if using navigation
  })

  // 2. Preserve the built-in handler (native error overlay in dev)
  if (builtInHandler) {
    builtInHandler(err, instance, info)
  }
}

app.start()

import { usePerformance } from '@thelacanians/vue-native-runtime'

const { fps, memoryMB, bridgeOps, startProfiling } = usePerformance()

// Include performance data in error reports
function reportWithMetrics(error: Error, context?: Record<string, any>) {
  reporter.report(error, {
    ...context,
    fps: fps.value,
    memoryMB: memoryMB.value,
    bridgeOps: bridgeOps.value,
  })
}

console.log('Regular log')         // Informational
console.warn('Something odd')      // Yellow in Xcode, WARN in Logcat
console.error('Something broke')   // Red in Xcode, ERROR in Logcat

// Wrong -- accessing ref without .value in script
const count = ref(0)
console.log(count) // Ref object, not the value

// Correct
console.log(count.value) // 0

// Wrong -- composable outside setup
const http = useHttp() // Must be inside setup()

// Correct
export default defineComponent({
  setup() {
    const http = useHttp()
    return { http }
  },
})

// Increase timeout for long-running operations
import { NativeBridge } from '@thelacanians/vue-native-runtime'

// Default is 30 seconds; increase for heavy operations
const result = await NativeBridge.invokeNativeModule(
  'FileSystem',
  'downloadLargeFile',
  [url],
  120_000, // 2 minutes
)

// Always handle timeout errors gracefully
try {
  const photo = await camera.takePhoto({ quality: 'high' })
} catch (err) {
  if (err.message.includes('timed out')) {
    console.warn('Camera operation timed out, retrying...')
  }
}