Skip to content

Commit a80c29f

Browse files
patinthehatPatrick
patinthehat
authored and
Patrick
committed
add support for sending window errors and unhandled rejection errors to ray (in addition to vue errors)
1 parent c46d124 commit a80c29f

File tree

5 files changed

+237
-0
lines changed

5 files changed

+237
-0
lines changed

‎src/shared/InitializeOptions.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
/* eslint-disable no-undef */
12
///const { Ray } = require('node-ray/web');
23
import { VueRay } from './VueRay';
34
import errorHandler from './ErrorHandler';
5+
import { installWindowErrorHandlers } from './WindowErrorHandlers';
46

57
export const initializeOptions = (options: any, vueConfig: any) => {
68
if (options.interceptErrors === true) {
79
vueConfig.errorHandler = errorHandler;
10+
installWindowErrorHandlers(globalThis);
811
}
912

1013
let host = 'localhost',

‎src/shared/WindowErrorHandlers.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/* eslint-disable no-unused-vars */
2+
3+
import { ray } from './VueRay';
4+
5+
export const rayInstance = {
6+
handler: (...args: any[]): any => {},
7+
};
8+
9+
export const setRayInstance = (instance: any) => {
10+
rayInstance.handler = instance;
11+
};
12+
13+
export const onErrorHandler = (message: string, source: string, lineno: number, colno: number, error: any) => {
14+
const html = `
15+
<div class="flex bg-white border-0">
16+
<div class="flex-row bg-white text-red-400 pr-1 pl-1 border border-1 border-red-400">${message}</div>
17+
<div style="padding-top: 0.25em;" class="flex-row"><code>${source}</code></div>
18+
</div>`;
19+
20+
console.log(rayInstance);
21+
22+
rayInstance.handler().html(`<pre>${html}</pre>`, 'Error').small().red();
23+
};
24+
25+
export const onUnhandledRejectionEventHandler = (event: any) => {
26+
const html = `
27+
<div class="flex bg-white border-0">
28+
<div class="flex-row bg-white text-red-400 pr-1 pl-1 border border-1 border-red-400">${event.reason}</div>
29+
<div style="padding-top: 0.25em;" class="flex-row"><code>${JSON.stringify(event)}</code></div>
30+
</div>`;
31+
32+
rayInstance.handler().html(`<pre>${html}</pre>`, 'Error').small().red();
33+
};
34+
35+
export const installWindowErrorHandlers = (window: any, rayFunc: any = null, onError: any = null, onUnhandled: any = null) => {
36+
//rayInstance.handler = rayFunc ?? ray;
37+
38+
window.onerror = onError ?? onErrorHandler;
39+
window.unhandledrejection = onUnhandled ?? onUnhandledRejectionEventHandler;
40+
};

‎tests/TestClasses/FakeClient.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,8 @@ export class FakeClient extends Client {
7575

7676
return path.replace(sep, '/');
7777
}
78+
79+
public isRayAvailable(): boolean {
80+
return true;
81+
}
7882
}

‎tests/shared/WindowErrorHandlers.test.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/* eslint-disable no-undef */
2+
/* eslint-disable no-unused-vars */
3+
4+
import { VueRay } from '../../src/shared/VueRay';
5+
import { FakeClient } from '../TestClasses/FakeClient';
6+
7+
import {
8+
setRayInstance,
9+
onErrorHandler,
10+
onUnhandledRejectionEventHandler,
11+
installWindowErrorHandlers,
12+
} from '../../src/shared/WindowErrorHandlers';
13+
14+
let ray: VueRay, client: FakeClient;
15+
16+
beforeEach(() => {
17+
client = new FakeClient(3000, 'localhost');
18+
ray = VueRay.create(client, 'fakeUuid');
19+
20+
ray.component = {
21+
$data: { one: 1 },
22+
$props: { title: 'abc' },
23+
$refs: { test1: { innerHTML: '<em>123</em>' } },
24+
trackingRays: {},
25+
trackingStops: {},
26+
$ray(...args: any[]) {
27+
return ray.send(...args);
28+
},
29+
};
30+
31+
setRayInstance(ray.component.$ray);
32+
33+
ray.data();
34+
});
35+
36+
it('installs error handlers onto the window object', () => {
37+
const win = {
38+
onerror: null,
39+
unhandledrejection: null,
40+
};
41+
42+
installWindowErrorHandlers(win, ray);
43+
44+
expect(win.onerror).not.toBeNull();
45+
expect(win.unhandledrejection).not.toBeNull();
46+
});
47+
48+
it('sends window errors to ray', () => {
49+
const win = {
50+
onerror: null,
51+
unhandledrejection: null,
52+
};
53+
54+
installWindowErrorHandlers(win);
55+
56+
onErrorHandler('test', 'source test', 12, 2, {});
57+
58+
expect(client.sentPayloads().length).toBeGreaterThan(0);
59+
expect(client.sentPayloads()).toMatchSnapshot();
60+
});
61+
62+
it('sends unhandled rejection errors to ray', () => {
63+
const win = {
64+
onerror: null,
65+
unhandledrejection: null,
66+
};
67+
68+
const event = {
69+
reason: 'test',
70+
};
71+
72+
installWindowErrorHandlers(win);
73+
74+
onUnhandledRejectionEventHandler(event);
75+
76+
expect(client.sentPayloads().length).toBeGreaterThan(0);
77+
expect(client.sentPayloads()).toMatchSnapshot();
78+
});

