Skip to content

[webview_flutter_wkwebview] Fixes JSON.stringify() cannot serialize cyclic structures #6274

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

Merged
auto-submit merged 12 commits into from
May 15, 2024
Merged

[webview_flutter_wkwebview] Fixes JSON.stringify() cannot serialize cyclic structures #6274

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6057b1d
Fixs JSON.stringify() cannot serialize cyclic structures
LinXunFeng Mar 6, 2024
a37f7bf
Update version and CHANGELOG
LinXunFeng Mar 6, 2024
182afac
Remove cyclic object
LinXunFeng Mar 12, 2024
ee66a4a
Remove whitespace
LinXunFeng Mar 12, 2024
a709175
Remove whitespace
LinXunFeng Mar 12, 2024
b7a3661
Improve logic
LinXunFeng Mar 15, 2024
f7ac9bd
Merge branch 'main' into fix_json_stringify_cyclic_structures_error_w…
LinXunFeng Mar 15, 2024
ae1a4a2
Adjust to use _flutter_webview_plugin_overrides namespace
LinXunFeng Apr 30, 2024
979d8ee
Update comment
LinXunFeng Apr 30, 2024
fd9bbcf
Update comment
LinXunFeng Apr 30, 2024
c32dedd
Update AUTHORS
LinXunFeng Apr 30, 2024
3700600
Rename
LinXunFeng May 8, 2024
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
Next Next commit
Fixs JSON.stringify() cannot serialize cyclic structures
  • Loading branch information
@LinXunFeng
LinXunFeng committed Mar 6, 2024
commit 6057b1d418f28908537d4e0807fb314b78cf3e8e
45 changes: 45 additions & 0 deletions ...view_flutter/webview_flutter_wkwebview/example/integration_test/webview_flutter_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1447,6 +1447,51 @@ Future<void> main() async {
await expectLater(
debugMessageReceived.future, completion('debug:Debug message'));
});

testWidgets('can receive console log messages with cyclic object value',
(WidgetTester tester) async {
const String testPage = '''
<!DOCTYPE html>
<html>
<head>
<title>WebResourceError test</title>
<script type="text/javascript">
function onLoad() {
const circularReference = { otherData: 123 };
circularReference.myself = circularReference;
console.log(circularReference);
}
</script>
</head>
<body onload="onLoad();">
</html>
''';

final Completer<String> debugMessageReceived = Completer<String>();
final PlatformWebViewController controller = PlatformWebViewController(
const PlatformWebViewControllerCreationParams(),
);
unawaited(controller.setJavaScriptMode(JavaScriptMode.unrestricted));

await controller
.setOnConsoleMessage((JavaScriptConsoleMessage consoleMessage) {
debugMessageReceived
.complete('${consoleMessage.level.name}:${consoleMessage.message}');
});

await controller.loadHtmlString(testPage);

await tester.pumpWidget(Builder(
builder: (BuildContext context) {
return PlatformWebViewWidget(
PlatformWebViewWidgetCreationParams(controller: controller),
).build(context);
},
));

await expectLater(debugMessageReceived.future,
completion('log:{"otherData":123,"myself":"[Circular]"}'));
});
});
}

Expand Down
25 changes: 24 additions & 1 deletion packages/webview_flutter/webview_flutter_wkwebview/lib/src/webkit_webview_controller.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,11 +630,34 @@ class WebKitWebViewController extends PlatformWebViewController {
}

Future<void> _injectConsoleOverride() {
// Using the replacer parameter of JSON.stringify() to solve the error
// TypeError: JSON.stringify cannot serialize cyclic structures.
// See https://github.com/flutter/flutter/issues/144535.
//
// The getCircularReplacer() taken from
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value.
const WKUserScript overrideScript = WKUserScript(
Copy link
Collaborator

@stuartmorgan-g stuartmorgan-g Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a comment briefly explaining the approach at a high level so readers don't need to reverse-engineer what is being done here.

Copy link
Member Author

@LinXunFeng LinXunFeng Apr 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

'''
function getCircularReplacer() {
const ancestors = [];
return function (key, value) {
if (typeof value !== "object" || value === null) {
return value;
}
while (ancestors.length > 0 && ancestors.at(-1) !== this) {
ancestors.pop();
}
if (ancestors.includes(value)) {
return "[Circular]";
}
ancestors.push(value);
return value;
};
}

function log(type, args) {
var message = Object.values(args)
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v) : v.toString())
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v, getCircularReplacer()) : v.toString())
.map(v => v.substring(0, 3000)) // Limit msg to 3000 chars
.join(", ");

Expand Down
19 changes: 18 additions & 1 deletion packages/webview_flutter/webview_flutter_wkwebview/test/webkit_webview_controller_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1378,9 +1378,26 @@ void main() {
expect(overrideConsoleScript.injectionTime,
WKUserScriptInjectionTime.atDocumentStart);
expect(overrideConsoleScript.source, '''
function getCircularReplacer() {
const ancestors = [];
return function (key, value) {
if (typeof value !== "object" || value === null) {
return value;
}
while (ancestors.length > 0 && ancestors.at(-1) !== this) {
ancestors.pop();
}
if (ancestors.includes(value)) {
return "[Circular]";
}
ancestors.push(value);
return value;
};
}

function log(type, args) {
var message = Object.values(args)
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v) : v.toString())
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v, getCircularReplacer()) : v.toString())
.map(v => v.substring(0, 3000)) // Limit msg to 3000 chars
.join(", ");

Expand Down