0
# Editor Integration
1

2
Integration with code editors to enable opening files at specific locations when stack frames are clicked in the React Error Overlay.
3

4
## Capabilities
5

6
### Set Editor Handler
7

8
Configures a custom handler function for opening files in an editor when stack frame locations are clicked.
9

10
```javascript { .api }
11
/**
12
 * Sets a handler function for opening files in an editor
13
 * @param handler - Function that handles opening files at specific locations, or null to remove handler
14
 */
15
function setEditorHandler(handler: EditorHandler | null): void;
16

17
type EditorHandler = (errorLoc: ErrorLocation) => void;
18

19
interface ErrorLocation {
20
  /** Path to the file to open */
21
  fileName: string;
22
  /** Line number to navigate to (1-indexed) */
23
  lineNumber: number;
24
  /** Optional column number to navigate to (1-indexed) */
25
  colNumber?: number;
26
}
27
```
28

29
**Usage Examples:**
30

31
```javascript
32
import { setEditorHandler } from "react-error-overlay";
33

34
// Set up VS Code integration
35
setEditorHandler((errorLocation) => {
36
  const { fileName, lineNumber, colNumber } = errorLocation;
37
  
38
  // Open in VS Code via command line
39
  const command = colNumber 
40
    ? `code --goto ${fileName}:${lineNumber}:${colNumber}`
41
    : `code --goto ${fileName}:${lineNumber}`;
42
    
43
  // Send to development server endpoint
44
  fetch('/__open-in-editor', {
45
    method: 'POST',
46
    headers: { 'Content-Type': 'application/json' },
47
    body: JSON.stringify({ command })
48
  });
49
});
50

51
// Set up WebStorm integration
52
setEditorHandler((errorLocation) => {
53
  const { fileName, lineNumber } = errorLocation;
54
  const url = `webstorm://open?file=${fileName}&line=${lineNumber}`;
55
  window.open(url);
56
});
57

58
// Remove editor integration
59
setEditorHandler(null);
60
```
61

62
### Create React App Integration
63

64
The error overlay integrates seamlessly with Create React App's built-in editor support:
65

66
```javascript
67
import { setEditorHandler } from "react-error-overlay";
68

69
// Create React App style integration
70
setEditorHandler((errorLocation) => {
71
  fetch('/__open-stack-frame-in-editor', {
72
    method: 'POST',
73
    headers: {
74
      'Content-Type': 'application/json',
75
    },
76
    body: JSON.stringify(errorLocation)
77
  }).catch(() => {
78
    // Fallback if development server doesn't support editor integration
79
    console.log('Could not open in editor:', errorLocation);
80
  });
81
});
82
```
83

84
### Custom Editor Protocols
85

86
Support for custom editor protocols and URL schemes:
87

88
```javascript
89
import { setEditorHandler } from "react-error-overlay";
90

91
// Sublime Text integration
92
setEditorHandler((errorLocation) => {
93
  const { fileName, lineNumber, colNumber } = errorLocation;
94
  const url = `subl://open?url=file://${fileName}&line=${lineNumber}&column=${colNumber || 1}`;
95
  window.location.href = url;
96
});
97

98
// Atom integration  
99
setEditorHandler((errorLocation) => {
100
  const { fileName, lineNumber, colNumber } = errorLocation;
101
  const url = `atom://core/open/file?filename=${fileName}&line=${lineNumber}&column=${colNumber || 1}`;
102
  window.location.href = url;
103
});
104

105
// Vim integration via terminal
106
setEditorHandler((errorLocation) => {
107
  const { fileName, lineNumber } = errorLocation;
108
  
109
  fetch('/api/open-in-vim', {
110
    method: 'POST',
111
    headers: { 'Content-Type': 'application/json' },
112
    body: JSON.stringify({
113
      command: `vim +${lineNumber} ${fileName}`
114
    })
115
  });
116
});
117
```
118

119
### Handler Lifecycle
120

121
The editor handler is persistent and automatically applied to new error overlays:
122

123
```javascript
124
import { 
125
  setEditorHandler, 
126
  reportRuntimeError,
127
  startReportingRuntimeErrors 
128
} from "react-error-overlay";
129

130
// Set handler once
131
setEditorHandler((errorLocation) => {
132
  console.log('Opening:', errorLocation);
133
  // Custom editor logic here
134
});
135

136
// Handler applies to all subsequent errors
137
reportRuntimeError(new Error('Manual error'));
138

139
startReportingRuntimeErrors({
140
  onError: () => console.log('Auto-detected error')
141
});
142

143
// All stack frames in errors will use the configured handler
144
```
145

146
### Development Server Integration
147

148
Common patterns for integrating with development servers:
149

150
```javascript
151
import { setEditorHandler } from "react-error-overlay";
152

153
// Webpack Dev Server integration
154
setEditorHandler((errorLocation) => {
155
  const params = new URLSearchParams({
156
    fileName: errorLocation.fileName,
157
    lineNumber: errorLocation.lineNumber.toString(),
158
    colNumber: (errorLocation.colNumber || 1).toString()
159
  });
160
  
161
  fetch(`/__open-stack-frame-in-editor?${params}`, {
162
    method: 'GET'
163
  });
164
});
165

166
// Vite integration
167
setEditorHandler((errorLocation) => {
168
  fetch('/__open-in-editor', {
169
    method: 'GET',
170
    headers: {
171
      'file': errorLocation.fileName,
172
      'line': errorLocation.lineNumber.toString(),
173
      'column': (errorLocation.colNumber || 1).toString()
174
    }
175
  });
176
});
177
```
178

179
## Types
180

181
```javascript { .api }
182
type EditorHandler = (errorLoc: ErrorLocation) => void;
183

184
interface ErrorLocation {
185
  /** Path to the file to open */
186
  fileName: string;
187
  /** Line number to navigate to (1-indexed) */
188
  lineNumber: number;
189
  /** Optional column number to navigate to (1-indexed) */
190
  colNumber?: number;
191
}
192
```