0
# Error Reporting
1

2
Core error reporting functionality for monitoring and displaying runtime errors and build errors in the React Error Overlay.
3

4
## Capabilities
5

6
### Start Runtime Error Reporting
7

8
Begins automatic monitoring of runtime errors, unhandled promise rejections, and console errors.
9

10
```javascript { .api }
11
/**
12
 * Starts automatic runtime error reporting with configurable options
13
 * @param options - Configuration object with error callback and optional filename
14
 * @throws Error if already listening for errors
15
 */
16
function startReportingRuntimeErrors(options: RuntimeReportingOptions): void;
17

18
interface RuntimeReportingOptions {
19
  /** Callback function executed when an error is detected and processed */
20
  onError: () => void;
21
  /** Optional filename for source mapping, defaults to '/static/js/bundle.js' */
22
  filename?: string;
23
  /** @deprecated launchEditorEndpoint is no longer supported. Use setEditorHandler instead. */
24
  launchEditorEndpoint?: string;
25
}
26
```
27

28
**Usage Examples:**
29

30
```javascript
31
import { startReportingRuntimeErrors } from "react-error-overlay";
32

33
// Basic error reporting
34
startReportingRuntimeErrors({
35
  onError: () => {
36
    console.log('An error occurred and is being displayed');
37
  }
38
});
39

40
// With custom filename for source mapping
41
startReportingRuntimeErrors({
42
  onError: () => {
43
    // Handle error detection
44
    analytics.track('development_error_detected');
45
  },
46
  filename: '/static/js/main.bundle.js'
47
});
48
```
49

50
### Stop Runtime Error Reporting
51

52
Stops automatic error monitoring and cleans up event listeners.
53

54
```javascript { .api }
55
/**
56
 * Stops runtime error reporting and removes all error listeners
57
 * @throws Error if not currently listening for errors
58
 */
59
function stopReportingRuntimeErrors(): void;
60
```
61

62
**Usage Examples:**
63

64
```javascript
65
import { 
66
  startReportingRuntimeErrors, 
67
  stopReportingRuntimeErrors 
68
} from "react-error-overlay";
69

70
// Start error reporting
71
startReportingRuntimeErrors({
72
  onError: () => console.log('Error detected')
73
});
74

75
// Later, stop error reporting (e.g., when switching to production mode)
76
try {
77
  stopReportingRuntimeErrors();
78
  console.log('Error reporting stopped');
79
} catch (error) {
80
  console.log('Error reporting was not active');
81
}
82
```
83

84
### Report Runtime Error
85

86
Manually reports a specific runtime error to be displayed in the overlay.
87

88
```javascript { .api }
89
/**
90
 * Manually reports a runtime error for display in the overlay
91
 * @param error - JavaScript Error object to report
92
 * @param options - Optional configuration object
93
 */
94
function reportRuntimeError(
95
  error: Error, 
96
  options?: RuntimeReportingOptions
97
): void;
98
```
99

100
**Usage Examples:**
101

102
```javascript
103
import { reportRuntimeError } from "react-error-overlay";
104

105
// Report a caught error
106
try {
107
  riskyOperation();
108
} catch (error) {
109
  reportRuntimeError(error, {
110
    onError: () => {
111
      console.log('Manually reported error is displayed');
112
    }
113
  });
114
}
115

116
// Report a custom error
117
const customError = new Error('Something went wrong in data processing');
118
customError.stack = getCustomStackTrace();
119
reportRuntimeError(customError);
120
```
121

122
### Report Build Error
123

124
Reports compilation or build errors to be displayed in the overlay.
125

126
```javascript { .api }
127
/**
128
 * Reports a build/compilation error for display in the overlay
129
 * @param error - String containing the formatted build error message
130
 */
131
function reportBuildError(error: string): void;
132
```
133

134
**Usage Examples:**
135

136
```javascript
137
import { reportBuildError } from "react-error-overlay";
138

139
// Report webpack compilation error
140
const webpackError = `
141
Module build failed: SyntaxError: Unexpected token (15:4)
142

143
  13 |   return (
144
  14 |     <div>
145
> 15 |       <p>Hello World</p
146
  16 |     </div>
147
  17 |   );
148
  18 | }
149
`;
150

151
reportBuildError(webpackError);
152

153
// Report TypeScript error
154
const tsError = `
155
TypeScript error in /src/components/Button.tsx(12,5):
156
Type 'string' is not assignable to type 'number'.
157
`;
158

159
reportBuildError(tsError);
160
```
161

162
## Error Deduplication
163

164
The error reporting system automatically deduplicates identical errors to prevent spam:
165

166
```javascript
167
// These will only show once, even if the same error occurs multiple times
168
const error = new Error('Duplicate error');
169
reportRuntimeError(error);
170
reportRuntimeError(error); // Deduplicated - won't show again
171
reportRuntimeError(error); // Deduplicated - won't show again
172
```
173

174
## Types
175

176
```javascript { .api }
177
interface RuntimeReportingOptions {
178
  /** Callback function executed when an error is detected and processed */
179
  onError: () => void;
180
  /** Optional filename for source mapping, defaults to '/static/js/bundle.js' */
181
  filename?: string;
182
  /** @deprecated launchEditorEndpoint is no longer supported. Use setEditorHandler instead. */
183
  launchEditorEndpoint?: string;
184
}
185
```