Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add option for customizing logger in the replayer #1111

Merged
merged 1 commit into from
Feb 9, 2023
Merged

add option for customizing logger in the replayer #1111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
| useVirtualDom | true | whether to use Virtual Dom optimization in the process of skipping to a new point of time |
| logger | console | The logger object used by the replayer to print warnings or errors |

#### Use rrweb-player

Expand Down
1 change: 1 addition & 0 deletions guide.zh_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,7 @@ replayer.destroy();
| unpackFn | - | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| plugins | [] | 加载插件以获得额外的回放功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
| useVirtualDom | true | 在播放器跳转到一个新的时间点的过程中，是否使用 Virtual Dom 优化 |
| logger | console | 当播放器出现警告或错误时用来打印日志的对象 |

#### 使用 rrweb-player

Expand Down
47 changes: 19 additions & 28 deletions packages/rrweb/src/replay/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ export class Replayer {
pauseAnimation: true,
mouseTail: defaultMouseTailConfig,
useVirtualDom: true, // Virtual-dom optimization is enabled by default.
logger: console,
};
this.config = Object.assign({}, defaultConfig, config);

Expand Down Expand Up @@ -259,9 +260,7 @@ export class Replayer {
);
value.node = realNode;
} catch (error) {
if (this.config.showWarning) {
console.warn(error);
}
this.warn(error);
}
}
}
Expand Down Expand Up @@ -486,7 +485,7 @@ export class Replayer {
}

public resume(timeOffset = 0) {
console.warn(
this.warn(
`The 'resume' was deprecated in 1.0. Please use 'play' method which has the same interface.`,
);
this.play(timeOffset);
Expand Down Expand Up @@ -743,10 +742,10 @@ export class Replayer {
isSync = false,
) {
if (!this.iframe.contentDocument) {
return console.warn('Looks like your replayer has been destroyed.');
return this.warn('Looks like your replayer has been destroyed.');
}
if (Object.keys(this.legacy_missingNodeRetryMap).length) {
console.warn(
this.warn(
'Found unresolved missing node map',
this.legacy_missingNodeRetryMap,
);
Expand Down Expand Up @@ -1240,12 +1239,10 @@ export class Replayer {
mediaEl.playbackRate = d.playbackRate;
}
} catch (error) {
if (this.config.showWarning) {
console.warn(
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
`Failed to replay media interactions: ${error.message || error}`,
);
}
this.warn(
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
`Failed to replay media interactions: ${error.message || error}`,
);
}
break;
}
Expand Down Expand Up @@ -1302,9 +1299,7 @@ export class Replayer {
);
this.iframe.contentDocument?.fonts.add(fontFace);
} catch (error) {
if (this.config.showWarning) {
console.warn(error);
}
this.warn(error);
}
break;
}
Expand Down Expand Up @@ -1342,9 +1337,7 @@ export class Replayer {
);
if (virtualNode) value.node = virtualNode;
} catch (error) {
if (this.config.showWarning) {
console.warn(error);
}
this.warn(error);
}
}
}
Expand Down Expand Up @@ -1425,7 +1418,7 @@ export class Replayer {

const appendNode = (mutation: addedNodeMutation) => {
if (!this.iframe.contentDocument) {
return console.warn('Looks like your replayer has been destroyed.');
return this.warn('Looks like your replayer has been destroyed.');
}
let parent: Node | null | ShadowRoot | RRNode = mirror.getNode(
mutation.parentId,
Expand Down Expand Up @@ -1704,12 +1697,10 @@ export class Replayer {
value,
);
} catch (error) {
if (this.config.showWarning) {
console.warn(
'An error occurred may due to the checkout feature.',
error,
);
}
this.warn(
'An error occurred may due to the checkout feature.',
error,
);
}
} else if (attributeName === 'style') {
const styleValues = value;
Expand Down Expand Up @@ -2122,20 +2113,20 @@ export class Replayer {
* is microtask, so events fired on a removed DOM may emit
* snapshots in the reverse order.
*/
this.debug(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' not found. `, d);
this.debug(`Node with id '${id}' not found. `, d);
}

private warn(...args: Parameters<typeof console.warn>) {
if (!this.config.showWarning) {
return;
}
console.warn(REPLAY_CONSOLE_PREFIX, ...args);
this.config.logger.warn(REPLAY_CONSOLE_PREFIX, ...args);
}

private debug(...args: Parameters<typeof console.log>) {
if (!this.config.showDebug) {
return;
}
console.log(REPLAY_CONSOLE_PREFIX, ...args);
this.config.logger.log(REPLAY_CONSOLE_PREFIX, ...args);
}
}
4 changes: 4 additions & 0 deletions packages/rrweb/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,10 @@ export type playerConfig = {
};
unpackFn?: UnpackFn;
useVirtualDom: boolean;
logger: {
log: (...args: Parameters<typeof console.log>) => void;
warn: (...args: Parameters<typeof console.warn>) => void;
};
plugins?: ReplayPlugin[];
};

Expand Down