|
1 | | -Currently, there is no SDK available for the frontend. Nevertheless, it |
2 | | -is still easy to start a new screen capture |
| 1 | +# JavaScript (Browser) |
3 | 2 |
|
4 | | -# Frontend Integration |
| 3 | +Whenever you want to start a Session from the frontend, you need to have a Template with |
| 4 | +"Allow User Initiation" checked. Read more in the [Templates](https://wirequery.io/docs/features/templates) Feature Chapter. |
5 | 5 |
|
6 | | -In order to start a frontend recording, you need to install |
7 | | -`rrweb` and `rrweb-snapshot`. |
| 6 | +When you want the user to be able to record a session, you basically want to call WireQuery twice: |
| 7 | + |
| 8 | +- Start the recording (and, more specifically, all queries in the template) |
| 9 | +- Stop the recording |
| 10 | + |
| 11 | +In order to be able to start a frontend recording, you need to install `rrweb` and `rrweb-snapshot`. |
| 12 | + |
| 13 | +Currently, there is no SDK available for the frontend. Nevertheless, it is very easy to integrate the frontend |
| 14 | +with WireQuery using a few simple `fetch` commands and using `rrweb`. |
| 15 | + |
| 16 | +## Start Recording |
| 17 | + |
| 18 | +A recording can be started by calling the `recordings` endpoint from WireQuery. |
| 19 | +``` |
| 20 | +const res = await fetch("<WireQuery Host>/api/v1/recordings", { |
| 21 | + method: "POST", |
| 22 | + headers: { |
| 23 | + "Content-Type": "application/json", |
| 24 | + }, |
| 25 | + body: JSON.stringify({ |
| 26 | + templateId: <templateId>, |
| 27 | + args: { |
| 28 | + <template args> |
| 29 | + }, |
| 30 | + }), |
| 31 | +}) |
| 32 | +
|
| 33 | +const recording = await res.json() |
| 34 | +
|
| 35 | +``` |
| 36 | +Here, the `<templateId>` has to be set to the Template id mentioned earlier. The args need to container |
| 37 | +the parameters of that template, such as the `accountId`. For example: |
8 | 38 |
|
9 | | -A recording can be started by: |
10 | 39 | ``` |
11 | | - fetch("https://demo.wirequery.io/api/v1/recordings", { |
12 | | - method: "POST", |
13 | | - headers: { |
14 | | - "Content-Type": "application/json", |
15 | | - }, |
16 | | - body: JSON.stringify({ |
17 | | - templateId: ...templateId..., |
18 | | - args: { |
19 | | - ...template args... |
20 | | - }, |
21 | | - lookbackSecs: 0, |
22 | | - timeoutSecs: 30, |
23 | | - }), |
24 | | - }) |
| 40 | +const res = fetch("https://demo.wirequery.io/api/v1/recordings", { |
| 41 | + method: "POST", |
| 42 | + headers: { |
| 43 | + "Content-Type": "application/json", |
| 44 | + }, |
| 45 | + body: JSON.stringify({ |
| 46 | + templateId: 1, |
| 47 | + args: { |
| 48 | + accountId |
| 49 | + }, |
| 50 | + }), |
| 51 | +}) |
| 52 | +
|
| 53 | +const recording = await res.json() |
25 | 54 | ``` |
| 55 | + |
| 56 | +## Recording |
| 57 | + |
| 58 | +The actual recording needs to be taken care by `rrweb`. A guide on `rrweb` can be found on |
| 59 | +[GitHub](https://github.com/rrweb-io/rrweb/blob/master/guide.md), and an example can be found |
| 60 | +in the [Transactions](https://github.com/wirequery/wirequery/tree/main/sdk/js/examples/transactions) example. |
| 61 | + |
| 62 | +## Finish Recording |
| 63 | + |
| 64 | +Similarly, when a recording is finished, a call to WireQuery needs to be made as well to send and finalize the recording. |
| 65 | + |
26 | 66 | When the recording is finished, the following call needs to be made: |
27 | 67 | ``` |
28 | | - fetch(`https://demo.wirequery.io/api/v1/recordings/${recording.id}/finish`, { |
29 | | - method: "POST", |
30 | | - headers: { |
31 | | - "Content-Type": "application/json", |
32 | | - }, |
33 | | - body: JSON.stringify({ |
34 | | - secret: recording.secret, |
35 | | - recording: JSON.stringify(events), |
36 | | - context: {}, |
37 | | - }), |
38 | | - }); |
| 68 | +fetch(`<WireQuery Host>/api/v1/recordings/${recording.id}/finish`, { |
| 69 | + method: "POST", |
| 70 | + headers: { |
| 71 | + "Content-Type": "application/json", |
| 72 | + }, |
| 73 | + body: JSON.stringify({ |
| 74 | + secret: recording.secret, |
| 75 | + recording: JSON.stringify(events), |
| 76 | + context: {}, |
| 77 | + }), |
| 78 | +}); |
39 | 79 | ``` |
40 | | -Where `events` represent `rrweb` events. |
| 80 | +Where `events` represent `rrweb` events and `<WireQuery Host>` is the host of WireQuery, such as `https://demo.wirequery.io`. |
| 81 | + |
| 82 | +An example of how `rrweb` can be used, can be found in the `sdk/js/examples/transactions` in the [WireQuery](https://github.com/wirequery/wirequery) repository. |
| 83 | + |
| 84 | +## Examples |
| 85 | + |
| 86 | +The following examples demonstrate how WireQuery can be used within a Frontend application: |
41 | 87 |
|
42 | | -An example of how `rrweb` can be used, can be found in the `sdk/js/examples/transactions`. |
| 88 | +- [Transactions](https://github.com/wirequery/wirequery/tree/main/sdk/js/examples/transactions) - simulates a financial system that can create and retrieve transactions. Requires two backends to function properly: |
| 89 | + - [Transaction Service](https://github.com/wirequery/wirequery/tree/main/sdk/jvm/examples/spring-boot/transactions) - simulates a financial system that can create and retrieve transactions. |
| 90 | + - [Balance Calculator](https://github.com/wirequery/wirequery/tree/main/sdk/jvm/examples/spring-boot/balance-calculator) - calculates a user's balance based on the transactions from the `transactions` service. Exemplifies how to use `extensions`. |
0 commit comments