Error Enhancer

'use client'
 
import { ErrorEnhancementBoundary } from '@trikinco/fullstack-components/client'
 
export default function ComponentThatMayThrow() {
  return (
    <ErrorEnhancementBoundary
      fallback={
        <p>Generating a user-friendly error message...</p>
      }
    >
      <Button
        onClick={() => {
          throwsCowbellOrError()
        }}
      >
        Howdy 🤠
      </Button>
    </ErrorEnhancementBoundary>
  )
}

'use client'
import { ErrorEnhancementFallback } from '@trikinco/fullstack-components/client'
 
export default function Page() {
  return (
    <ErrorEnhancementFallback
      error={new Error('Failed to get more cowbell')}
      resetErrorBoundary={() => null}
    />
  )
}

'use client'
import { ErrorBoundary } from 'react-error-boundary'
 
export default function SmartBoundary(props) {
  const { children, ...rest } = props || {}
  return (
    <ErrorBoundary
      fallbackRender={({ error, resetErrorBoundary }) => (
        // Handles enhancing errors and rendering UI
        <ErrorEnhancementFallback
          error={error}
          resetErrorBoundary={resetErrorBoundary}
          {...rest}
        />
      )}
    >
      {children}
    </ErrorBoundary>
  )
}

'use client'
 
import { useErrorEnhancement } from '@trikinco/fullstack-components/client'
 
export default function Page({ error }) {
  const { isLoading, data } = useErrorEnhancement({
    errorMessage: error?.message,
    stackTrace: error?.stack,
    // Optional
    // Contextual info which may help with debugging.
    errorContext:
      'The endpoint handling /users is down for maintenance',
  })
 
  if (isLoading) {
    return 'Investigating error...'
  }
 
  return (
    <div role="alert">
      <p className="text-2xl font-bold mb-3 mt-0 block">
        {data?.title}
      </p>
      <p>{data?.message}</p>
      <p>{data?.developmentModeContext}</p>
    </div>
  )
}

import {
  handleFSComponents,
  handleErrorRequest,
  type FSCOptions,
} from '@trikinco/fullstack-components'
 
const fscOptions: FSCOptions = {
  errorEnhancer: handleErrorRequest({
    openAiApiKey: process.env.OPENAI_API_KEY || '',
    appContext: 'http web app',
    /**
     * Overrides the output of `developmentModeContext` messages are
     * shown when `process.env.NODE_ENV === 'development'`.
     *
     * See below for more info.
     */
    isProd: true,
  }),
  // Additional options and handlers...
}
 
const fscHandler = handleFSComponents(fscOptions)
 
export { fscHandler as GET, fscHandler as POST }