-
Notifications
You must be signed in to change notification settings - Fork 3
/
ErrorHandling.tsx
129 lines (114 loc) · 3.9 KB
/
ErrorHandling.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import {NavTransition} from "Navigation/NavigationProvider";
import {TextSpan} from "Component/TextSpan";
import React, {useState} from "react";
import {
CardMargin,
ContainerCard,
FlexCardScreenContainer
} from "Component/ContainerCard";
import {SecondaryButton} from "Component/CabbageButton";
import {stopClick} from "Util/EventUtil";
import {useSupabase} from "Api/SupabaseProvider";
import {ErrorInfo} from "Error/ErrorUtil";
import {store_event} from "Api/CabbageApi";
const log = console;
const scratchUrl = "/error-handling";
export function getErrorHandlingScreenLink(): string{
return scratchUrl;
}
export function isErrorHandlingScreenPath(path: String): boolean{
const normalizedPath = path.toLowerCase();
return normalizedPath.startsWith(scratchUrl);
}
export function ErrorHandlingScreen(){
return <NavTransition isPath={isErrorHandlingScreenPath}
title={"Cabbage - error handling examples"}
>
<Content/>
</NavTransition>
}
function Content(){
return <FlexCardScreenContainer>
<CardMargin><UnhandledOnClickErrorCard/></CardMargin>
<CardMargin><ReactRenderErrorCard/></CardMargin>
<CardMargin><HandledApiErrorCard/></CardMargin>
<CardMargin><StoreSbEventCard/></CardMargin>
</FlexCardScreenContainer>
}
function UnhandledOnClickErrorCard(){
return <ContainerCard title={<>Event handler error</>} >
<TextSpan>Throws an error from inside an onClick event.</TextSpan>
<TextSpan>This simulates a coding error when writing event handling code
(usually server calls, etc.)</TextSpan>
<SecondaryButton
onClick={async (e)=>{
stopClick(e);
throw new Error("intentional event handler error");
}}
>Throw handler error</SecondaryButton>
</ContainerCard>
}
function StoreSbEventCard(){
const {db} = useSupabase();
return <ContainerCard title={<>Store supabase event</>} >
<TextSpan>Stores an event directly to the REST endpoint.</TextSpan>
<SecondaryButton
onClick={async (e)=>{
stopClick(e);
log.debug("storing event to supabase")
const result = await store_event(db, {
json_content: {'somefield': 'somevalue2'} });
log.debug("store result", result);
}}
>Store event</SecondaryButton>
</ContainerCard>
}
function HandledApiErrorCard(){
const {db} = useSupabase();
const [isRestarting, setIsRestarting] = useState(false);
const [restartError, setRestartError] =
useState(undefined as undefined | ErrorInfo);
return <ContainerCard title={<>Handled API error</>} >
<TextSpan>Tries to call a trigger as a function, which will cause an
error on the server-side.</TextSpan>
<SecondaryButton error={restartError}
isLoading={isRestarting} disabled={isRestarting}
onClick={async (e) => {
stopClick(e);
setIsRestarting(true);
setRestartError(undefined);
const result = await db.rpc('notify_api_restart');
log.debug("api restart", result);
if( result.error ){
setRestartError({
message: result.error.message, problem: result.error
});
}
setIsRestarting(false);
}}
>Cause server error</SecondaryButton>
</ContainerCard>
}
function ReactRenderErrorCard(){
const [isRenderError, setIsRenderError] = useState(false);
return <ContainerCard title={<>React rendering error</>} >
<TextSpan>Throws an error while trying to render a component.</TextSpan>
<TextSpan>
This simulates a coding error when writing React display code.
</TextSpan>
{ isRenderError && <BadRenderComponent/> }
<SecondaryButton
onClick={async (e)=>{
stopClick(e);
setIsRenderError(true);
}}
>Cause render error</SecondaryButton>
</ContainerCard>
}
function BadRenderComponent(){
console.log("cause render error");
if( "will fail".length < 100 ){
throw new Error("intentional render error");
}
return <div>This will never render</div>
}