Describe the problem:

Currently, when a non-Inertia response is received (e.g., a regular JSON response or a full HTML response instead of an Inertia response), Inertia automatically shows a modal with the response data. While this is helpful during development for debugging, it can create a poor user experience in production if not properly handled.

The modal appears when non-Inertia responses are received, but there's no built-in way to disable this behavior and handle the response in a custom way.

Proposed Solution

Add a new configuration option showModalOnNonInertiaResponse to the modal configuration system that can be set through the createInertiaApp function in all framework adapters (React, Vue, Svelte). This option would allow developers to disable the automatic modal display and handle non-Inertia responses themselves.

⚠️ This option should be kept enabled by default, as it is today. Only when - and if - developers end up needing to handle non inertia responses is that they'd use this advanced option

Implementation Details

1. Add a new ModalConfig type in packages/core/src/types.ts:

   export type ModalConfig = {
     showOnNonInertiaResponse: boolean
   }

2. Add modal configuration functionality in packages/core/src/modal.ts:

   const settings: ModalConfig = {
     showOnNonInertiaResponse: true,
   }
   
   export const setupModal = (options: Partial<ModalConfig>): void => {
     Object.assign(settings, options)
   }
   
   export const getConfig = (): ModalConfig => {
     return { ...settings }
   }

3. Add the configuration option to all framework adapters' createInertiaApp functions:

   // In React/Vue/Svelte createInertiaApp.ts
   interface CreateInertiaAppProps {
     // ... existing props
     showModalOnNonInertiaResponse?: boolean
   }
   
   export default async function createInertiaApp({
     showModalOnNonInertiaResponse = true,
     // ... other options
   }) {
     if (!isServer) {
       setupModal({ showOnNonInertiaResponse: showModalOnNonInertiaResponse })
     }
     // ... rest of the implementation
   }

Usage Example

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />, el)
  },
  showModalOnNonInertiaResponse: false, // Disable the modal
})

Benefits

1. Better Production UX: The automatic modal can be disruptive in production environments. This option allows developers to handle non-Inertia responses in a more user-friendly way.

2. Custom Error Handling: Developers can implement their own error handling logic when the modal is disabled

3. Maintains Development Experience: The modal is still shown by default, making it easy to debug during development.

4. Framework Agnostic: The implementation is consistent across all framework adapters (React, Vue, and Svelte).

Additional Context

The modal error handling is indeed very helpful during local development as it immediately shows what's wrong with the response. However, if this behavior accidentally makes it into production, it creates a very poor user experience. Users would see a technical error modal instead of a graceful error page or notification.

By providing this configuration option, we give developers the flexibility to handle these responses appropriately in their production environments while maintaining the helpful debugging experience during development.