@flareapp/react 2.4.0 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/flareReactErrorHandler-4Vgqlths.d.cts +95 -0
- package/dist/flareReactErrorHandler-9xZVBY7Q.cjs +289 -0
- package/dist/flareReactErrorHandler-BcVYRMtC.d.mts +95 -0
- package/dist/flareReactErrorHandler-DSLl6QFX.mjs +233 -0
- package/dist/index.cjs +5 -221
- package/dist/index.d.cts +1 -89
- package/dist/index.d.mts +1 -89
- package/dist/index.mjs +4 -193
- package/dist/inject.cjs +5 -0
- package/dist/inject.d.cts +2 -0
- package/dist/inject.d.mts +2 -0
- package/dist/inject.mjs +3 -0
- package/package.json +22 -3
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Flare } from "@flareapp/js/browser";
|
|
2
|
+
import { Component, ErrorInfo, PropsWithChildren, ReactNode } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
type ComponentStackFrame = {
|
|
6
|
+
component: string;
|
|
7
|
+
file: string | null;
|
|
8
|
+
line: number | null;
|
|
9
|
+
column: number | null;
|
|
10
|
+
};
|
|
11
|
+
type MinifiedReactError = {
|
|
12
|
+
number: number;
|
|
13
|
+
args: string[];
|
|
14
|
+
url: string | null;
|
|
15
|
+
};
|
|
16
|
+
type FlareReactContext = {
|
|
17
|
+
react: {
|
|
18
|
+
componentStack: string[];
|
|
19
|
+
componentStackFrames: ComponentStackFrame[];
|
|
20
|
+
version?: string;
|
|
21
|
+
minifiedError?: MinifiedReactError;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
//#endregion
|
|
25
|
+
//#region src/FlareErrorBoundary.d.ts
|
|
26
|
+
type FlareErrorBoundaryFallbackProps = {
|
|
27
|
+
error: Error;
|
|
28
|
+
componentStack: string[];
|
|
29
|
+
resetErrorBoundary: () => void;
|
|
30
|
+
};
|
|
31
|
+
type FlareErrorBoundaryProps = PropsWithChildren<{
|
|
32
|
+
flare?: Flare;
|
|
33
|
+
fallback?: ReactNode | ((props: FlareErrorBoundaryFallbackProps) => ReactNode);
|
|
34
|
+
resetKeys?: unknown[];
|
|
35
|
+
beforeEvaluate?: (params: {
|
|
36
|
+
error: Error;
|
|
37
|
+
errorInfo: ErrorInfo;
|
|
38
|
+
}) => void;
|
|
39
|
+
beforeSubmit?: (params: {
|
|
40
|
+
error: Error;
|
|
41
|
+
errorInfo: ErrorInfo;
|
|
42
|
+
context: FlareReactContext;
|
|
43
|
+
}) => FlareReactContext;
|
|
44
|
+
afterSubmit?: (params: {
|
|
45
|
+
error: Error;
|
|
46
|
+
errorInfo: ErrorInfo;
|
|
47
|
+
context: FlareReactContext;
|
|
48
|
+
}) => void;
|
|
49
|
+
onReset?: (error: Error | null) => void;
|
|
50
|
+
}>;
|
|
51
|
+
type FlareErrorBoundaryState = {
|
|
52
|
+
error: Error | null;
|
|
53
|
+
componentStack: string[];
|
|
54
|
+
};
|
|
55
|
+
declare class FlareErrorBoundary extends Component<FlareErrorBoundaryProps, FlareErrorBoundaryState> {
|
|
56
|
+
private readonly flare;
|
|
57
|
+
constructor(props: FlareErrorBoundaryProps);
|
|
58
|
+
state: FlareErrorBoundaryState;
|
|
59
|
+
static getDerivedStateFromError(error: Error): Partial<FlareErrorBoundaryState>;
|
|
60
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
61
|
+
componentDidUpdate(prevProps: FlareErrorBoundaryProps): void;
|
|
62
|
+
reset: () => void;
|
|
63
|
+
render(): ReactNode;
|
|
64
|
+
}
|
|
65
|
+
//#endregion
|
|
66
|
+
//#region src/flareReactErrorHandler.d.ts
|
|
67
|
+
type FlareReactErrorHandlerCallback = (error: unknown, errorInfo: {
|
|
68
|
+
componentStack?: string;
|
|
69
|
+
}) => void;
|
|
70
|
+
type FlareReactErrorHandlerOptions = {
|
|
71
|
+
flare?: Flare;
|
|
72
|
+
beforeEvaluate?: (params: {
|
|
73
|
+
error: Error;
|
|
74
|
+
errorInfo: {
|
|
75
|
+
componentStack?: string;
|
|
76
|
+
};
|
|
77
|
+
}) => void;
|
|
78
|
+
beforeSubmit?: (params: {
|
|
79
|
+
error: Error;
|
|
80
|
+
errorInfo: {
|
|
81
|
+
componentStack?: string;
|
|
82
|
+
};
|
|
83
|
+
context: FlareReactContext;
|
|
84
|
+
}) => FlareReactContext;
|
|
85
|
+
afterSubmit?: (params: {
|
|
86
|
+
error: Error;
|
|
87
|
+
errorInfo: {
|
|
88
|
+
componentStack?: string;
|
|
89
|
+
};
|
|
90
|
+
context: FlareReactContext;
|
|
91
|
+
}) => void;
|
|
92
|
+
};
|
|
93
|
+
declare function flareReactErrorHandler(options?: FlareReactErrorHandlerOptions): FlareReactErrorHandlerCallback;
|
|
94
|
+
//#endregion
|
|
95
|
+
export { FlareErrorBoundaryFallbackProps as a, FlareReactContext as c, FlareErrorBoundary as i, MinifiedReactError as l, FlareReactErrorHandlerOptions as n, FlareErrorBoundaryProps as o, flareReactErrorHandler as r, ComponentStackFrame as s, FlareReactErrorHandlerCallback as t };
|
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
//#region \0rolldown/runtime.js
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) {
|
|
13
|
+
__defProp(to, key, {
|
|
14
|
+
get: ((k) => from[k]).bind(null, key),
|
|
15
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return to;
|
|
21
|
+
};
|
|
22
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
23
|
+
value: mod,
|
|
24
|
+
enumerable: true
|
|
25
|
+
}) : target, mod));
|
|
26
|
+
|
|
27
|
+
//#endregion
|
|
28
|
+
let react = require("react");
|
|
29
|
+
react = __toESM(react);
|
|
30
|
+
let _flareapp_core = require("@flareapp/core");
|
|
31
|
+
|
|
32
|
+
//#region src/constants.ts
|
|
33
|
+
const CHROMIUM_STACK_REGEX = /^at\s+(\S+)(?:\s+\((.+):(\d+):(\d+)\))?$/;
|
|
34
|
+
const FIREFOX_SAFARI_STACK_REGEX = /^(\S+?)@(.+):(\d+):(\d+)$/;
|
|
35
|
+
const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.5.0" : "?";
|
|
36
|
+
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region src/identify.ts
|
|
39
|
+
const sdkTagged = /* @__PURE__ */ new WeakSet();
|
|
40
|
+
const frameworkTagged = /* @__PURE__ */ new WeakSet();
|
|
41
|
+
function registerReactSdkIdentity(flare) {
|
|
42
|
+
if (!sdkTagged.has(flare)) {
|
|
43
|
+
sdkTagged.add(flare);
|
|
44
|
+
flare.setSdkInfo({
|
|
45
|
+
name: "@flareapp/react",
|
|
46
|
+
version: PACKAGE_VERSION
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
tagReactFramework(flare);
|
|
50
|
+
}
|
|
51
|
+
function tagReactFramework(flare) {
|
|
52
|
+
if (frameworkTagged.has(flare)) return;
|
|
53
|
+
frameworkTagged.add(flare);
|
|
54
|
+
flare.setFramework({
|
|
55
|
+
name: "React",
|
|
56
|
+
version: react.version
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
//#endregion
|
|
61
|
+
//#region src/resolveFlare.ts
|
|
62
|
+
let defaultProvider = null;
|
|
63
|
+
function isDevMode() {
|
|
64
|
+
try {
|
|
65
|
+
return process.env.NODE_ENV !== "production";
|
|
66
|
+
} catch {
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function registerDefaultFlare(provider) {
|
|
71
|
+
if (typeof window !== "undefined" && window.__flare) {
|
|
72
|
+
const message = "[flare] @flareapp/react (web root) was imported in a renderer where the Electron bridge is present, pulling the keyed @flareapp/js singleton into the renderer. Import @flareapp/react/inject and pass the @flareapp/electron/renderer instance instead.";
|
|
73
|
+
if (isDevMode()) throw new Error(message);
|
|
74
|
+
console.warn(message);
|
|
75
|
+
}
|
|
76
|
+
defaultProvider = provider;
|
|
77
|
+
}
|
|
78
|
+
function resolveFlare(explicit) {
|
|
79
|
+
if (explicit) return explicit;
|
|
80
|
+
if (defaultProvider) return defaultProvider();
|
|
81
|
+
throw new Error("[flare] No Flare instance available. Pass `flare` (e.g. from @flareapp/electron/renderer), or import @flareapp/react (the package root) to use the @flareapp/js default singleton.");
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
//#endregion
|
|
85
|
+
//#region src/formatComponentStack.ts
|
|
86
|
+
function formatComponentStack(stack) {
|
|
87
|
+
return stack.split(/\s*\n\s*/g).filter((line) => line.length > 0);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
//#endregion
|
|
91
|
+
//#region src/parseComponentStack.ts
|
|
92
|
+
function parseComponentStack(stack) {
|
|
93
|
+
return stack.split(/\s*\n\s*/g).filter((line) => line.length > 0).map((line) => {
|
|
94
|
+
const chromeMatch = line.match(CHROMIUM_STACK_REGEX);
|
|
95
|
+
if (chromeMatch) return {
|
|
96
|
+
component: chromeMatch[1],
|
|
97
|
+
file: chromeMatch[2] ?? null,
|
|
98
|
+
line: chromeMatch[3] ? Number(chromeMatch[3]) : null,
|
|
99
|
+
column: chromeMatch[4] ? Number(chromeMatch[4]) : null
|
|
100
|
+
};
|
|
101
|
+
const firefoxSafariMatch = line.match(FIREFOX_SAFARI_STACK_REGEX);
|
|
102
|
+
if (firefoxSafariMatch) return {
|
|
103
|
+
component: firefoxSafariMatch[1],
|
|
104
|
+
file: firefoxSafariMatch[2],
|
|
105
|
+
line: Number(firefoxSafariMatch[3]),
|
|
106
|
+
column: Number(firefoxSafariMatch[4])
|
|
107
|
+
};
|
|
108
|
+
return {
|
|
109
|
+
component: line.replace(/^at\s+/, ""),
|
|
110
|
+
file: null,
|
|
111
|
+
line: null,
|
|
112
|
+
column: null
|
|
113
|
+
};
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
//#endregion
|
|
118
|
+
//#region src/parseMinifiedReactError.ts
|
|
119
|
+
const NUMBER_PATTERN = /Minified React error #(\d+)/;
|
|
120
|
+
const ARG_PATTERN = /args\[\]=([^&\s]*)/g;
|
|
121
|
+
const URL_PATTERN = /(https?:\/\/\S+)/;
|
|
122
|
+
function safeDecode(value) {
|
|
123
|
+
try {
|
|
124
|
+
return decodeURIComponent(value);
|
|
125
|
+
} catch {
|
|
126
|
+
return value;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
function parseMinifiedReactError(error) {
|
|
130
|
+
const message = error?.message;
|
|
131
|
+
if (!message) return null;
|
|
132
|
+
const numberMatch = message.match(NUMBER_PATTERN);
|
|
133
|
+
if (!numberMatch) return null;
|
|
134
|
+
const args = [];
|
|
135
|
+
for (const match of message.matchAll(ARG_PATTERN)) args.push(safeDecode(match[1]));
|
|
136
|
+
const urlMatch = message.match(URL_PATTERN);
|
|
137
|
+
return {
|
|
138
|
+
number: Number(numberMatch[1]),
|
|
139
|
+
args,
|
|
140
|
+
url: urlMatch ? urlMatch[1] : null
|
|
141
|
+
};
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
//#endregion
|
|
145
|
+
//#region src/buildReactContext.ts
|
|
146
|
+
function buildReactContext(rawStack, error) {
|
|
147
|
+
const minifiedError = parseMinifiedReactError(error);
|
|
148
|
+
return { react: {
|
|
149
|
+
componentStack: formatComponentStack(rawStack),
|
|
150
|
+
componentStackFrames: parseComponentStack(rawStack),
|
|
151
|
+
version: react.version,
|
|
152
|
+
...minifiedError ? { minifiedError } : {}
|
|
153
|
+
} };
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/contextToAttributes.ts
|
|
158
|
+
function contextToAttributes(context) {
|
|
159
|
+
return { "context.custom": { react: {
|
|
160
|
+
componentStack: context.react.componentStack,
|
|
161
|
+
componentStackFrames: context.react.componentStackFrames,
|
|
162
|
+
...context.react.version ? { version: context.react.version } : {},
|
|
163
|
+
...context.react.minifiedError ? { minifiedError: context.react.minifiedError } : {}
|
|
164
|
+
} } };
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
//#endregion
|
|
168
|
+
//#region src/FlareErrorBoundary.ts
|
|
169
|
+
var FlareErrorBoundary = class extends react.Component {
|
|
170
|
+
flare;
|
|
171
|
+
constructor(props) {
|
|
172
|
+
super(props);
|
|
173
|
+
this.flare = resolveFlare(props.flare);
|
|
174
|
+
tagReactFramework(this.flare);
|
|
175
|
+
}
|
|
176
|
+
state = {
|
|
177
|
+
error: null,
|
|
178
|
+
componentStack: []
|
|
179
|
+
};
|
|
180
|
+
static getDerivedStateFromError(error) {
|
|
181
|
+
return { error };
|
|
182
|
+
}
|
|
183
|
+
componentDidCatch(error, errorInfo) {
|
|
184
|
+
this.props.beforeEvaluate?.({
|
|
185
|
+
error,
|
|
186
|
+
errorInfo
|
|
187
|
+
});
|
|
188
|
+
const context = buildReactContext(errorInfo.componentStack ?? "", error);
|
|
189
|
+
const finalContext = this.props.beforeSubmit?.({
|
|
190
|
+
error,
|
|
191
|
+
errorInfo,
|
|
192
|
+
context
|
|
193
|
+
}) ?? context;
|
|
194
|
+
this.setState({ componentStack: finalContext.react.componentStack });
|
|
195
|
+
this.flare.reportSilently(error, contextToAttributes(finalContext));
|
|
196
|
+
this.props.afterSubmit?.({
|
|
197
|
+
error,
|
|
198
|
+
errorInfo,
|
|
199
|
+
context: finalContext
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
componentDidUpdate(prevProps) {
|
|
203
|
+
if (this.state.error === null || !this.props.resetKeys) return;
|
|
204
|
+
const prevKeys = prevProps.resetKeys;
|
|
205
|
+
const nextKeys = this.props.resetKeys;
|
|
206
|
+
const lengthChanged = prevKeys?.length !== nextKeys.length;
|
|
207
|
+
const valuesChanged = nextKeys.some((key, i) => !Object.is(key, prevKeys?.[i]));
|
|
208
|
+
if (lengthChanged || valuesChanged) this.reset();
|
|
209
|
+
}
|
|
210
|
+
reset = () => {
|
|
211
|
+
const { error } = this.state;
|
|
212
|
+
this.props.onReset?.(error);
|
|
213
|
+
this.setState({
|
|
214
|
+
error: null,
|
|
215
|
+
componentStack: []
|
|
216
|
+
});
|
|
217
|
+
};
|
|
218
|
+
render() {
|
|
219
|
+
const { error } = this.state;
|
|
220
|
+
if (error !== null) {
|
|
221
|
+
const { fallback } = this.props;
|
|
222
|
+
if (typeof fallback === "function") return fallback({
|
|
223
|
+
error,
|
|
224
|
+
componentStack: this.state.componentStack,
|
|
225
|
+
resetErrorBoundary: this.reset
|
|
226
|
+
});
|
|
227
|
+
return fallback ?? null;
|
|
228
|
+
}
|
|
229
|
+
return this.props.children;
|
|
230
|
+
}
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
//#endregion
|
|
234
|
+
//#region src/flareReactErrorHandler.ts
|
|
235
|
+
function flareReactErrorHandler(options) {
|
|
236
|
+
const flare = resolveFlare(options?.flare);
|
|
237
|
+
tagReactFramework(flare);
|
|
238
|
+
return (error, errorInfo) => {
|
|
239
|
+
const errorObject = (0, _flareapp_core.convertToError)(error);
|
|
240
|
+
options?.beforeEvaluate?.({
|
|
241
|
+
error: errorObject,
|
|
242
|
+
errorInfo
|
|
243
|
+
});
|
|
244
|
+
const context = buildReactContext(errorInfo.componentStack ?? "", errorObject);
|
|
245
|
+
const finalContext = options?.beforeSubmit?.({
|
|
246
|
+
error: errorObject,
|
|
247
|
+
errorInfo,
|
|
248
|
+
context
|
|
249
|
+
}) ?? context;
|
|
250
|
+
flare.reportSilently(errorObject, contextToAttributes(finalContext));
|
|
251
|
+
options?.afterSubmit?.({
|
|
252
|
+
error: errorObject,
|
|
253
|
+
errorInfo,
|
|
254
|
+
context: finalContext
|
|
255
|
+
});
|
|
256
|
+
};
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
//#endregion
|
|
260
|
+
Object.defineProperty(exports, 'FlareErrorBoundary', {
|
|
261
|
+
enumerable: true,
|
|
262
|
+
get: function () {
|
|
263
|
+
return FlareErrorBoundary;
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
Object.defineProperty(exports, '__toESM', {
|
|
267
|
+
enumerable: true,
|
|
268
|
+
get: function () {
|
|
269
|
+
return __toESM;
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
Object.defineProperty(exports, 'flareReactErrorHandler', {
|
|
273
|
+
enumerable: true,
|
|
274
|
+
get: function () {
|
|
275
|
+
return flareReactErrorHandler;
|
|
276
|
+
}
|
|
277
|
+
});
|
|
278
|
+
Object.defineProperty(exports, 'registerDefaultFlare', {
|
|
279
|
+
enumerable: true,
|
|
280
|
+
get: function () {
|
|
281
|
+
return registerDefaultFlare;
|
|
282
|
+
}
|
|
283
|
+
});
|
|
284
|
+
Object.defineProperty(exports, 'registerReactSdkIdentity', {
|
|
285
|
+
enumerable: true,
|
|
286
|
+
get: function () {
|
|
287
|
+
return registerReactSdkIdentity;
|
|
288
|
+
}
|
|
289
|
+
});
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Component, ErrorInfo, PropsWithChildren, ReactNode } from "react";
|
|
2
|
+
import { Flare } from "@flareapp/js/browser";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
type ComponentStackFrame = {
|
|
6
|
+
component: string;
|
|
7
|
+
file: string | null;
|
|
8
|
+
line: number | null;
|
|
9
|
+
column: number | null;
|
|
10
|
+
};
|
|
11
|
+
type MinifiedReactError = {
|
|
12
|
+
number: number;
|
|
13
|
+
args: string[];
|
|
14
|
+
url: string | null;
|
|
15
|
+
};
|
|
16
|
+
type FlareReactContext = {
|
|
17
|
+
react: {
|
|
18
|
+
componentStack: string[];
|
|
19
|
+
componentStackFrames: ComponentStackFrame[];
|
|
20
|
+
version?: string;
|
|
21
|
+
minifiedError?: MinifiedReactError;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
//#endregion
|
|
25
|
+
//#region src/FlareErrorBoundary.d.ts
|
|
26
|
+
type FlareErrorBoundaryFallbackProps = {
|
|
27
|
+
error: Error;
|
|
28
|
+
componentStack: string[];
|
|
29
|
+
resetErrorBoundary: () => void;
|
|
30
|
+
};
|
|
31
|
+
type FlareErrorBoundaryProps = PropsWithChildren<{
|
|
32
|
+
flare?: Flare;
|
|
33
|
+
fallback?: ReactNode | ((props: FlareErrorBoundaryFallbackProps) => ReactNode);
|
|
34
|
+
resetKeys?: unknown[];
|
|
35
|
+
beforeEvaluate?: (params: {
|
|
36
|
+
error: Error;
|
|
37
|
+
errorInfo: ErrorInfo;
|
|
38
|
+
}) => void;
|
|
39
|
+
beforeSubmit?: (params: {
|
|
40
|
+
error: Error;
|
|
41
|
+
errorInfo: ErrorInfo;
|
|
42
|
+
context: FlareReactContext;
|
|
43
|
+
}) => FlareReactContext;
|
|
44
|
+
afterSubmit?: (params: {
|
|
45
|
+
error: Error;
|
|
46
|
+
errorInfo: ErrorInfo;
|
|
47
|
+
context: FlareReactContext;
|
|
48
|
+
}) => void;
|
|
49
|
+
onReset?: (error: Error | null) => void;
|
|
50
|
+
}>;
|
|
51
|
+
type FlareErrorBoundaryState = {
|
|
52
|
+
error: Error | null;
|
|
53
|
+
componentStack: string[];
|
|
54
|
+
};
|
|
55
|
+
declare class FlareErrorBoundary extends Component<FlareErrorBoundaryProps, FlareErrorBoundaryState> {
|
|
56
|
+
private readonly flare;
|
|
57
|
+
constructor(props: FlareErrorBoundaryProps);
|
|
58
|
+
state: FlareErrorBoundaryState;
|
|
59
|
+
static getDerivedStateFromError(error: Error): Partial<FlareErrorBoundaryState>;
|
|
60
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
61
|
+
componentDidUpdate(prevProps: FlareErrorBoundaryProps): void;
|
|
62
|
+
reset: () => void;
|
|
63
|
+
render(): ReactNode;
|
|
64
|
+
}
|
|
65
|
+
//#endregion
|
|
66
|
+
//#region src/flareReactErrorHandler.d.ts
|
|
67
|
+
type FlareReactErrorHandlerCallback = (error: unknown, errorInfo: {
|
|
68
|
+
componentStack?: string;
|
|
69
|
+
}) => void;
|
|
70
|
+
type FlareReactErrorHandlerOptions = {
|
|
71
|
+
flare?: Flare;
|
|
72
|
+
beforeEvaluate?: (params: {
|
|
73
|
+
error: Error;
|
|
74
|
+
errorInfo: {
|
|
75
|
+
componentStack?: string;
|
|
76
|
+
};
|
|
77
|
+
}) => void;
|
|
78
|
+
beforeSubmit?: (params: {
|
|
79
|
+
error: Error;
|
|
80
|
+
errorInfo: {
|
|
81
|
+
componentStack?: string;
|
|
82
|
+
};
|
|
83
|
+
context: FlareReactContext;
|
|
84
|
+
}) => FlareReactContext;
|
|
85
|
+
afterSubmit?: (params: {
|
|
86
|
+
error: Error;
|
|
87
|
+
errorInfo: {
|
|
88
|
+
componentStack?: string;
|
|
89
|
+
};
|
|
90
|
+
context: FlareReactContext;
|
|
91
|
+
}) => void;
|
|
92
|
+
};
|
|
93
|
+
declare function flareReactErrorHandler(options?: FlareReactErrorHandlerOptions): FlareReactErrorHandlerCallback;
|
|
94
|
+
//#endregion
|
|
95
|
+
export { FlareErrorBoundaryFallbackProps as a, FlareReactContext as c, FlareErrorBoundary as i, MinifiedReactError as l, FlareReactErrorHandlerOptions as n, FlareErrorBoundaryProps as o, flareReactErrorHandler as r, ComponentStackFrame as s, FlareReactErrorHandlerCallback as t };
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Component, version } from "react";
|
|
3
|
+
import { convertToError } from "@flareapp/core";
|
|
4
|
+
|
|
5
|
+
//#region src/constants.ts
|
|
6
|
+
const CHROMIUM_STACK_REGEX = /^at\s+(\S+)(?:\s+\((.+):(\d+):(\d+)\))?$/;
|
|
7
|
+
const FIREFOX_SAFARI_STACK_REGEX = /^(\S+?)@(.+):(\d+):(\d+)$/;
|
|
8
|
+
const PACKAGE_VERSION = typeof process !== "undefined" && true ? "2.5.0" : "?";
|
|
9
|
+
|
|
10
|
+
//#endregion
|
|
11
|
+
//#region src/identify.ts
|
|
12
|
+
const sdkTagged = /* @__PURE__ */ new WeakSet();
|
|
13
|
+
const frameworkTagged = /* @__PURE__ */ new WeakSet();
|
|
14
|
+
function registerReactSdkIdentity(flare) {
|
|
15
|
+
if (!sdkTagged.has(flare)) {
|
|
16
|
+
sdkTagged.add(flare);
|
|
17
|
+
flare.setSdkInfo({
|
|
18
|
+
name: "@flareapp/react",
|
|
19
|
+
version: PACKAGE_VERSION
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
tagReactFramework(flare);
|
|
23
|
+
}
|
|
24
|
+
function tagReactFramework(flare) {
|
|
25
|
+
if (frameworkTagged.has(flare)) return;
|
|
26
|
+
frameworkTagged.add(flare);
|
|
27
|
+
flare.setFramework({
|
|
28
|
+
name: "React",
|
|
29
|
+
version: React.version
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/resolveFlare.ts
|
|
35
|
+
let defaultProvider = null;
|
|
36
|
+
function isDevMode() {
|
|
37
|
+
try {
|
|
38
|
+
return process.env.NODE_ENV !== "production";
|
|
39
|
+
} catch {
|
|
40
|
+
return false;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
function registerDefaultFlare(provider) {
|
|
44
|
+
if (typeof window !== "undefined" && window.__flare) {
|
|
45
|
+
const message = "[flare] @flareapp/react (web root) was imported in a renderer where the Electron bridge is present, pulling the keyed @flareapp/js singleton into the renderer. Import @flareapp/react/inject and pass the @flareapp/electron/renderer instance instead.";
|
|
46
|
+
if (isDevMode()) throw new Error(message);
|
|
47
|
+
console.warn(message);
|
|
48
|
+
}
|
|
49
|
+
defaultProvider = provider;
|
|
50
|
+
}
|
|
51
|
+
function resolveFlare(explicit) {
|
|
52
|
+
if (explicit) return explicit;
|
|
53
|
+
if (defaultProvider) return defaultProvider();
|
|
54
|
+
throw new Error("[flare] No Flare instance available. Pass `flare` (e.g. from @flareapp/electron/renderer), or import @flareapp/react (the package root) to use the @flareapp/js default singleton.");
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region src/formatComponentStack.ts
|
|
59
|
+
function formatComponentStack(stack) {
|
|
60
|
+
return stack.split(/\s*\n\s*/g).filter((line) => line.length > 0);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
//#endregion
|
|
64
|
+
//#region src/parseComponentStack.ts
|
|
65
|
+
function parseComponentStack(stack) {
|
|
66
|
+
return stack.split(/\s*\n\s*/g).filter((line) => line.length > 0).map((line) => {
|
|
67
|
+
const chromeMatch = line.match(CHROMIUM_STACK_REGEX);
|
|
68
|
+
if (chromeMatch) return {
|
|
69
|
+
component: chromeMatch[1],
|
|
70
|
+
file: chromeMatch[2] ?? null,
|
|
71
|
+
line: chromeMatch[3] ? Number(chromeMatch[3]) : null,
|
|
72
|
+
column: chromeMatch[4] ? Number(chromeMatch[4]) : null
|
|
73
|
+
};
|
|
74
|
+
const firefoxSafariMatch = line.match(FIREFOX_SAFARI_STACK_REGEX);
|
|
75
|
+
if (firefoxSafariMatch) return {
|
|
76
|
+
component: firefoxSafariMatch[1],
|
|
77
|
+
file: firefoxSafariMatch[2],
|
|
78
|
+
line: Number(firefoxSafariMatch[3]),
|
|
79
|
+
column: Number(firefoxSafariMatch[4])
|
|
80
|
+
};
|
|
81
|
+
return {
|
|
82
|
+
component: line.replace(/^at\s+/, ""),
|
|
83
|
+
file: null,
|
|
84
|
+
line: null,
|
|
85
|
+
column: null
|
|
86
|
+
};
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
//#endregion
|
|
91
|
+
//#region src/parseMinifiedReactError.ts
|
|
92
|
+
const NUMBER_PATTERN = /Minified React error #(\d+)/;
|
|
93
|
+
const ARG_PATTERN = /args\[\]=([^&\s]*)/g;
|
|
94
|
+
const URL_PATTERN = /(https?:\/\/\S+)/;
|
|
95
|
+
function safeDecode(value) {
|
|
96
|
+
try {
|
|
97
|
+
return decodeURIComponent(value);
|
|
98
|
+
} catch {
|
|
99
|
+
return value;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
function parseMinifiedReactError(error) {
|
|
103
|
+
const message = error?.message;
|
|
104
|
+
if (!message) return null;
|
|
105
|
+
const numberMatch = message.match(NUMBER_PATTERN);
|
|
106
|
+
if (!numberMatch) return null;
|
|
107
|
+
const args = [];
|
|
108
|
+
for (const match of message.matchAll(ARG_PATTERN)) args.push(safeDecode(match[1]));
|
|
109
|
+
const urlMatch = message.match(URL_PATTERN);
|
|
110
|
+
return {
|
|
111
|
+
number: Number(numberMatch[1]),
|
|
112
|
+
args,
|
|
113
|
+
url: urlMatch ? urlMatch[1] : null
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
//#endregion
|
|
118
|
+
//#region src/buildReactContext.ts
|
|
119
|
+
function buildReactContext(rawStack, error) {
|
|
120
|
+
const minifiedError = parseMinifiedReactError(error);
|
|
121
|
+
return { react: {
|
|
122
|
+
componentStack: formatComponentStack(rawStack),
|
|
123
|
+
componentStackFrames: parseComponentStack(rawStack),
|
|
124
|
+
version,
|
|
125
|
+
...minifiedError ? { minifiedError } : {}
|
|
126
|
+
} };
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
//#endregion
|
|
130
|
+
//#region src/contextToAttributes.ts
|
|
131
|
+
function contextToAttributes(context) {
|
|
132
|
+
return { "context.custom": { react: {
|
|
133
|
+
componentStack: context.react.componentStack,
|
|
134
|
+
componentStackFrames: context.react.componentStackFrames,
|
|
135
|
+
...context.react.version ? { version: context.react.version } : {},
|
|
136
|
+
...context.react.minifiedError ? { minifiedError: context.react.minifiedError } : {}
|
|
137
|
+
} } };
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
//#endregion
|
|
141
|
+
//#region src/FlareErrorBoundary.ts
|
|
142
|
+
var FlareErrorBoundary = class extends Component {
|
|
143
|
+
flare;
|
|
144
|
+
constructor(props) {
|
|
145
|
+
super(props);
|
|
146
|
+
this.flare = resolveFlare(props.flare);
|
|
147
|
+
tagReactFramework(this.flare);
|
|
148
|
+
}
|
|
149
|
+
state = {
|
|
150
|
+
error: null,
|
|
151
|
+
componentStack: []
|
|
152
|
+
};
|
|
153
|
+
static getDerivedStateFromError(error) {
|
|
154
|
+
return { error };
|
|
155
|
+
}
|
|
156
|
+
componentDidCatch(error, errorInfo) {
|
|
157
|
+
this.props.beforeEvaluate?.({
|
|
158
|
+
error,
|
|
159
|
+
errorInfo
|
|
160
|
+
});
|
|
161
|
+
const context = buildReactContext(errorInfo.componentStack ?? "", error);
|
|
162
|
+
const finalContext = this.props.beforeSubmit?.({
|
|
163
|
+
error,
|
|
164
|
+
errorInfo,
|
|
165
|
+
context
|
|
166
|
+
}) ?? context;
|
|
167
|
+
this.setState({ componentStack: finalContext.react.componentStack });
|
|
168
|
+
this.flare.reportSilently(error, contextToAttributes(finalContext));
|
|
169
|
+
this.props.afterSubmit?.({
|
|
170
|
+
error,
|
|
171
|
+
errorInfo,
|
|
172
|
+
context: finalContext
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
componentDidUpdate(prevProps) {
|
|
176
|
+
if (this.state.error === null || !this.props.resetKeys) return;
|
|
177
|
+
const prevKeys = prevProps.resetKeys;
|
|
178
|
+
const nextKeys = this.props.resetKeys;
|
|
179
|
+
const lengthChanged = prevKeys?.length !== nextKeys.length;
|
|
180
|
+
const valuesChanged = nextKeys.some((key, i) => !Object.is(key, prevKeys?.[i]));
|
|
181
|
+
if (lengthChanged || valuesChanged) this.reset();
|
|
182
|
+
}
|
|
183
|
+
reset = () => {
|
|
184
|
+
const { error } = this.state;
|
|
185
|
+
this.props.onReset?.(error);
|
|
186
|
+
this.setState({
|
|
187
|
+
error: null,
|
|
188
|
+
componentStack: []
|
|
189
|
+
});
|
|
190
|
+
};
|
|
191
|
+
render() {
|
|
192
|
+
const { error } = this.state;
|
|
193
|
+
if (error !== null) {
|
|
194
|
+
const { fallback } = this.props;
|
|
195
|
+
if (typeof fallback === "function") return fallback({
|
|
196
|
+
error,
|
|
197
|
+
componentStack: this.state.componentStack,
|
|
198
|
+
resetErrorBoundary: this.reset
|
|
199
|
+
});
|
|
200
|
+
return fallback ?? null;
|
|
201
|
+
}
|
|
202
|
+
return this.props.children;
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
//#endregion
|
|
207
|
+
//#region src/flareReactErrorHandler.ts
|
|
208
|
+
function flareReactErrorHandler(options) {
|
|
209
|
+
const flare = resolveFlare(options?.flare);
|
|
210
|
+
tagReactFramework(flare);
|
|
211
|
+
return (error, errorInfo) => {
|
|
212
|
+
const errorObject = convertToError(error);
|
|
213
|
+
options?.beforeEvaluate?.({
|
|
214
|
+
error: errorObject,
|
|
215
|
+
errorInfo
|
|
216
|
+
});
|
|
217
|
+
const context = buildReactContext(errorInfo.componentStack ?? "", errorObject);
|
|
218
|
+
const finalContext = options?.beforeSubmit?.({
|
|
219
|
+
error: errorObject,
|
|
220
|
+
errorInfo,
|
|
221
|
+
context
|
|
222
|
+
}) ?? context;
|
|
223
|
+
flare.reportSilently(errorObject, contextToAttributes(finalContext));
|
|
224
|
+
options?.afterSubmit?.({
|
|
225
|
+
error: errorObject,
|
|
226
|
+
errorInfo,
|
|
227
|
+
context: finalContext
|
|
228
|
+
});
|
|
229
|
+
};
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
//#endregion
|
|
233
|
+
export { registerReactSdkIdentity as i, FlareErrorBoundary as n, registerDefaultFlare as r, flareReactErrorHandler as t };
|