👌 IMPROVE: Error handling in usePipe (#125)

* 👌 IMPROVE: Error handling in usePipe

* 👌 IMPROVE: Error handling in example routes

Author: ahmadbilaldev

examples/nextjs/app/api/langbase/pipes/run-stream/route.ts

@@ -9,14 +9,27 @@ export async function POST(req: NextRequest) {
 	const pipe = new Pipe(pipeSummary());
 
 	// 2. Run the Pipe.
-	const {stream, threadId} = await pipe.run(runOptions);
-
-	// 3. Return the ReadableStream directly with the threadId in the headers
-	//  to be used on the client side to mainain a single chat thread.
-	return new Response(stream, {
-		status: 200,
-		headers: {
-			'lb-thread-id': threadId ?? '',
-		},
-	});
+	try {
+		const {stream, threadId} = await pipe.run(runOptions);
+		// 3. Return the ReadableStream directly with the threadId in the headers
+		//  to be used on the client side to mainain a single chat thread.
+		return new Response(stream, {
+			status: 200,
+			headers: {
+				'lb-thread-id': threadId ?? '',
+			},
+		});
+	} catch (error: any) {
+		return new Response(
+			JSON.stringify({
+				error,
+			}),
+			{
+				status: error.status || 500,
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			},
+		);
+	}
 }

examples/nextjs/app/api/langbase/pipes/run/route.ts

@@ -9,8 +9,24 @@ export async function POST(req: NextRequest) {
 	const pipe = new Pipe(pipeSummary());
 
 	// 2. Run the pipe
-	const result = await pipe.run(runOptions);
+	try {
+		const result = await pipe.run(runOptions);
 
-	// 3. Return the response stringified.
-	return new Response(JSON.stringify(result));
+		// 3. Return the response stringified.
+		return new Response(JSON.stringify(result));
+	} catch (error: any) {
+		// 4. Return the error response
+
+		return new Response(
+			JSON.stringify({
+				error,
+			}),
+			{
+				status: error.status || 500,
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			},
+		);
+	}
 }

examples/nextjs/components/pipe-run.tsx

@@ -25,15 +25,19 @@ export default function PipeRunExample() {
 			});
 
 			if (!response.ok) {
-				throw new Error('Network response was not ok');
+				const res = await response.json();
+				throw new Error(res.error.error.message);
 			}
 
 			// Parse the JSON response.
 			const data = await response.json();
 			setCompletion(data.completion);
-		} catch (error) {
-			console.error('Error:', error);
-			setCompletion('An error occurred while generating the completion.');
+		} catch (error: any) {
+			if (error.message) setCompletion(error.message);
+			else
+				setCompletion(
+					'An error occurred while generating the completion.',
+				);
 		} finally {
 			setLoading(false);
 		}

packages/core/src/react/use-pipe.ts

@@ -186,7 +186,7 @@ export function usePipe({
 					signal,
 				});
 
-				if (!response.ok) throw new Error('Failed to send message');
+				if (!response.ok) await processErrorResponse(response);
 
 				const newThreadId = response.headers.get('lb-thread-id');
 				if (newThreadId) threadIdRef.current = newThreadId;
@@ -197,10 +197,12 @@ export function usePipe({
 					const result: RunResponse = await response.json();
 					processNonStreamResponse(result);
 				}
-			} catch (err) {
+			} catch (err: any) {
 				if (err instanceof Error && err.name !== 'AbortError') {
 					setError(err);
 					onError?.(err);
+				} else if (err.name !== 'AbortError') {
+					throw new Error('Failed to send message');
 				}
 			} finally {
 				setIsLoading(false);
@@ -264,6 +266,16 @@ export function usePipe({
 		setIsLoading(false);
 	}, []);
 
+	const processErrorResponse = async (response: Response) => {
+		const res = await response.json();
+		if (res.error.error) {
+			// Throw error object if it exists
+			throw new Error(res.error.error.message);
+		} else {
+			throw new Error('Failed to send message');
+		}
+	};
+
 	return useMemo(
 		() => ({
 			messages,