Implementation:FlowiseAI Flowise ErrorContext

Knowledge Sources	FlowiseAI Flowise
Domains	Error Handling, State Management
Last Updated	2026-02-12 07:00 GMT

Overview

ErrorContext is a React context provider that centralizes HTTP error handling across the Flowise UI, managing authentication failures, rate limiting, authorization errors, and general error state.

Description

ErrorContext creates a shared error handling context using createContext and exposes an ErrorProvider component along with a useError hook. The provider's handleError function inspects HTTP response status codes (401, 403, 429) and routes the user to the appropriate page (login, unauthorized, rate-limited) or dispatches a logout action. It also distinguishes between authentication rate limits and general rate limits, parsing the Retry-After header to determine wait times.

Usage

Wrap the application with <ErrorProvider> so that any component can call handleError(err) from the useError() hook to trigger centralized error routing. This is typically called from API interceptors or catch blocks throughout the application.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/store/context/ErrorContext.jsx
• Lines: 1-79

Signature

export const ErrorProvider = ({ children }) => { ... }
export const useError = () => useContext(ErrorContext)

Import

import { ErrorProvider, useError } from '@/store/context/ErrorContext'

I/O Contract

Inputs

Name	Type	Required	Description
children	PropTypes.any	Yes	Child React elements to be wrapped by the provider

Outputs

Name	Type	Description
error	object or null	The most recent unhandled error object
setError	function	Setter to manually update the error state
handleError	function	Async handler that routes errors based on HTTP status code (401, 403, 429)
authRateLimitError	string or null	Message shown when authentication rate limit (429 with type 'authentication_rate_limit') is hit
setAuthRateLimitError	function	Setter to manually update the auth rate limit error message

Usage Examples

Basic Usage

import { ErrorProvider, useError } from '@/store/context/ErrorContext'

// Wrap app with ErrorProvider
function App() {
    return (
        <ErrorProvider>
            <Dashboard />
        </ErrorProvider>
    )
}

// Use in a component to handle API errors
function Dashboard() {
    const { handleError, error } = useError()

    const fetchData = async () => {
        try {
            const response = await api.getData()
            // handle response
        } catch (err) {
            handleError(err)
        }
    }

    return (
        <div>
            {error && <div>Something went wrong</div>}
            <button onClick={fetchData}>Load Data</button>
        </div>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Error_Handling