‎tests/shared/__snapshots__/WindowErrorHandlers.test.ts.snap

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`sends unhandled rejection errors to ray 1`] = `
4+
Array [
5+
Object {
6+
"meta": Array [],
7+
"payloads": Array [
8+
Object {
9+
"content": Object {
10+
"label": "Data",
11+
"values": Array [
12+
"<code style=\\"font-size: 0.8rem!important;\\"><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-yellow-600 bold\\">Object</span>&nbsp;<code style=\\"font-size: 0.8rem!important;\\" class=\\"text-gray-600 \\"><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">{</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<code style=\\"font-size: 0.8rem!important;\\" class=\\"bold text-green-600 p-0\\">\\"one\\"</code><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">:&nbsp;</span>1<span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">,</span><br><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">}</span></code></code>",
13+
],
14+
},
15+
"origin": Object {
16+
"file": "web.cjs.js",
17+
"function_name": "xxxx",
18+
"hostname": "remote",
19+
"line_number": 999,
20+
},
21+
"type": "table",
22+
},
23+
],
24+
"uuid": "fakeUuid",
25+
},
26+
Object {
27+
"meta": Array [],
28+
"payloads": Array [
29+
Object {
30+
"content": Object {
31+
"content": "<pre>
32+
<div class=\\"flex bg-white border-0\\">
33+
<div class=\\"flex-row bg-white text-red-400 pr-1 pl-1 border border-1 border-red-400\\">test</div>
34+
<div style=\\"padding-top: 0.25em;\\" class=\\"flex-row\\"><code>{\\"reason\\":\\"test\\"}</code></div>
35+
</div></pre>",
36+
"label": "HTML",
37+
},
38+
"origin": Object {
39+
"file": "web.cjs.js",
40+
"function_name": "xxxx",
41+
"hostname": "remote",
42+
"line_number": 999,
43+
},
44+
"type": "custom",
45+
},
46+
],
47+
"uuid": "fakeUuid",
48+
},
49+
Object {
50+
"meta": Array [],
51+
"payloads": Array [
52+
Object {
53+
"content": Object {
54+
"size": "sm",
55+
},
56+
"origin": Object {
57+
"file": "web.cjs.js",
58+
"function_name": "xxxx",
59+
"hostname": "remote",
60+
"line_number": 999,
61+
},
62+
"type": "size",
63+
},
64+
],
65+
"uuid": "fakeUuid",
66+
},
67+
Object {
68+
"meta": Array [],
69+
"payloads": Array [
70+
Object {
71+
"content": Object {
72+
"color": "red",
73+
},
74+
"origin": Object {
75+
"file": "web.cjs.js",
76+
"function_name": "xxxx",
77+
"hostname": "remote",
78+
"line_number": 999,
79+
},
80+
"type": "color",
81+
},
82+
],
83+
"uuid": "fakeUuid",
84+
},
85+
]
86+
`;
87+
88+
exports[`sends window errors to ray 1`] = `
89+
Array [
90+
Object {
91+
"meta": Array [],
92+
"payloads": Array [
93+
Object {
94+
"content": Object {
95+
"label": "Data",
96+
"values": Array [
97+
"<code style=\\"font-size: 0.8rem!important;\\"><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-yellow-600 bold\\">Object</span>&nbsp;<code style=\\"font-size: 0.8rem!important;\\" class=\\"text-gray-600 \\"><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">{</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<code style=\\"font-size: 0.8rem!important;\\" class=\\"bold text-green-600 p-0\\">\\"one\\"</code><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">:&nbsp;</span>1<span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">,</span><br><span style=\\"font-size: 0.8rem!important;\\" class=\\"text-orange-400 bold\\">}</span></code></code>",
98+
],
99+
},
100+
"origin": Object {
101+
"file": "web.cjs.js",
102+
"function_name": "xxxx",
103+
"hostname": "remote",
104+
"line_number": 999,
105+
},
106+
"type": "table",
107+
},
108+
],
109+
"uuid": "fakeUuid",
110+
},
111+
]
112+
`;

0 commit comments

Comments
 (0)