import React, {Component} from 'react'

import {ReportErrorParams} from '@shopify/shop-minis-platform/actions'

interface ErrorBoundaryProps {
  children: React.ReactNode
  onError: (params: ReportErrorParams) => void
}

export class ErrorBoundary extends Component<ErrorBoundaryProps> {
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // Report the error to the app
    this.props.onError({
      message: error.message,
      stack: error.stack,
      additionalContext: {
        componentStack: errorInfo.componentStack,
      },
    })
  }

  render() {
    return this.props.children
  }
}