@dash0/sdk-web 0.16.0 → 0.16.2

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.
Files changed (32) hide show
  1. package/README.md +32 -583
  2. package/dist/dash0.iife.js +1 -1
  3. package/dist/dash0.iife.js.map +1 -1
  4. package/dist/dash0.js +1 -1
  5. package/dist/dash0.js.map +1 -1
  6. package/dist/dash0.umd.cjs +1 -1
  7. package/dist/dash0.umd.cjs.map +1 -1
  8. package/dist/modules/api/report-error.js +1 -1
  9. package/dist/modules/instrumentations/errors/event-handlers.js +2 -2
  10. package/dist/modules/instrumentations/errors/unhandled-error.js +1 -1
  11. package/dist/modules/instrumentations/errors/unhandled-promise-rejection.js +4 -4
  12. package/dist/modules/instrumentations/http/fetch.js +83 -23
  13. package/dist/modules/transport/index.js +2 -0
  14. package/dist/modules/utils/index.js +1 -0
  15. package/dist/modules/utils/otel/span.js +9 -0
  16. package/dist/modules/utils/performance.js +16 -3
  17. package/dist/tsconfig.tsbuildinfo +1 -1
  18. package/dist/types/instrumentations/errors/unhandled-error.d.ts +1 -1
  19. package/dist/types/transport/index.d.ts +1 -1
  20. package/dist/types/utils/index.d.ts +1 -0
  21. package/dist/types/utils/otel/span.d.ts +5 -1
  22. package/dist/types/utils/performance.d.ts +5 -1
  23. package/package.json +1 -1
  24. package/src/api/report-error.ts +1 -1
  25. package/src/instrumentations/errors/event-handlers.ts +2 -2
  26. package/src/instrumentations/errors/unhandled-error.ts +1 -1
  27. package/src/instrumentations/errors/unhandled-promise-rejection.ts +4 -4
  28. package/src/instrumentations/http/fetch.ts +95 -24
  29. package/src/transport/index.ts +3 -1
  30. package/src/utils/index.ts +1 -0
  31. package/src/utils/otel/span.ts +16 -1
  32. package/src/utils/performance.ts +21 -4
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Dash0 Web SDK
2
2
 
3
- This SDK enables users of dash0's web monitoring features to instrument a website or single-page-application to capture
4
- and transmit telemetry to dash0.
3
+ This SDK enables users of Dash0's web monitoring features to instrument a website or single-page-application to capture
4
+ and transmit telemetry to Dash0.
5
5
 
6
6
  Features include:
7
7
 
@@ -10,593 +10,42 @@ Features include:
10
10
  - HTTP request instrumentation
11
11
  - Error tracking
12
12
 
13
- ## Getting Started
13
+ ## Getting started
14
14
 
15
- The SDK is currently only distributed as an npm package, additional distribution formats will be added in the future.
16
- Should you need a currently unavailable format, let us know by creating a github issue or via [support@dash0.com](mailto:support@dash0.com).
15
+ 1. Get an active Dash0 account. [Sign Up](https://www.Dash0.com/sign-up)
16
+ 1. Prepare an [Auth Token](https://www.Dash0.com/documentation/Dash0/key-concepts/auth-tokens); auth tokens for client monitoring will be public as part of your website, please make sure to:
17
17
 
18
- ### Before you begin
18
+ - Use a separate token, exclusively for website monitoring; if you want to monitor multiple websites, it is best to use a dedicated token for each
19
+ - Limit the dataset permissions on the auth token to the dataset you want to ingest Website Monitoring data with
20
+ - Limit permissions on the auth token to `Ingesting`
19
21
 
20
- You'll need a couple of prerequisites before you can start:
22
+ 1. Get the [Endpoint](https://www.Dash0.com/documentation/Dash0/key-concepts/endpoints) URL for your Dash0 region. You can find it via `Organization Settings > Endpoints > OTLP via HTTP`.
23
+ 1. Add the SDK to your dependencies
21
24
 
22
- - An active dash0 account. [Sign Up](https://www.dash0.com/sign-up)
23
- - An [Auth Token](https://www.dash0.com/documentation/dash0/key-concepts/auth-tokens)
24
- Auth tokens for client monitoring will be public as part of your website, please make sure to:
25
- - Use a separate token, exclusively for web monitoring
26
- - Limit the dataset to the dataset you want to ingest to
27
- - Limit permissions to `Ingesting`
28
- - The [Endpoint](https://www.dash0.com/documentation/dash0/key-concepts/endpoints) url for your dash0 region. You can find it via `Organization Settings > Endpoints > OTLP via HTTP`.
29
-
30
- ### Installation
31
-
32
- #### Via package
33
-
34
- - Add the SDK to your dependencies
35
- ```
36
- # npm
37
- npm install @dash0/sdk-web
38
- # yarn
39
- yarn add @dash0/sdk-web
40
- ```
41
- - Initialize the sdk
42
- In order to initialize the sdk you'll need to call the `init` function at a convenient time in your applications lifecycle.
43
- Ideally this should happen as early as possible, as most instrumentations can only observe events after init has been called.
44
-
45
- ```js
46
- import { init } from "@dash0/sdk-web";
47
-
48
- init({
49
- serviceName: "my-website",
50
- endpoint: {
51
- // Replace this with the endpoint url identified during preparation
52
- url: "http://example.com",
53
- // Replace this with your auth token you created earlier
54
- // Ideally inject the value at build time to not commit the token to git, even if its effectively public
55
- authToken: "your-auth-token-goes-here",
56
- },
57
- });
58
- ```
59
-
60
- ## Configuration
61
-
62
- The following configuration options are available, in order to customize the behaviour of the sdk.
63
- These can all be passed via the sdk's `init` call.
64
-
65
- ### Backend Correlation
66
-
67
- The SDK supports trace context propagation to correlate frontend requests with backend services. You can configure different header types (`traceparent`, `X-Amzn-Trace-Id`) for different endpoints using the `propagators` configuration.
68
-
69
- > [!NOTE]
70
- > Misconfiguration of cross origin trace correlation can lead to request failures. Please make sure to carefully validate
71
- > the configuration provided in the next steps
72
-
73
- #### Propagators Configuration (Recommended)
74
-
75
- Configure trace context propagators for different URL patterns:
76
-
77
- ```js
78
- init({
79
- propagators: [
80
- // W3C traceparent headers for internal APIs
81
- { type: "traceparent", match: [/.*\/api\/internal.*/] },
82
- // AWS X-Ray headers for AWS services
83
- { type: "xray", match: [/.*\.amazonaws\.com.*/] },
84
- // Send both headers to specific endpoints
85
- { type: "traceparent", match: [/.*\/api\/special.*/] },
86
- { type: "xray", match: [/.*\/api\/special.*/] },
87
- ],
88
- });
89
- ```
90
-
91
- **Supported propagator types:**
92
-
93
- - `"traceparent"`: W3C Trace Context headers for OpenTelemetry-compatible services
94
- - `"xray"`: AWS X-Ray trace headers for AWS services
95
-
96
- **Same-origin requests**: All same-origin requests automatically receive `traceparent` headers plus headers for ALL other configured propagator types, regardless of match patterns. This ensures consistent trace correlation within your application.
97
-
98
- **Match patterns for cross-origin requests:**
99
-
100
- - `RegExp`: Regular expressions to match against full URLs
101
-
102
- **Multiple Headers**: When multiple propagators match the same URL, both headers will be added to the request. This is useful when you need to support multiple tracing systems simultaneously.
103
-
104
- **Backend setup**
105
-
106
- - Make sure the endpoints respond to `OPTIONS` requests and include the appropriate headers in their `Access-Control-Allow-Headers` response header:
107
- - `traceparent` for W3C trace context
108
- - `X-Amzn-Trace-Id` for AWS X-Ray
109
-
110
- #### Legacy Configuration (Deprecated)
111
-
112
- The legacy `propagateTraceHeadersCorsURLs` configuration is still supported but deprecated:
113
-
114
- - Include a regex matching the endpoint you want to enable in the [propagateTraceHeadersCorsURLs](#http-request-instrumentation) configuration option.
115
-
116
- ### Configuration auto detection
117
-
118
- Certain configuration values can be auto-detected if using the module version of the SDK in combination with certain cloud providers.
119
-
120
- #### Vercel
121
-
122
- This currently also requires the use of Next.js
123
-
124
- | Configuration Key | Source |
125
- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------- |
126
- | environment | [NEXT_PUBLIC_VERCEL_ENV](https://vercel.com/docs/environment-variables/framework-environment-variables#NEXT_PUBLIC_VERCEL_ENV) |
127
- | deploymentName | [NEXT_PUBLIC_VERCEL_TARGET_ENV](https://vercel.com/docs/environment-variables/framework-environment-variables#NEXT_PUBLIC_VERCEL_TARGET_ENV) |
128
- | deploymentId | [NEXT_PUBLIC_VERCEL_BRANCH_URL](https://vercel.com/docs/environment-variables/framework-environment-variables#NEXT_PUBLIC_VERCEL_BRANCH_URL) |
129
-
130
- ### Configuration Overview
131
-
132
- #### General
133
-
134
- - **Enabled Instrumentations**<br>
135
- key: `enabledInstrumentations`<br>
136
- type: `InstrumentationName[]`<br>
137
- optional: `true`<br>
138
- default: `undefined`<br>
139
- List of instrumentations to enable. Defaults to `undefined`, enabling all instrumentations.
140
- Supported values: `'navigation' | 'web-vitals' | 'error' | 'fetch'`
141
- Please note that some dash0 features might not work as expected if instrumentations are disabled.
142
-
143
- - **Ignore URLs**<br>
144
- key: `ignoreUrls`<br>
145
- type: `Array<RegExp>`<br>
146
- optional: `true`<br>
147
- default: `undefined`<br>
148
- An array of URL regular expression for which no data should be collected.
149
- These regular expressions are evaluated against the document, XMLHttpRequest, fetch and resource URLs.
150
-
151
- - ** URL Attribute Scrubber**<br>
152
- key: `urlAttributeScrubber`<br>
153
- type: `UrlAttributeScrubber`<br>
154
- optional: `true`<br>
155
- default: `(attributes) => attributes`
156
- Allows the application of a custom scrubbing function to url attributes before they are applied to signals.
157
- This is invoked for each url processed for inclusion in signal attributes. For example this applies both to `page.url.*`
158
- and `url.*` attribute namespaces.
159
- Sensitive parts of the url attributes should be replaced with `REDACTED`,
160
- avoid partially or fully dropping attributes to preserve telemetry quality.
161
- Note: basic auth credentials in urls are automatically redacted before this is invoked.
162
-
163
- #### Website Details and Attributes
164
-
165
- - **Service Name**<br>
166
- key: `serviceName`<br>
167
- type: `string`<br>
168
- optional: `false`<br>
169
- The logical name or your website, maps to the [service.name](https://opentelemetry.io/docs/specs/semconv/registry/attributes/service/#service-name) otel attribute.
170
- - **Service Version**<br>
171
- key: `serviceVersion`<br>
172
- type: `string`<br>
173
- optional: `true`<br>
174
- default: `undefined`<br>
175
- The current version of your website, maps to the [service.version](https://opentelemetry.io/docs/specs/semconv/registry/attributes/service/#service-version) otel attribute.
176
- - **Environment**<br>
177
- key: `environment`<br>
178
- type: `string`<br>
179
- optional: `true`<br>
180
- default: `undefined`<br>
181
- Name of the deployment environment, for example `staging`, or `production`. Maps to the [deployment.environment.name](https://opentelemetry.io/docs/specs/semconv/registry/attributes/deployment/#deployment-environment-name) otel attribute.
182
- This value is [auto detected](#configuration-auto-detection) in certain build environments.
183
- - **Deployment Name**<br>
184
- key: `deploymentName`<br>
185
- type: `string`<br>
186
- optional: `true`<br>
187
- default: `undefined`<br>
188
- Name of the deployment, maps to the [deployment.name](https://opentelemetry.io/docs/specs/semconv/registry/attributes/deployment/#deployment-name) otel attribute.
189
- This value is [auto detected](#configuration-auto-detection) in certain build environments.
190
- - **Deployment Id**<br>
191
- key: `deploymentId`<br>
192
- type: `string`<br>
193
- optional: `true`<br>
194
- default: `undefined`<br>
195
- Id of the deployment, maps to the [deployment.id](https://opentelemetry.io/docs/specs/semconv/registry/attributes/deployment/#deployment-id) otel attribute.
196
- This value is [auto detected](#configuration-auto-detection) in certain build environments.
197
- - **Additional Signal Attributes**<br>
198
- key: `additionalSignalAttributes`<br>
199
- type: `Record<string, AttributeValueType | AnyValue>`<br>
200
- optional: `true`<br>
201
- default: `undefined`<br>
202
- Allows the configuration of additional attributes to be included with any transmitted event.
203
- See [AttributeValueType](https://github.com/dash0hq/dash0-sdk-web/blob/main/src/utils/otel/attributes.ts#L4) and [AnyValue](https://github.com/dash0hq/dash0-sdk-web/blob/main/types/otlp.d.ts#L3) for detailed types.
204
-
205
- #### OTLP Endpoint
206
-
207
- - **Endpoint**<br>
208
- key: `endpoint`<br>
209
- type: `Endpoint | Endpoint[]`<br>
210
- optional: `false`<br>
211
- The OTLP to which the generated telemetry should be sent. Supports multiple endpoints in parallel if an array is provided.
212
- - **Endpoint URL**<br>
213
- key: `endpoint.url`<br>
214
- type: `string`<br>
215
- optional: `false`<br>
216
- The OTLP HTTP URL of the endpoint, not including the `/v1/*` part of the path
217
- - **Endpoint Auth Token**<br>
218
- key: `endpoint.authToken`<br>
219
- type: `string`<br>
220
- optional: `false`<br>
221
- The auth token used for the endpoint. Will be placed into `Authorization: Bearer {auth_token}` header.
222
- - **Endpoint Dataset**<br>
223
- key: `endpoint.dataset`<br>
224
- type: `string`<br>
225
- optional: `true`<br>
226
- Optionally specify what dataset should be placed into. Can also be configured within Dash0 through the auth token.
227
-
228
- #### Session Tracking
229
-
230
- - **Session Inactivity Timeout**<br>
231
- key: `sessionInactivityTimeoutMillis`<br>
232
- type: `number`<br>
233
- optional: `true`<br>
234
- default: `10800000` (3 hours)<br>
235
- The session inactivity timeout. Session inactivity is the maximum allowed time to pass between two page loads before
236
- the session is considered to be expired. The maximum value is the maximum session duration of 24 hours.
237
- - **Session Termination Timeout**<br>
238
- key: `sessionTerminationTimeoutMillis`<br>
239
- type: `number`<br>
240
- optional: `true`<br>
241
- default: `21600000` (6 hours)<br>
242
- The default session termination timeout. Session termination is the maximum allowed time to pass since session start
243
- before the session is considered to be expired.
244
-
245
- #### Error tracking
246
-
247
- - **Ignore Error Messages**<br>
248
- key: `ignoreErrorMessages`<br>
249
- type: `Array<RegExp>`<br>
250
- optional: `true`<br>
251
- default: `undefined`<br>
252
- An array of error message regular expressions for which no data should be collected.
253
- - **Wrap Event Handlers**<br>
254
- key: `wrapEventHandlers`<br>
255
- type: `boolean`<br>
256
- optional: `true`<br>
257
- default: `true`<br>
258
- Whether we should automatically wrap DOM event handlers added via addEventListener for improved uncaught error tracking.
259
- This results in improved uncaught error tracking for cross-origin errors,
260
- but may have adverse effects on website performance and stability.
261
- - **Wrap Timers**<br>
262
- key: `wrapTimers`<br>
263
- type: `boolean`<br>
264
- optional: `true`<br>
265
- default: `true`<br>
266
- Whether we should automatically wrap timers added via setTimeout / setInterval for improved uncaught error tracking.
267
- This results in improved uncaught error tracking for cross-origin errors,
268
- but may have adverse effects on website performance and stability.
269
-
270
- #### HTTP request instrumentation
271
-
272
- - **Propagators**<br>
273
- key: `propagators`<br>
274
- type: `PropagatorConfig[]`<br>
275
- optional: `true`<br>
276
- default: `undefined`<br>
277
- Configure trace context propagators for different URL patterns. Each propagator defines which header type to send for matching URLs.
278
-
279
- ```typescript
280
- type PropagatorConfig = {
281
- type: "traceparent" | "xray";
282
- match: RegExp[];
283
- };
284
- ```
285
-
286
- Example:
287
-
288
- ```js
289
- propagators: [
290
- // Use RegExp for specific cross-origin URL patterns
291
- { type: "traceparent", match: [/.*\/api\/internal.*/] },
292
- { type: "xray", match: [/.*\.amazonaws\.com.*/] },
293
- // Multiple propagators can match the same URL to send both headers
294
- { type: "traceparent", match: [/.*\/api\/both.*/] },
295
- { type: "xray", match: [/.*\/api\/both.*/] },
296
- ];
297
- ```
298
-
299
- **Same-origin behavior**: All same-origin requests automatically get `traceparent` headers plus headers for ALL other configured propagator types, regardless of match patterns.
300
-
301
- **Cross-origin behavior**: When multiple propagators match the same cross-origin URL, both headers will be sent. Duplicate propagator types for the same URL are automatically deduplicated.
302
-
303
- NOTE: Any cross origin endpoints allowed via this option need to include the appropriate headers in the `Access-Control-Allow-Headers`
304
- response header (`traceparent` for W3C, `X-Amzn-Trace-Id` for X-Ray). Misconfiguration will cause request failures!
305
-
306
- - **Propagate Trace Header Cors URLs** ⚠️ **DEPRECATED**<br>
307
- key: `propagateTraceHeadersCorsURLs`<br>
308
- type: `Array<RegExp>`<br>
309
- optional: `true`<br>
310
- default: `undefined`<br>
311
- **DEPRECATED: Use `propagators` instead.** An array of URL regular expressions for which trace context headers should be sent across origins by http client instrumentations.
312
- NOTE: Any cross origin endpoints allowed via this option need to include `traceparent` in the `Access-Control-Allow-Headers`
313
- response header. Misconfiguration will cause request failures!
314
- - **Max Wait For Resource Timings**<br>
315
- key: `maxWaitForResourceTimingsMillis`<br>
316
- type: `number`<br>
317
- optional: `true`<br>
318
- default: `10000`<br>
319
- How long to wait after an XMLHttpRequest or fetch request has finished for the retrieval of resource timing data.
320
- Performance timeline events are placed on the low priority task queue and therefore high values might be necessary.
321
- - **Max Tolerance For Resource Timings**<br>
322
- key: `maxToleranceForResourceTimingsMillis`<br>
323
- type: `number`<br>
324
- optional: `true`<br>
325
- default: `50`<br>
326
- The number of milliseconds of tolerance between resolution of a http request promise and the end time of performanceEntries
327
- applied when matching a request to its respective performance entry. A higher value might increase match frequency at
328
- the cost of potential incorrect matches. Matching is performed based on request timing and url.
329
- - **Headers to Capture**<br>
330
- key: `headersToCapture`<br>
331
- type: `Array<RegExp>`<br>
332
- optional: `true`<br>
333
- default: `undefined`<br>
334
- A set of regular expressions that will be matched against HTTP request headers,
335
- to be captured in `XMLHttpRequest` and `fetch` Instrumentations. These headers will be transferred as span attributes.
336
-
337
- #### Page view instrumentation
338
-
339
- - **Provide Page Metadata**<br>
340
- key: `pageViewInstrumentation.generateMetadata`<br>
341
- type: `(url: URL) => PageViewMeta | undefined`<br>
342
- optional: `true`<br>
343
- default: `undefined`<br>
344
- Allows websites to dynamically provide page metadata based on the current url. Metadata may include the page title
345
- and a set of attributes. See [PageViewMeta](https://github.com/dash0hq/dash0-sdk-web/blob/main/src/vars.ts#L25) for
346
- detailed type information.
347
- - **Track Virtual Page Views**<br>
348
- key: `pageViewInstrumentation.trackVirtualPageViews`<br>
349
- type: `boolean`<br>
350
- optional: `true`<br>
351
- default: `true`<br>
352
- Whether the sdk should track virtual page views by instrumenting the history api.
353
- Only relevant for websites utilizing virtual navigation.
354
- - **Track Url Part Changes**<br>
355
- key: `pageViewInstrumentation.includeParts`<br>
356
- type: `Array<"HASH" | "SEARCH">`<br>
357
- optional: `true`<br>
358
- default: `[]`<br>
359
- Additionally generate virtual page views when these url parts change.
360
- - "HASH" changes to the urls hash / fragment
361
- - "SEARCH" changes to the urls search / query parameters
362
-
363
- ## API
364
-
365
- The SDK provides several API functions to help you customize telemetry collection and add contextual information to your signals.
366
-
367
- ### Signal attributes
368
-
369
- Functions for managing custom attributes that are included with all signals.
370
-
371
- #### `addSignalAttribute(name, value)`
372
-
373
- Adds a signal attribute to be transmitted with every signal.
374
-
375
- **Parameters:**
376
-
377
- - `name` (string): The attribute name
378
- - `value` (AttributeValueType | AnyValue): The attribute value
379
-
380
- **Example:**
381
-
382
- ```js
383
- import { addSignalAttribute } from "@dash0/sdk-web";
384
-
385
- addSignalAttribute("environment", "production");
386
- addSignalAttribute("version", "1.2.3");
25
+ ```sh
26
+ # npm
27
+ npm install @Dash0/sdk-web
28
+ # yarn
29
+ yarn add @Dash0/sdk-web
387
30
  ```
388
31
 
389
- **Note:** If you need to ensure attributes are included with signals transmitted on initial page load, use the `additionalSignalAttributes` property in the `init()` call instead.
390
-
391
- #### `removeSignalAttribute(name)`
392
-
393
- Removes a previously added signal attribute.
394
-
395
- **Parameters:**
396
-
397
- - `name` (string): The attribute name to remove
398
-
399
- **Example:**
400
-
401
- ```js
402
- import { removeSignalAttribute } from "@dash0/sdk-web";
403
-
404
- removeSignalAttribute("environment");
405
- ```
406
-
407
- ### User identification
408
-
409
- #### `identify(id, opts)`
410
-
411
- Associates user information with telemetry signals.
412
- See [OTEL User Attributes](https://opentelemetry.io/docs/specs/semconv/registry/attributes/user/) for the matching attributes
413
-
414
- **Parameters:**
415
-
416
- - `id` (string, optional): User identifier
417
- - `opts` (object, optional): Additional user information
418
- - `name` (string, optional): Short name or login/username of the user
419
- - `fullName` (string, optional): User's full name
420
- - `email` (string, optional): User email address
421
- - `hash` (string, optional): Unique user hash to correlate information for a user in anonymized form.
422
- - `roles` (string[], optional): User roles
423
-
424
- **Example:**
425
-
426
- ```js
427
- import { identify } from "@dash0/sdk-web";
428
-
429
- identify("user123", {
430
- name: "johndoe",
431
- fullName: "John Doe",
432
- email: "john@example.com",
433
- roles: ["admin", "user"],
434
- });
435
- ```
436
-
437
- ### Custom Events
438
-
439
- #### `sendEvent(name, opts)`
440
-
441
- Sends a custom event with optional data and attributes.
442
- Event name cannot be one of the event names internally used by the SDK. See [Event Names](https://github.com/dash0hq/dash0-sdk-web/blob/main/src/semantic-conventions.ts#L50)
443
-
444
- **Parameters:**
445
-
446
- - `name` (string): Event name
447
- - `opts` (object, optional): Event options
448
- - `title` (string, optional): Human readable title for the event. Should summarize the event in a single short sentence.
449
- - `timestamp` (number | Date, optional): Event timestamp
450
- - `data` (AttributeValueType | AnyValue, optional): Event data
451
- - `attributes` (Record<string, AttributeValueType | AnyValue>, optional): Event attributes
452
- - `severity` (LOG_SEVERITY_TEXT, optional): Log severity level
453
-
454
- **Example:**
455
-
456
- ```js
457
- import { sendEvent } from "@dash0/sdk-web";
458
-
459
- sendEvent("user_action", {
460
- data: "button_clicked",
461
- attributes: {
462
- buttonId: "submit-form",
463
- page: "/checkout",
464
- },
465
- severity: "INFO",
466
- });
467
- ```
468
-
469
- ### Error Reporting
470
-
471
- #### `reportError(error, opts)`
472
-
473
- Manually reports an error to be tracked in telemetry.
474
-
475
- **Parameters:**
476
-
477
- - `error` (string | ErrorLike): Error message or error object
478
- - `opts` (object, optional): Error reporting options
479
- - `componentStack` (string | null | undefined): Component stack trace for React errors
480
-
481
- **Example:**
482
-
483
- ```js
484
- import { reportError } from "@dash0/sdk-web";
485
-
486
- // Report a string error
487
- reportError("Something went wrong in user flow");
488
-
489
- // Report an Error object
490
- try {
491
- // Some operation
492
- } catch (error) {
493
- reportError(error);
494
- }
495
-
496
- // Report with component stack (useful for React)
497
- reportError(error, {
498
- componentStack: getComponentStack(),
499
- });
500
- ```
501
-
502
- ### Session Management
503
-
504
- #### `terminateSession()`
505
-
506
- Manually terminates the current user session.
507
-
508
- **Example:**
509
-
510
- ```js
511
- import { terminateSession } from "@dash0/sdk-web";
512
-
513
- // Terminate session on user logout
514
- function handleLogout() {
515
- terminateSession();
516
- // Additional logout logic
517
- }
518
- ```
519
-
520
- **Note:** Sessions are automatically managed by the SDK based on inactivity and termination timeouts configured during initialization. Manual termination is typically only needed for explicit user logout scenarios.
521
-
522
- ### Internal Telemetry
523
-
524
- #### `setActiveLogLevel(logLevel)`
525
-
526
- Changes the active log level of this SDK. Defaults to `warn`.
527
-
528
- **Example:**
529
-
530
- ```js
531
- import { setActiveLogLevel } from "@dash0/sdk-web";
532
-
533
- setActiveLogLevel("debug");
534
- ```
535
-
536
- ## Development
537
-
538
- ### Releases
539
-
540
- This project follows the [Semantic Versioning](https://semver.org/) scheme `MAJOR.MINOR.PATH`.
541
- In this means:
542
-
543
- - `MAJOR` versions are released for significant changes in operation or backward incompatible API changes.
544
- - `MINOR` versions add functionality in a backward compatible manner.
545
- - `PATCH` versions include bug and security fixes which do not break backward compatibility.
546
-
547
- We automatically release new versions of this package whenever a PR is merged to main and the CI is able to detect a
548
- valid version increase from the merge commit. It uses [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
549
- to calculate the version increase and to generate additional messaging such as changelogs.
550
- Please make sure PR merge commits are formatted accordingly, non matching messages will create a PATCH release, but no
551
- changelog entry.
552
- Examples:
553
-
554
- - A `PATCH` release:
555
- ```
556
- fix: Include missing user.name attribute
557
- ```
558
- - A `MINOR` release:
559
-
560
- ```
561
- feat: Add instrumentation for fetch()
562
-
563
- The sdk now supports automatic instrumentation of the fetch api
564
- ```
565
-
566
- - A `MAJOR` release:
567
-
568
- ```
569
- feat: Add version two of page-load instrumentation
570
-
571
- BREAKING CHANGE: This adds a new updated instrumentation for page-loads, it is no longer
572
- compatible with the previous version. For instructions on how to update see: https://example.com
573
- ```
574
-
575
- or:
576
-
577
- ```
578
- feat!: Add version two of page-load instrumentation
579
-
580
- This adds a new updated instrumentation for page-loads, it is no longer
581
- compatible with the previous version. For instructions on how to update see: https://example.com
582
- ```
583
-
584
- - NO changelog entry, PATCH release:
585
- ```
586
- chore: Improve spelling of README
587
- ```
588
-
589
- ### E2E Tests
590
-
591
- We run e2e tests via webdriverIO and lambda test.
592
- They currently don't have a fully local setup, but tests can be executed locally targeting chrome headless via `pnpm run test:e2e:local`.
593
-
594
- #### Setup
32
+ 2. Initialize the SDK in your code: you'll need to call the `init` function at a convenient time in your applications lifecycle.
33
+ Ideally this should happen as early as possible in the web page intialization, as most instrumentations shipped by the SDK can only observe events after init has been called.
595
34
 
596
- - Get a lambda test account
597
- - Create a `.env` file based on `.env.example` and provide your lambda test credentials.
598
- - Run the tests via `pnpm run test:e2e`
35
+ ```js
36
+ import { init } from "@Dash0/sdk-web";
599
37
 
600
- #### Why do tests run on ports 8010, 8011 and 8012?
38
+ init({
39
+ serviceName: "my-website",
40
+ endpoint: {
41
+ // Replace this with the endpoint URL identified during preparation
42
+ url: REPLACE THIS,
43
+ // Replace this with your auth token you created earlier
44
+ // Ideally, you will inject the value at build time in order not commit the token to git,
45
+ // even if its effectively public in the HTML you ship to the end user's browser
46
+ authToken: REPLACE THIS
47
+ },
48
+ });
49
+ ```
601
50
 
602
- We need multiple ports to properly test cors behaviour.
51
+ For more detailed instructions, refer to [`INSTALL.md`](./INSTALL.md).